You can easily build a feature-descriptive and stunning pricing table with various styling options.

Let’s know how to create a pricing table in the Gutenberg editor on your WordPress website.

Your WordPress site needs to have the GutenKit plugin installed. Then, follow the below steps:

How to Use GutenKit Pricing Table #

Step 1: Add the Pricing Table Block #

Start to edit an existing page or add a new page and click the “+” icon > Search for the 가격표 in the block library > Drag & drop the block to the editor screen.

Step 2: Add Pricing Table Content #

Open the block settings and go to the content tab. At first, we’ll enter the pricing table name and additional information. 

머리글: #

• Table Title: Enter the text of your table header title. 
• 제목 HTML 태그: Select the heading’s HTML tag to H1- H6, Div, Span, or Paragraph.
• Table Subtitle: Use this box to write the subtitle for the pricing table.
• Header Icon or Image: Add an icon or image for the table header. You can also choose to display none.

Step 3: Enter Pricing Info #

Price Tag: #

• 통화: Add a sign or word to show the monetary standard. 
• 가격: Enter a value for the price.
• 지속: Enter the text to show the package duration.

Step 4: Add Package Details #

From the feature settings area, you will add the details of your package.  

특징: #

• Features Style: Select a style from the dropdown to display the feature between a paragraph or list.

• Table Content: If you choose the paragraph style this option shows up. Enter the package details in the box.

• 목록: Selecting the List option will open up settings for adding a feature list. To add an item, hit the + 항목 추가 button. You can also copy an item by clicking the “항목 복제” icon and delete one with the “엑스” icon. Now, click any of the items and there will be the following options.

• List Text: Enter text for the feature or package.
• Add Icons: Enable this toggle button to show an icon with the feature.
• 상: Select an icon from the library or upload it from your device.
• 색상: Select a color for your icon.
• Info Text: Add any special info about the feature in this box. It will enable an info icon.

Step 5: Add Pricing Table Button #

Using this settings area, you can add a button within the pricing table

단추: #

• 상표: 버튼의 텍스트를 입력합니다.
• 링크: Enter the link address of the webpage you want the visitor to go to.
• 아이콘 추가: Show an icon with the button text.
  • 상: Choose an icon from the library or upload your own one. 
  • 위치: Place the icon before or after the text.
• 아이콘 간격: Use the slider to define the gap between the button text and the icon.
• Class & ID: Add a specific Class & ID in these boxes to target the custom CSS from the Stylesheet.

Step 6: Configure Element Ordering #

Custom Ordering: #

• Enable Ordering: Activate this toggle button to set the ordering of items. Drag an item up or down to place it in your preferred position.

Step 7: Style Content Area #

Now, we’ll focus on styling the text content of the pricing tale. You need to enter the “스타일 탭".

Pricing Body: #

• 조정: Set the horizontal position of the pricing table to left, center, or right.

Up next, there will be Table Title and Subtitle options. Both settings have similar settings.

Table Title: #

• 조정: Align the table title to left, center, or right.
• 타이포그래피: Open this setting area to get all the typography customization for the table title.

The following options are applicable for both normal and hover options.

• 색상: Use the color picker to choose a color for the title.
• 국경: Get all the border customizations like color, style, and thickness.
• 테두리 반경: Define the roundness of the border roundness.

• 심: Add spaces around the title.
• 여유: Define the distance of the title with other elements.

Step 8: Customize Pricing Info #

Price Tag: #

• Position Right: Adjust the left/ right position of the price tag background.
• 너비: Use the slider to extend or shrink the background width. 
• 심: Add inner space to the pricing tag.
• 여유: Adjust the distance of the pricing tag with other elements.
• 타이포그래피: Open this setting to style the typography of the price tag.

지속:

• 텍스트 색상: Choose a color for the duration text for the normal state.
• Text Hover: Set the text color on hover as in the previous option.
• Typography: Get all the typography options for the duration text.
• 수직 위치: Define the vertical position of the duration text within the pricing tag. (Top, Middle, Bottom)

통화 기호:

• 타이포그래피: Style the currency text.
• 위치: Place the currency symbol before or after the pricing number.
• 수직 위치: Set the vertical positioning of the currency symbol.

• 색상: Select a color for displaying your currency.
• 배경 유형: 단색과 그라데이션 사이에 배경 유형을 추가합니다.
• 국경: Set the thickness, color, and style of the border.
• 테두리 반경: Enter a value to measure the roundness of the border.
• 박스 섀도우: Beautify this portion with a box shadow animation effect.

Step 9: Customize Package Details #

특징 #

• 조정: Align the feature paragraph text or list to left, center, or right.
• 타이포그래피: Change the feature text style, font family, weight, transform, spacing, etc.

The following styling features can apply to both normal and hover options.

• 색상: Pick a color for the feature text.
• 국경: Customize the border style, color, and thickness.
• 국경 반경: 테두리의 둥근 정도를 조정합니다.
• List Gap: This option only appears when you select the list option in the features setting in the content tab. Use this slider to define the gap between all the list items.

• 여유: Add spaces surrounding the feature text area.
• 심: Expand the space around the feature text area by entering a value in this box.

상:

• Icon Size: Use this slider to measure the icon size of the list.
• Spacing: Define the gap between the icon and the text of the list.

Step 10: Customize Pricing Table Button #

단추: #

• 조정: Place the button to the left, center, or right.
• 타이포그래피: Get various styling options for button text.
• 색상: Give a color to the button text.
• 배경 유형: Choose a classic or gradient background type.
• 박스 섀도우: Give a shadow effect to your border.
• 국경: Define the border thickness, style, and color.
• 테두리 반경: 테두리의 둥근 정도를 조정합니다.
• 심: Increase space inside the button border.

Step 11: Configure Advanced Settings #

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

공들여 나열한 것: #

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

위치: #

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

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

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

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

배경: #

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

호버 옵션에서:

• 영상: 이미지 옵션을 선택하면 다음 옵션이 열립니다.
  • 영상: 미디어 라이브러리에서 이미지를 선택하거나 자신의 이미지를 업로드하세요.
  • 이미지 크기e: 썸네일, 중간, 크게 또는 전체 중에서 이미지 크기를 선택합니다.

• 위치: 10가지 옵션의 위치를 선택합니다.
• 부착: 나머지 브라우저 화면과의 고정 또는 스크롤 배경 이미지 관계를 지정합니다.
• 반복하다: 옵션을 선택하여 배경 이미지가 반복되는 방식을 설정합니다.
• 디스플레이 크기: 네 가지 옵션 중에서 디스플레이 크기를 선택합니다.

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

국경: #

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

호버 옵션에서:

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

시계: #

가시성 모듈을 사용하면 장치 유형에 따라 블록 디자인 표시를 제어할 수 있습니다. 토글 버튼이 있는 세 가지 장치 옵션(데스크톱, 태블릿, 모바일)이 있습니다. 해당 장치의 블록 디자인을 숨기려면 토글 버튼을 켜십시오.

그러나 편집기 보기에서는 계속 볼 수 있습니다.

고급의: #

• 블록 이름: 블록 스타일을 지정하기 위해 링크하거나 스크립팅하는 동안 이 블록을 고유하게 식별할 수 있도록 이름을 지정합니다.
• HTML 앵커: 웹사이트 페이지를 링크하기 위한 URL을 추가합니다.

• 추가 CSS 클래스: 추가 CSS 클래스를 블록에 할당하면 사용자 정의 CSS를 사용하여 원하는 대로 블록 스타일을 지정할 수 있습니다. 

주의: 공백을 사용하여 여러 클래스를 별도로 추가할 수 있습니다.

That’s it! Now, it’s your turn. Create an amazing pricing table from the block editor on your WordPress website.