WordPress 웹사이트에 두 개의 다른 링크, 레이블, 아이콘 및 구분선 텍스트가 있는 듀얼 버튼을 표시하고 싶으신가요? GutenKit 듀얼 버튼 블록은 단축 코드 없이 Gutenberg(블록) 편집기에서 바로 듀얼 버튼을 쉽게 추가하고 사용자 정의할 수 있도록 도와줍니다.

Gutenberg 편집기에서 듀얼 버튼을 만드는 방법을 알아보려면 이 설명서를 살펴보세요. 튜토리얼을 시작하기 전에 GutenKit 플러그인을 설치했는지 확인하세요.

WordPress 블록 편집기에 재미있는 사실 카운터를 추가하는 방법? #

GutenKit 듀얼 버튼 블록을 추가하여 시작해 보겠습니다.

1단계: GutenKit 듀얼 버튼 블록 추가 #

WordPress 대시보드에 로그인한 다음

1. 페이지나 게시물을 추가하고 블록 편집기로 이동하세요.
2. “를 클릭하세요.+편집기 화면 상단에 있는 ”아이콘을 클릭하세요.
3. 블록 라이브러리가 공개될 것입니다.
4. 검색 창을 사용하여 "듀얼 버튼" 차단하다.
5. 화면이 나타나면 클릭하거나 끌어서 편집기 화면으로 놓으세요.

2단계: 버튼 텍스트, 아이콘, 링크 추가 #

듀얼 버튼 설정을 열고 듀얼 버튼으로 이동합니다. 그런 다음,

듀얼 버튼 아래: #

• 중간 텍스트: 이 버튼은 기본적으로 활성화되어 있으며, 비활성화하면 중간 텍스트가 숨겨집니다.
• 텍스트: 이 상자에 중간 텍스트를 입력하세요.
• 조정: 듀얼 버튼 위치 전체를 정의합니다. (왼쪽, 가운데, 오른쪽)
• 버튼 너비: 이 슬라이더를 사용하여 양쪽 버튼의 두께를 결정합니다.

다음으로, 버튼 1과 버튼 2 설정이 표시됩니다. 두 옵션 모두 동일한 기능을 가지고 있습니다.

버튼 1 및 2 아래: #

• 타이포그래피: 글꼴 패밀리, 크기, 굵기, 스타일, 줄 및 문자 간격 등 버튼의 모든 타이포그래피 관련 사용자 정의를 제어합니다.색상: 이 색상 선택기를 사용하여 버튼 텍스트 색상을 설정합니다.국경: 여기에서 테두리 스타일, 두께, 색상을 설정합니다.테두리 반경: 상자에 값을 입력하여 버튼 테두리의 둥근 정도를 결정합니다.배경: 클래식, 그라데이션, 이미지 중에서 버튼의 배경 유형을 선택하세요.박스 섀도우: 클릭하면 테두리 주위에 그림자 효과를 추가하는 설정이 열립니다.

• 심: 버튼 주위에 내부 공간을 추가하려면 값을 입력하세요.
• 여유: 
• 텍스트 정렬: 버튼 텍스트를 왼쪽, 중앙, 오른쪽에 배치합니다.

아래에서 가운데 텍스트에 대한 사용자 지정 옵션을 확인할 수 있습니다.

중간 텍스트: #

• 타이포그래피: 다음과 같은 모든 타이포그래피 설정을 가져옵니다. 
• 색상: 이 색상 선택기를 사용하여 중간 텍스트에 색상을 추가합니다.
• 국경: 테두리 스타일, 두께, 색상 등 테두리 설정을 모두 가져옵니다.
• 테두리 반경: 테두리의 둥글기를 설정하는 값을 정의합니다.
• 배경: 중간 텍스트에 배경색을 추가합니다.
• 박스 섀도우: 이 설정 영역을 사용하면 가운데 텍스트에 그림자 효과를 적용할 수 있습니다.
• 너비: 가운데 텍스트 영역의 수평 크기를 정의합니다.
• 키: 이전 설정과 마찬가지로 이 기능을 사용하면 가운데 텍스트의 수직 크기를 측정할 수 있습니다.

4단계: 고급 설정 #

고급 설정 탭에서 블록 레이아웃, 배경, 테두리 스타일을 구성하고 가시성을 제어할 수 있습니다.

공들여 나열한 것, #

• 여유: 블록 레이아웃 주변의 공간을 정의합니다. 다른 블록 사이의 간격을 설정하는 데 도움이 됩니다.
• 심: 레이아웃 내의 블록 주변 공간을 설정하는 값을 입력합니다.
• 너비: 기본 레이아웃 너비를 유지하는 것 외에.
  • 전체 넓이: 이 옵션을 선택하면 레이아웃이 화면 전체 너비에 걸쳐 적용됩니다.
  • 인라인(자동): 적용하면 블록 요소와 동일한 너비를 갖게 됩니다.
  • 관습: 이 옵션을 선택하면 블록 레이아웃의 수평 공간을 정의하는 슬라이더가 표시됩니다.
• Z-지수: 슬라이더를 사용하여 다른 블록과 함께 블록의 스택 순서를 지정합니다.

위치: #

드롭다운 아래에 세 가지 옵션이 표시됩니다. 기본, 순수한, 그리고 결정된. 

• 순수한: 이 옵션을 선택하면 블록의 절대 위치가 제공됩니다. 즉, 요소가 컨테이너에 맞습니다.
• 결정된: 고정 위치 옵션을 사용하면 요소가 전체 뷰포트나 화면에 맞춰집니다.

절대 및 고정 옵션 모두 아래와 같이 유사한 설정을 갖습니다.

• 수평 방향: 위치결정 방향을 왼쪽과 오른쪽 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수평 위치를 조정합니다.
• 수직 방향: 위치결정 방향을 위, 아래 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수직 위치를 조정합니다. 

배경: #

• 배경: 단색, 그라데이션, 이미지 중에서 배경 옵션을 선택합니다.

호버 옵션에서:

• 영상: 이미지 옵션을 선택하면 다음 옵션이 열립니다.
  • 영상: 미디어 라이브러리에서 이미지를 선택하거나 자신의 이미지를 업로드하세요.

이미지 크기e: 썸네일, 중간, 크게 또는 전체 중에서 이미지 크기를 선택합니다.

• 위치: 10가지 옵션의 위치를 선택합니다.
• 반복하다: 옵션을 선택하여 배경 이미지가 반복되는 방식을 설정합니다.
• 디스플레이 크기: 네 가지 옵션 중에서 디스플레이 크기를 선택합니다.

• 전환 기간: 슬라이더를 사용하여 배경이 일반에서 호버 상태로 전환되도록 조정합니다.

국경: #

• 국경: 이 설정 옵션에는 너비, 스타일, 색상과 같은 테두리 설정 옵션이 제공됩니다.
• 테두리 반경: 값을 입력하여 테두리의 둥근 정도를 설정합니다.
• 박스 섀도우: 색상, 가로/세로, 흐림, 퍼짐 등의 모든 설정을 사용하여 테두리에 그림자 효과를 적용할 수 있습니다. 

호버 옵션에서:

• 전환 기간: 수동으로 값을 추가하거나 슬라이더를 사용하여 마우스 오버 상태에서 테두리 디자인을 변경하는 시간을 설정할 수 있습니다.

시계

#

가시성 모듈을 사용하면 장치 유형에 따라 블록 디자인의 표시를 제어할 수 있습니다. 토글 버튼이 있는 세 가지 장치 옵션(데스크톱, 태블릿, 모바일)이 있습니다. 토글 버튼을 켜면 해당 장치의 블록 디자인을 숨길 수 있습니다. 그러나 편집기 보기에서는 여전히 볼 수 있습니다. 이제 GutenKit 듀얼 버튼 블록의 모든 설정에 대해 알아보았습니다. Gutenberg 블록 편집기에 눈길을 끄는 기능적인 블록을 추가해 보세요.