トグルを使ったWordPress価格表の作り方

ウェブサイトを通じて商品やサービスを販売したい場合、価格表の作成は必須です。しかし、顧客がページを離れることなく簡単に比較できる複数の料金プランを表示するには、テーブルにトグル機能を追加する必要があります。

トグル機能により、ユーザーは異なる料金オプションのセットをナビゲートまたは切り替えることができ、インタラクティブなインターフェイスを作成できます。例えば、ユーザーは月額プラン、年間プラン、ライフタイムプランを切り替えることができます。

このブログでは、トグル付きのWordPressテーブルの作り方をステップ・バイ・ステップでご紹介します。それでは始めましょう。

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

トグルを使ったWordPress価格表の作り方

チュートリアルに入る前に、以下のものが必要です。 テーブルバーグ そして アルティメット・ブロック プラグインをインストールしてください。TableBergを使えば、価格テーブルを作成することができ、Ultimate Blocksを使えば、テーブルにトグル機能を追加することができます。

あなたのサイトにプラグインをインストールしたら、チュートリアルのプロセスに飛び込んでください。

ステップ01: タブ付きコンテンツブロックを追加する

Ultimate Blocksプラグインがインストールされ、有効化されると、次のような画面が表示されます。 タブ付きコンテンツ をブロックライブラリに追加します。ブロックを見つけてエディターに追加します。

タブ付きコンテンツ・ブロックを追加する

タブコンテンツ・ブロックは即座にエディターに追加されます。

エディターにタブブロックが追加

ステップ02: タブ・コンテンツ・ブロックの中にTableBergブロックを追加する

タブ付きコンテンツ・ブロックでは、その中に他のブロックを追加することができます。をクリックしてください。 プラス(+)ボタン.TableBergブロックを見つけて追加する。

ステップ03:最初のタブに価格テーブルを作成する

表の行数と列数を定義する。ここでは3列の表を作成したいので、3*3を選択しています。

テーブルの行と列を定義する

テーブルレイアウトの準備が整ったのがわかるだろう。

テーブルレイアウトの準備完了

ステップ04:テーブルにコンテンツを追加する

TableBergブロックでは、様々なタイプのコンテンツをセルに追加することができます。テキスト、リスト、画像、CTAボタンなどを追加できます。

# 列タイトルの追加

まず、テーブルのカラムにタイトルを追加する必要があります。ここでは架空のプラグインの価格表を作成する。そのため、コンテンツはそれに応じたものになります。

タイトルを3つ追加し、中央に配置し、サイズを大きくしているのがわかるだろう。

# 料金プランの追加

次に、カラムに料金プランを追加します。GutenbergツールバーのHighlightオプションを使って色を付けました。

料金プランの追加

# 製品特長一覧

それでは、各プランの特徴を挙げていきましょう。TableBergでは リストブロック をテーブルに追加する。Listブロックを見つけてテーブルに追加する。

各プランの特徴をすべての欄に列挙したのがおわかりいただけるだろう。

製品の特徴を表示する

# CTAボタンの追加

最後に、CTAボタンをカラムに追加します。 ボタンブロック.

CTAボタンを追加する

CTAボタンは価格表の上に準備されています。

価格表のCTAボタン

これでテーブルの準備は整った。このテーブルをさらにカスタマイズして、好きなようにスタイリングすることができる。一人でできることを祈っている。

ステップ05:別のタブに新しいテーブルを作成する

をクリックして新しいタブを作成します。 プラス(+)アイコン.タブの名前をあなたの好みに変更することをお忘れなく。

タブコンテンツブロックで新しいタブを作成する

上で説明したのと同じ方法で、このタブに新しいテーブルを作成する。より見やすくするために、タブのタイトルを中央揃えにしました。

新しいタブに新しいテーブルを作成する

これでトグル機能付き価格テーブルの準備は完了です。新しいタブでテーブルをプレビューし、すべてが問題なく動作していることを確認してください。

結論

トグル機能を使って価格テーブルを作成することは、今やほとんどすべてのスタンダードクラスのウェブサイトが採用しているスマートさである。ほとんどのウェブサイトは、ページビルダーや同様のタイプのソリューションを使用して作成しており、ページが重くなることがよくあります。

ただし、TableBergとUltimate Blocksはブロックベースのプラグインなので、価格設定ページが重くなることはありません。ステージングサイトやローカルホストでテストすることもできます。軽くて速いスピードが楽しめます。

下のコメント欄にご意見をお聞かせください。また、ご質問があれば遠慮なくお尋ねください。



テーブルバーグ・チーム

早割キャンペーン実施中
これは通知バーのデフォルトテキストです。