Want to show a dual button with two different links, labels, icons, and separator text on your WordPress website? The GutenKit Dual Button block helps you easily add and customize the dual button right in your Gutenberg (block) editor without any shortcode.

Go through this documentation to learn how to create a dual button in the Gutenberg editor. Make sure you have installed the GutenKit plugin before diving into the tutorial.

How to Add Fun Fact Counter on WordPress Block Editor? #

Let’s start by adding the GutenKit Dual Button block.

Step 1: Add GutenKit Dual Button Block #

Log in to your WordPress dashboard, then

1. Add a page or post and head to the block editor.
2. “를 클릭하세요.+편집기 화면 상단에 있는 ”아이콘을 클릭하세요.
3. You will see a block library will reveal.
4. Use the search bar to find the “듀얼 버튼” block.
5. 화면이 나타나면 클릭하거나 끌어서 편집기 화면으로 놓으세요.

Step 2: Add Button Text, Icon, Link #

Open the Dual button settings and go to the dual button. Then,

Under Dual Button: #

• Middle Text: This button is enabled by default, disable it to hide the middle text.
• 텍스트: Enter the middle text in this box.
• 조정: Define the entire dual button position. (Left, Center, Right)
• Button Width: Use this slider to determine the thickness of both button sides.

Next, you will see Button One and Button Two settings. Both options have the same features:

Under Button One & Two: #

• 타이포그래피: Control all the typography-related customization of buttons like font family, size, weight, style, line & letter spacing, and more.색상: Use this color picker to set the button text color.국경: From here you will set the border style, thickness, and color.Border Radius: Enter a value in the box to determine the roundness of the button border.배경: Select a background type for the button between classic, gradient, and image.박스 섀도우: Clicking it will open settings to add shadow effects around the border.

• 심: Enter a value to add inner space around the button.
• 여유: 
• 텍스트 정렬: Position the button text to the left, center, or right.

Below, you’ll see the customization options for the middle text.

중간 텍스트: #

• 타이포그래피: Get all the typography settings like 
• 색상: Use this color picker to add color to the middle text.
• 국경: Get all the border settings like border styles, thickness, and color.
• 테두리 반경: Define a value to set the roundness of the border.
• 배경: Add a background color to the middle text.
• 박스 섀도우: This setting area allows you to apply shadow effects to the middle text.
• 너비: Define the horizontal size of the middle text area.
• 키: Like the previous setting, this feature allows you to measure the vertical size of the middle text.

4단계: 고급 설정 #

From the Advanced Settings tab, you can configure the block layout, background, border styles, and control its visibility.

공들여 나열한 것, #

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

위치: #

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

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

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

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

배경: #

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

호버 옵션에서:

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

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

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

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

국경: #

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

호버 옵션에서:

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

시계

#

The visibility module allows you to control the display of block designs depending on the device type. There will be three device options (Desktop, Tablet, Mobile) with a toggle button. Turn on the toggle button to hide the block design of that device.However, you can still see it in the editor view.Now that you’ve learned about all the settings of the GutenKit Dual Button block. Try adding an eye-catching and functional block to your Gutenberg block editor.