ウェブサイトを通じて商品やサービスを販売したい場合、価格表の作成は必須です。しかし、顧客がページを離れることなく簡単に比較できる複数の料金プランを表示するには、テーブルにトグル機能を追加する必要があります。
トグル機能により、ユーザーは異なる料金オプションのセットをナビゲートまたは切り替えることができ、インタラクティブなインターフェイスを作成できます。例えば、ユーザーは月額プラン、年間プラン、ライフタイムプランを切り替えることができます。
In this blog post, we’ll show you a step-by-step guide on how to create a WordPress pricing table with a toggle using Tableberg. Let’s begin.
ステップ1：Tablebergのインストールとアクティベート
First, install and activate the テーブルバーグ plugin on your WordPress site. If you haven’t installed it yet, get the plugin これ.
Once installed and activated, you’re ready to start building your pricing table.
Note: Even though Tableberg has a 無料版, the toggle feature is only available in the pro version.
Step 2: Add the Toggle for Tableberg Block
Tableberg Pro comes with a powerful Tableberg用トグル block that allows you to organize tables in tabs effortlessly.
To add this block:
- Open the WordPress editor and click on the ＋ボタン to add a new block.
- Search for Tableberg用トグル and select it.
- The toggle block will be added to your editor.
Step 3: Create a Pricing Table in the First Tab
Inside the Tableberg用トグル block, you can create a table from the scratch or choose a pre-built table. For the sake of this tutorial, we are choosing a pre-built one.
- Inside the Tableberg用トグル block, you can
- をクリックする。 ＋ボタン inside the tab and search for the テーブルバーグ ブロックに入った。
- Define the number of rows and columns for your pricing table (e.g., 3×3 for three plans).
- The table layout will be generated instantly.
Step 4: Add/Edit Content to the Table
Now, it’s time to add or edit content to your pricing table.
# 列タイトルの追加
- Click on the first row and enter the pricing plan names (e.g., Basic, Standard, Premium).
- Align them centrally and increase their font size for better visibility.
# 料金プランの追加
- In the second row, enter the pricing for each plan.
- を使用する。 Highlight option to differentiate the pricing.
# 製品特長一覧
- Each column should include a list of features for the respective plan.
- Tableberg allows you to insert a リストブロック directly inside the table.
# CTAボタンの追加
- を使用する。 ボタンブロック inside Tableberg to create call-to-action buttons (e.g., “Buy Now” or “Get Started”).
- Customize the button text, color, and style.
Step 5: Add Another Pricing Table to a New Tab
をクリックしてください。 Tab 2 in the Toggle for Tableberg block to add a new table in another tab. Then repeat the same steps as above to create another pricing table for the new tab.
Once you complete these steps, your pricing table with toggle functionality will be ready. Preview your table to check that everything is working smoothly.
Step 6: Customize the Toggle for Tableberg Block
To make your pricing table more visually appealing and aligned with your brand, you can customize the Tableberg用トグル block:
Rename the Toggles: Click on each tab and change its label to match your pricing plans, such as Monthly, Yearly, or Lifetime.
Change Tab Alignment: From the block settings panel, choose to align the tabs to the left, center, or right based on your design preference.
Style the Tabs: From the Styles tab, customize the background color, text color, and border of the toggles to make them visually consistent with your site’s design.
These simple customizations can greatly enhance the user experience and ensure your pricing table blends seamlessly with your website’s overall look and feel.
結論
Creating pricing tables with a toggle feature is essential for a seamless user experience. With Tableberg Pro’s Toggle for Tableberg block, you can now build interactive pricing tables directly in WordPress without the need for extra plugins.
Give it a try and let us know your thoughts in the comments below!
