価格表の見せ方は、顧客に影響を与える上で重要です。価格表を強化する強力な方法のひとつが、リボンを取り入れることです。リボンとは、視覚的に印象的なラベルのバナーで、テーブルを斜めに横切って表示され、特定のオファーや割引、機能を強調します。
期間限定割引、特別企画、売れ筋パッケージなど、どのようなプロモーションであっても、リボンをうまく配置することで、潜在顧客に即座に決断を促すことができる。 テーブルバーグ は直感的で強力なプラグインだ。
この記事では、Tablebergを使ってWordPressにリボン付きの価格テーブルを追加する方法をご紹介します。
美しいテーブルを作る
ブロックエディター付き

あなたのサイトにプラグインをインストールしたら、次のチュートリアルに入りましょう。
Step 1: Add the Tableberg Block to the Editor
プラグインは テーブルバーグ をGutenbergブロックライブラリに追加します。エディタにブロックを追加するには プラス(+)アイコン.

テーブルに必要な列と行の数を設定します。このチュートリアルでは 3*1 列と行に対して。

価格テーブルの基本レイアウトが列と行で作成されているのがわかる。

Step 2: Add Content to the Table
価格表には通常、商品名、画像、価格、割引価格、CTAボタンが含まれます。それでは、それらをテーブルに追加する方法を見てみましょう。
製品名を追加する
Tablebergでは、Gutenbergブロックエディタのように、様々なタイプのブロックをセルに追加することができます。ブロックを追加する 段落ブロック を使用して商品名を記述します。(デフォルトでは、段落ブロックは表のセルに追加されます)。

セルに商品名を記入します。テキストを中央に揃え、太字にし、色を変え、下の画像に示すオプションを使用してサイズを変更します。

商品画像を追加する
画像ブロックを価格テーブルに追加します。

画像ブロックに商品画像をアップロードします。必要に応じて画像のサイズを変更し、適切な位置に配置してください。

以前の価格を追加する
以前の価格と現在の価格の差を表示することは、割引を強調する素晴らしい方法です。それでは、商品画像の下に以前の価格を追加してみましょう。

前の価格に取り消し線の効果を加えることで、人々の注意を引くことができます。そのためには 価格を選択する カーソルを使って Click その More option ツールバーの
こちらへ その Highlight そして 取り消し線のオプション.価格の色を変更し、取り消し線を追加することができます。

商品の現在価格を追加する
次に、商品の現在の価格を比較的大きなフォントで追加し、人々の目を引くようにする。

CTAボタンを追加する
すべてのコンテンツの最後に ボタンブロック.

ボタンの背景色、文字色、タイポグラフィーのサイズ、パディングを変更します。お好きなように変更してください。

Step 3: Add Spaces Between the Blocks
というわけで、カラムのコンテンツは準備できた。しかし、ご覧の通り、すべてのブロックが密集しすぎている。よりフレッシュな見た目にするために、ブロックとブロックの間に間隔を空ける必要がある。
そのためには 特定の列を選択する.次に スタイルタブ.に来てください。 ブロック間隔 タブをスクロールしてオプションを選択します。ボックスに値を追加してスペースを増やす。

同様に、他のカラムにもコンテンツを追加する。しかし、時間を節約するために、カラムを複製してからコンテンツを更新することもできます。以下は Tablebergの列と行を複製する方法.

Step 4: Add Radius to the Table Columns
テーブルの列に境界線の半径を追加することで、美観を向上させることができます。 選択 その タベルベルクのアイコン ツールバーの こちらへ その スタイルタブ.
スクロールと 来る セル間隔.それぞれのオプションをドラッグすることで、表の列間にスペースを追加することができます。

を見るだろう。 テーブル・ボーダー オプションのすぐ下にある。 セット ご希望の 半径の値 フォ内側と外側のボーダー。

こうして、価格表を作成することができる。
Step 5: Add a Ribbon to the Pricing Table
リボンを追加したい列を選択します。プラス(+)アイコンを押して Ribbon block.次に、クリックしてブロックを列に追加します。

リボンがテーブルに追加されます。次に 設定タブリボンタイプ、リボンテキスト、サイド、距離を選択します。
その後、テキストと背景色を スタイルタブ.

これで、リボンをかけた価格表ができあがりました。
クロージング・アップ
このチュートリアルを楽しんでいただけただろうか。しかし、いくつか覚えておかなければならないポイントがあります。テーブルがすっきりしていることを確認してください。ミニマルな価格表のデザインは、常に潜在顧客にインパクトを与えます。
第二に、ウェブ訪問者を瞬時に結びつけるような明確で簡潔なコピーを使うこと。可能であれば、テーブルの中に商品のメリット/特徴をいくつか加えること。価格表で複数のプランをカバーしたい場合は、トグルスイッチで表示するのがよい。
Here’s a guide on WordPressでトグルスイッチを使って価格表を作成する方法.