トグルメニュー

WordPress に価格表を追加する方法 (3 つの方法)

公開: 2023-01-06

ページ ビルダー テンプレートとデザイン アセットをクラウドに保存します。 Assistant.Proを始めましょう

How to add a pricing table in WordPress.
  • ビーバービルダー

WordPress に価格表を追加する方法 (3 つの方法)

価格表は、訪問者が支払いオプション間の主な違いをすばやく簡単に比較するのに役立つ便利な Web サイト要素です。 ただし、独自のサイトの WordPress 価格表を作成するには、手作業でコーディングするか、専用のプラグインを使用する必要があります。

幸いなことに、Beaver Builder を使用すると、事前に設計されたテンプレート、事前に作成された価格表の行、または価格表モジュールを使用して、WordPress に価格表を簡単に追加できます。

この投稿では、価格表をサイトに追加することを検討する理由について説明します。 次に、Beaver Builder を使用して WordPress でこれを行う方法を示します。 始めましょう!

目次:

  • Web サイトに価格表を追加することを検討すべき理由
  • WordPress に価格表を追加する方法 (3 つの方法)
    1. Beaver Builder の価格設定テンプレートを追加する
    2. 事前に作成された価格表の行を選択する
    3. 価格表モジュールのカスタマイズ
  • 結論
  • 関連する質問

Web サイトに価格表を追加することを検討すべき理由

e コマース Web サイトを設計するときは、コンバージョンを促進する機能について考えることが重要です。 価格表を作成すると、新規顧客がサービスの価格と機能を購入前に簡単に比較できるようになります。

たとえば、Beaver Builder の Web サイトには、さまざまな支払い階層とパッケージを含む価格表が含まれています。 この表のおかげで、各サブスクリプションに含まれるものと、その費用が明確にわかります。 プランを選択したら、[ Get Started ] ボタンをクリックして購入できます。

ウェブサイトの料金表

価格表は、メンバーシップ サイトや月額ソフトウェア サービスなど、サブスクリプション層を持つすべての Web サイトで効果的です。

大量の情報や機能を紹介する必要がある場合は、価格表を使用すると、わかりやすい方法でそれらを整理できます。 これにより、ユーザーは自分のニーズに合ったプランを購入するように促すことができます。

価格表が有効かどうかを判断するには、製品またはサービスのバージョンが複数あるかどうかを検討してください。 もしそうなら、価格表は、さまざまなオプションの概要とそれらの違いを顧客に提供するのに役立つでしょう. 価格に関する混乱を取り除くことができれば、サイトでのコンバージョンを増やすことができます。

WordPress に価格表を追加する方法 (3 つの方法)

価格表が提供できる利点を認識したので、今度は Web サイト用に価格表を作成します。 このチュートリアルでは、Beaver Builder プラグインを使用します。 これにより、事前に設計されたテンプレート、事前に作成された行、および価格表モジュールにアクセスできます!

1. Beaver Builder の価格設定ページのテンプレートを追加する

価格表モジュールを使用して最初から価格表を作成することも (最後の方法である価格表モジュールのカスタマイズで説明します)、事前に設計されたページ テンプレートを追加することもできます。

Beaver Builder を使用すると、ワンクリックでこのレイアウトを新しいページに自動的に実装できます。 次に、特定の製品やサービスで簡単にカスタマイズできます。

まず、WordPress を開いて新しいページを追加します。 ページに名前を付けて、 Launch Beaver Builderをクリックします。

Beaver Builder を起動する

Beaver Builder エディターが開いたら、ポップアップ メニューの [テンプレート] タブをクリックします。 次に、[グループ] ドロップダウンから [コンテンツ ページ] を選択します。

コンテンツ ページ テンプレート

特定の料金ページ テンプレートを見つけるには、セクションの一番下までスクロールします。 ここでは、選択できる 2 つの異なるデザインが表示されます。

料金ページのテンプレート

気に入ったデザインが見つかったら、クリックしてください。 これにより、テンプレートがページに自動的に適用されます。 いずれの価格設定テンプレートにも、お客様の声やよくある質問とともに、価格設定モジュールが表示されます。

Beaver Builder の価格設定テンプレート

デフォルトのカラー パレットと背景画像が含まれていますが、これらのオプションは簡単にカスタマイズできます。 これを行うには、まず [行の設定] をクリックします。 次に、カスタム背景を色、ビデオ、またはスライドショーとして設定できます。

カスタム料金表の背景

デザインにトップ シェイプまたはボトム シェイプを追加することもできます。 これにより、価格表に魅力的な視覚要素をもたらすことができます。

価格設定テンプレートの形状

次に、メインの見出しのテキスト、フォント、および色を編集できます。 Find the perfect plan for you のような簡単な行動を促すフレーズを含めて、ユーザーに表を見るよう促すことができます。

料金表の見出し

それでは、価格表のカスタマイズを開始しましょう。 選択後、各商品のタイトルまたは価格のどちらを強調するかを選択できます。 必要に応じて、境界線のスタイル、サイズ、および間隔を編集することもできます。

価格のタイトルを強調表示する

価格オプションを編集するには、[価格ボックス] タブをクリックします。 ここで、各ボックスを変更したり、並べ替えたり、新しいボックスを追加したりできます。

価格ボックスの編集

ご覧のとおり、Beaver Builder テンプレートを使用する利点は、わずか数ステップで価格設定ページを完全に設計できることです。

上記のように、私たちが使用しているページ テンプレートには、お客様の声と FAQ モジュールも含まれています。 これらを削除するか、価格表を保存した後、ページを下にスクロールしてこれらのセクションをカスタマイズし、製品やサービスに関する詳細情報を含めることができます。

お客様の声を編集する

価格設定ページの外観に満足したら、必ず変更を保存して公開してください。

2. 事前に作成された価格表の行を選択する

または、事前に設計された価格表オプションにもう少し多様性が必要な場合があります。 この場合、Beaver Builder の事前構築済みの行を参照できます。 開始するには、[行] > [事前構築済みの行] > [価格表] に移動するだけです。

Beaver Builder の事前構築済みの行

次に、8 つの異なる価格表のデザインから選択できます。 気に入ったものが見つかったら、ページにドラッグ アンド ドロップします。

価格表の行

テンプレートを使用する場合と同様に、見出しを編集して商品に関する情報を含める必要があります。 フォントの種類、太さ、サイズ、間隔などをカスタマイズできます。

行見出しの編集

これで、価格ボックスの編集を開始できます。 それぞれに、カスタムのタイトルと価格を追加できます。 毎月または毎年の支払い期間を選択することもできます。

プライスボックスの設定

次に、[機能]セクションまで下にスクロールします。 ここで、現在のオプションを編集し、必要に応じて新しいオプションを追加できます。 顧客が価格表を確実に理解できるように、各層を区別する主な機能のみを含めることをお勧めします。

価格表の機能

さらに、任意のテキスト ボックスに HTML マークアップを追加できることに注意してください。 たとえば、各機能の横に緑色のチェックマークを付けたい場合は、テキストの代わりに次のコードを貼り付けることができます。

 <i class="fa fa-check"></i> <strong> 1 Year Support

その HTML コードがフロントエンドでどのように見えるかを次に示します。

HTML マークアップ

[ボタン] タブで、新しい行動を促すフレーズを追加できます。 さらに、ユーザーがそのプランを購入できるようにする場合は、チェックアウト ページへのリンクを貼り付けるだけです。

価格アクションボタン

選択した事前構築済みの行に基づいて、デフォルトの配色が表示されますが、ブランドに合わせてこれを調整できます。 [スタイル]で、ボックスの境界線と前景色を編集します。 ボックスとテキストにアクセント カラーを追加することもできます。

価格ボックスの色

行のカスタマイズが完了したら、変更を保存します。

3.価格表モジュールをカスタマイズする

別のオプションとして、カスタムの価格表をゼロから作成することもできます。 これにより、各ボックスのデザインと機能を完全に制御できます。 これは、既存のページに価格表を追加する場合にも適しています (テンプレートで見た顧客の声や FAQ セクションは含めません)。

Beaver Builder を使用すると、価格表モジュールを任意の投稿またはページに追加して、最初からカスタマイズできます。 まず、[モジュール] タブを開き、[価格表] オプションを見つけます。 次に、どこにでもドラッグ アンド ドロップできます。

Beaver Builder 価格表モジュール

テンプレートや事前に作成された行とは異なり、価格設定ボックスを自分で追加する必要があります. 価格ボックスを追加をクリックするだけで、必要な回数だけクリックできます。

Beaver Builder 価格表モジュールは価格ボックスを作成します

次に、[価格ボックスの編集]を選択します。 一般設定で、ボックスにタイトルを付け、価格と支払い期間を追加します。 リボンを表示するかどうかも選択できます。 この例では、最も人気のある価格設定オプションの右上にリボンが表示されています。

Beaver Builder 価格表モジュールは、価格ボックスの一般設定を追加します

固定価格の代わりに、割引を表示することもできます。 これにより、顧客は商品をより迅速に購入するようになる可能性があります。 これを行うには、次の HTML マークアップをPrice値に追加します。

 <s>$99</s> <span;>$79</span>

これで、[機能]セクションまで下にスクロールできます。 ここで、価格レベルごとに特定の詳細を追加します。 ドリルダウン矢印をクリックすると、機能アイコン機能アイコンの色ツールチップなどのその他のオプションが表示されます。

Beaver Builder 価格表 モジュール価格の特徴

右上隅にある [コピー] アイコンをクリックしてPrice Features 1を複製すると、新しい機能ごとに設定を再作成する必要がなくなります。

この価格設定ボックスの機能の追加が完了したら、[ボタン] タブに移動する準備が整いました。 ここで、製品へのリンクを含むカスタムの行動を促すフレーズを追加できます。 ボタン アイコンを含めて、ブランド カラーでさらにカスタマイズすることも検討してください。

Beaver Builder 価格設定ボックスのボタン設定

最後に、[スタイル] タブをクリックします。 これにより、各ボックスの配色を設定できます。

Beaver Builder の価格設定ボックスのスタイル設定

価格表のボックスごとにこのプロセスを繰り返します。 その後、引き続きテーブル全体の設定を編集できます。

[価格設定ボックス] タブから、[一般] セクションまで下にスクロールし、[はい] を選択して二重請求を有効にします。 これにより、月次と年次などの 2 つの請求オプションを切り替えるスイッチが追加されます。

Beaver Builder 価格表モジュールにより二重請求が可能

次に、[スタイル] タブをクリックします。 ここでは、価格表モジュールの全体的なスタイルを調整できます。 たとえば、各ボックスに奇数のフィーチャがある場合は、[列の高さ] を [均等化] に設定できます。 これにより、ボックスが最大の列と同じ高さになるように正規化されます。

Beaver Builder 価格表モジュール セットの列の高さ

他の Beaver Builder モジュールと同様に、高度な設定もあります。 これらを使用して、必要に応じてカスタム マージン、アニメーション、HTML 要素、および可視性を設定できます。

[保存]をクリックして、変更内容を価格表モジュールに保存します。 これで、[行の設定] をクリックできます。 ここでは、価格表モジュール全体の幅と高さを調整できます。 テキストとリンクの色を変更することもできます。

Beaver Builder の価格設定行の設定

次に、単色、グラデーション、写真、ビデオ、埋め込みコード、スライドショー、または視差を使用して背景をカスタマイズできます。 背景にオーバーレイの色や形状を追加することもできます。 この例では、価格表が中心になるようにシンプルにします。

Beaver Builder の価格設定行の背景

この後、あなたのウェブサイト用に適切に設計された価格表ができあがります!

結論

Web サイトで価格を適切に表示しないと、オンライン訪問者をコンバージョンに変えるのが難しくなる可能性があります。 価格表を使用すると、製品の主な機能と価格の違いを表示できます。 これにより、潜在的な顧客が各オプションを比較し、ニーズに適したものを購入していると確信するようになります.

復習として、Beaver Builder を使用して WordPress に価格表を追加する 3 つの方法を次に示します。

  1. 事前に設計された価格ページ テンプレートを追加します。
  2. 事前に作成された価格表の行を選択します。
  3. 価格表モジュールをカスタマイズします。

関連する質問

価格表にはどのような情報を含める必要がありますか?

原則として、価格表では、提供する主なサービスまたは製品を強調する必要があります。 各ボックス内で、顧客は価格、主な機能、行動を促すボタンを確認できる必要があります。 Web サイトの現在の割引を含めることもできます。

ウェブサイトでのコンバージョンを増やすには、他にどのような方法がありますか?

価格表は、訪問者に商品の購入を促す効果的な方法です。 ただし、ページの読み込みが速く、モバイル フレンドリーであることも確認する必要があります。 クライアントの Web サイトを最適化する場合は、A/B 分割テストを実行して、コンバージョン率の高い機能をターゲットにすることを検討してください。