A pricing table is a well-structured representation of products and services along with their corresponding prices and features. It allows customers to compare different pricing plans and choose the one that suits them.
について デフォルトのWordPressテーブルブロック は多くの高度な機能を欠いている。総合的な価格表を作成することはできません。魅力的な価格表を作成するには、Tablebergのようなテーブルビルダープラグインが必要です。
無料版でもコンバージョン重視の価格テーブルを作成することができる。今回は、Tablebergプラグインを使ってWordPressで価格テーブルを作成する方法をご紹介します。
- Method 1: 価格表テンプレートの選択
- Method 2: ゼロから価格テーブルを作成する
美しいテーブルを作る
ブロックエディター付き
価格表テンプレートの選択
Tablebergプラグインには、以下のものが付属しています。 価格表テンプレート.これらのテンプレートのいずれかを選択することで、すぐに始めることができます。
ステップ1：Tablebergプラグインのインストールと有効化
こちらへ プラグイン > 新規プラグインの追加. Type テーブルバーグ in the search box. インストール そして アクティブ化 the plugin after it appears below.
ステップ2：Tablebergブロックを投稿やページに追加する
価格テーブルを作成したい投稿またはページを開きます。アイコンをクリックし、「Tableberg」を検索します。Tablebergブロックをクリックして挿入します。
ステップ3：既製テーブルを選ぶ
必要であれば、ゼロからテーブルを作ることもできる。それは後で紹介しよう。
まず、構築済みオプションを見てみよう。Tablebergブロックを挿入したら、'Pre-Built Tables'をクリックします。
パターン・ライブラリーがポップアップ表示されます。価格表」セクションを選択し、価格表テンプレートを選択します。
テーブルがエディターに挿入される。
ステップ4：テーブルのカスタマイズ
Tablebergのアイコンをクリックしてブロック全体を選択し、右上の設定アイコンをクリックします。そこから表をカスタマイズできる。
ゼロから価格テーブルを作成する
ゼロからテーブルを作成することもできる。
ステップ1：列と行の数を選択する
Tablebergブロックを挿入したら、行番号と列番号を設定する。ただし、必要に応じて、表を作成した後で行と列の数を増やしたり減らしたりすることができる。しかし今は、4*4の行と列を選択している。
As you add lots of content, you may need more space within the table cells. So, it’s better if you increase the table width. Select the entire table by clicking the TableBerg icon three times on the toolbar.
You’ll get the 設定タブ appearing on the right sidebar. Under the settings table, you’ll find the Table Width option. Increase its width as you need.
ステップ2：テーブルカラムにタイトルを追加する
Add suitable titles to the table columns. Suppose we’ll create a pricing table for a web hosting business. There are four pricing plans in the table. So, the column title will be Economy, Deluxe, Ultimate, そして Maximum.
You can customize the title text and its background color from the respective tab on the right sidebar. You can also increase the text typography and its size.
ステップ3：価格テーブルの列に価格と割引率を追加する
First, add the prices of the plans to their respective columns. We have made the price texts bold, a bit bigger, and colorized with blue.
The discount rate usually sits very close to the main price. Place your cursor on the pricing cell and create space below them, pressing the Enter button on your keyboard.
After that, type your desired discount rates in the respective columns.
We will now highlight the discount rate so it becomes more visible. Select the discount rate text area with your cursor. Click the More option on the toolbar. Choose the Highlight option.
Use a background highlighter to the discount rate text. We have applied the color code #fcdc4b in the background of the discount rate on the pricing table.
Apply the same process to each column in respective areas.
If there are any special notes for the plans, you must specify them within the pricing area. See, we’ve done it using the first bracket sign.
ステップ4：テーブルにCTAボタンを追加する
By adding CTA buttons, you cannot provoke users to buy your products. Select the cell to which you want to add the CTA button. Press the プラス（+）アイコン on the cell and select the CTA button.
We’re not covering this part in full detail. All you have to do here is write a compelling CTA copy for each button. Link buttons to the checkout page. Add background and text colors for the buttons.
ステップ5：価格テーブルに機能を追加する
Finally, you need to list all the features of your products and services based on their pricing plans. If there are any special words that you want to highlight, you can bold them.
ステップ6：価格テーブルのプレビュー
Before you publish the pricing table, it’s better if you see it in the preview mode to check if there is any mistake. If the table is totally clean, you can make it live.
結論
Thus, you can create informative pricing tables on your site that help customers make informed decisions. TableBerg is coming up with more new features by which you can create more advanced tables on your site.
If you love this post, comment below and let us know your feedback. Take a look at ワードプレスで比較表を作成する方法.
