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 インデックス: スライダーを使用して、ブロックと他のブロックのスタック順序を指定します。

位置： #

ドロップダウンの下に、3 つのオプションが表示されます。 デフォルト, 絶対、 そして 修理済み. 

• 絶対: このオプションを選択すると、ブロックの絶対位置が指定され、要素がコンテナー内に収まるようになります。
• 修理済み: 固定位置オプションを選択すると、要素がビューポートまたは画面全体に収まります。

絶対オプションと固定オプションの両方に、以下のような同様の設定があります。

• 水平方向: 配置方向を左または右から選択します。
• オフセット: スライダーを使用するか、手動で値を入力して、ブロックの水平位置を調整します。
• 垂直方向: 配置方向を上または下から選択します。
• オフセット: スライダーを使用するか、手動で値を入力して、ブロックの垂直位置を調整します。 

背景： #

• 背景: 背景オプションを単色、グラデーション、または画像から選択します。

ホバーオプションの下:

• 画像： 画像オプションを選択すると、次のオプションが開きます。
  • 画像: メディア ライブラリから画像を選択するか、独自の画像をアップロードします。
  • 画像サイズe: サムネイル、中、大、フルの中から画像サイズを選択します。

• 位置: 10 種類のオプションから位置を選択します。
• アタッチメント: ブラウザ画面の残りの部分と固定またはスクロール背景画像の関係を指定します。
• 繰り返す: 背景画像の繰り返し方法を設定するオプションを選択します。
• ディスプレイサイズ: 4 つの異なるオプションから表示サイズを選択します。

• 移行期間: スライダーを使用して、背景の遷移を通常状態からホバー状態まで調整します。

国境： #

• 国境: この設定オプションでは、幅、スタイル、色などの境界線の設定オプションが表示されます。
• 境界半径: 値を入力して境界線の丸みを設定します。
• ボックスシャドウ: 色、水平/垂直、ぼかし、広がりなどのすべての設定を取得して、境界に影の効果を与えます。 

ホバーオプションの下:

• 移行期間: 手動で値を追加するか、スライダーを使用して、ホバー状態の境界線のデザインを変更する時間を設定できます。

可視性: #

表示モジュールを使用すると、デバイスの種類に応じてブロック デザインの表示を制御できます。トグル ボタン付きの 3 つのデバイス オプション (デスクトップ、タブレット、モバイル) があります。トグル ボタンをオンにすると、そのデバイスのブロック デザインが非表示になります。

ただし、エディター ビューでは引き続き表示されます。

高度な： #

• ブロック名: ブロックにリンクしたり、スクリプトを実行してスタイルを設定するときに、このブロックを一意に識別するための名前を付けます。
• 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.