WordPressでリボン付き価格テーブルを追加する方法

WordPressでリボン付き価格テーブルを追加する方法

価格表の見せ方は、顧客に影響を与える上で重要です。価格表を強化する強力な方法のひとつが、リボンを取り入れることです。リボンとは、視覚的に印象的なラベルのバナーで、テーブルを斜めに横切って表示され、特定のオファーや割引、機能を強調します。

期間限定割引、特別企画、売れ筋パッケージなど、どのようなプロモーションであっても、リボンをうまく配置することで、潜在顧客に即座に決断を促すことができる。 テーブルバーグ は直感的で強力なプラグインだ。

この記事では、Tablebergを使ってWordPressにリボン付きの価格テーブルを追加する方法をご紹介します。

美しいテーブルを作る
ブロックエディター付き

あなたのサイトにプラグインをインストールしたら、次のチュートリアルに入りましょう。

Step 1: Add the Tableberg Block to the Editor

プラグインは テーブルバーグ をGutenbergブロックライブラリに追加します。エディタにブロックを追加するには プラス(+)アイコン.

GutenbergエディタにTableBergブロックを追加する

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

行と列の数を設定する

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

エディターに列と行が追加される

Step 2: Add Content to the Table

価格表には通常、商品名、画像、価格、割引価格、CTAボタンが含まれます。それでは、それらをテーブルに追加する方法を見てみましょう。

製品名を追加する

Tablebergでは、Gutenbergブロックエディタのように、様々なタイプのブロックをセルに追加することができます。ブロックを追加する 段落ブロック を使用して商品名を記述します。(デフォルトでは、段落ブロックは表のセルに追加されます)。

価格表に段落ブロックを追加する

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

商品名を書いてカスタマイズする

商品画像を追加する

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

価格テーブルに画像ブロックを追加する

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

商品画像のアップロード

以前の価格を追加する

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

前の価格を書く

前の価格に取り消し線の効果を加えることで、人々の注意を引くことができます。そのためには 価格を選択する カーソルを使って Click その More option ツールバーの

こちらへ その Highlight そして 取り消し線のオプション.価格の色を変更し、取り消し線を追加することができます。

価格に取り消し線効果を加える

商品の現在価格を追加する

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

商品の現在価格を追加する

CTAボタンを追加する

すべてのコンテンツの最後に ボタンブロック.

価格テーブルにボタンブロックを追加する

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

価格表の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でトグルスイッチを使って価格表を作成する方法.



テーブルバーグ・チーム