ライフタイムメンバーおよびブラックフライデーの新規顧客として提供している限定のランディングページの1つは、見事なソフトウェアセールのランディングページです。 このランディングページは、そのユニークなセクション仕切りと高品質のモックアップであなたを驚かせるでしょう。 この記事では、Diviの動的コンテンツ機能を使用して動的価格表を追加する方法を紹介します。

現在生涯のお客様である場合、またはブラックフライデーセール中に新しいアカウントを購入またはアップグレードした場合は、このレイアウトを今すぐダウンロードできます。

独占的なブラックフライデーソフトウェアセールのランディングページを入手する

このユースケースに入る前に、新しいエレガントテーマメンバーになるか、既存のアカウントをアップグレードするか、すでに私たちの生涯メンバーになることで入手できる、独占的なブラックフライデーソフトウェアセールランディングページに手を置く必要があります。 あなたが本当にすでに生涯会員であるならば、あなたは私たちの会員エリアにログインして、ここで私たちの排他的なランディングページのすべてをダウンロードすることができます。 他のすべての人は、チュートリアルの残りの部分を実行する前に、下のボタンを使用して購入またはアップグレードする必要があります。

それが消える前に取引を主張してください！

Diviで動的価格表を作成する方法の使用

この投稿の残りの部分では、ブラックフライデーの取引を利用したか、すでに生涯メンバーであり、ブラックフライデーのソフトウェア販売ランディングページにアクセスできることを前提としています。

メンバーエリアから新しいソフトウェアセールランディングページをダウンロードしたら、以下のビデオを見て、セットアップがいかに簡単かを確認できます。 また、このチュートリアルに従って、サイトをさらにカスタマイズできるようにすることをお勧めします。

このユースケースの投稿では、Diviと無料のAdvanced CustomFieldsプラグインを使用して動的価格表を作成する方法を紹介します。 サブスクリプション価格を頻繁に変更するクライアントがいて、Diviにアクセスせずに自分で変更できるようにしたい場合は、動的価格表を作成すると便利です。 これにより、特定のパッケージの価格、説明、メンバーシップレベルを変更しながら、ページ自体を台無しにしないようにすることができます。

プレビュー

それに飛び込む前に、最終結果を簡単に見てみましょう。

始めましょう！

Advanced CustomFieldsプラグインをインストールする

最初に行う必要があるのは、[プラグイン]> [新規追加]> [プラグインの検索とインストール]に移動して、WordPressWebサイトにAdvancedCustomFieldsプラグインをインストールすることです。

新しいフィールドグループを作成する

プラグインをアクティブ化したら、開始できます。 新しいフィールドグループを追加します。

名前+場所

新しいフィールドグループに名前を付けます。 チュートリアルのこの部分の終わりまでに、3つのフィールドグループ（価格設定テーブルの数に等しい）があることに注意してください。正しく名前を付けてください。 このフィールドグループの場所の設定も変更します。

メンバーシップレベルフィールドを追加

フィールドの追加を開始する時が来ました！ 全部で3つ必要です。 次の設定を使用して、メンバーシップレベルフィールドを追加します。

• フィールドラベル：メンバーシップレベル1
• フィールド名：membership_level_1
• フィールドタイプ：選択
• 選択肢：選択したコンテンツを追加します

メンバーシップの説明フィールドを追加

メンバーシップの説明フィールドを追加して続行します。

• フィールドラベル：メンバーシップの説明1
• フィールド名：membership_description_1
• フィールドタイプ：テキスト

価格フィールドを追加

必要な最後のフィールドは価格フィールドです。

• フィールドラベル：価格1
• フィールド名：price_1
• フィールドタイプ：テキスト

フィールドグループを2回複製し、名前とフィールドを価格表番号に調整します

1つのフィールドグループは、ページの1つの価格表に相当します。 最初の1つが終了したので、先に進んで2回クローンを作成し、ページの価格表の数と一致する十分なフィールドグループがあることを確認します。

グループ内のすべてのフィールドの数を変更する

作成した各動的フィールドは、ビジュアルビルダーに表示されます。 リンク先の情報を確実に把握するには、複製されたフィールドグループとそのフィールドに異なる番号を付けます。

Diviのソフトウェア販売ランディングページを使用して新しいページを作成する

このチュートリアルの次のパートでは、動的価格表をソフトウェア販売ランディングページに追加します。 このレイアウトを使用して新しいページを作成します。

ページに動的コンテンツを追加する

このページのバックエンドに戻り、各価格表に動的コンテンツを追加します。

ページの価格表の下に新しい行を追加

カラム構造

Visual Builderを有効にして、ここに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

次に、間隔の設定に移動し、カスタムマージンを追加します。

• トップマージン：100px
• 下マージン：100px

CTAモジュールを列1に追加

タイトルフィールドをメンバーシップレベル1の動的コンテンツに接続する

列1で必要となる最初のモジュールは、行動を促すモジュールです。 タイトルフィールドを、このチュートリアルの前の部分で作成したメンバーシップレベル1フィールドにリンクします。

コンテンツボックスをメンバーシップの説明に接続する1動的コンテンツ

同様に、コンテンツボックスをメンバーシップの説明1に接続します。

背景色

次に、背景設定に移動し、CTAモジュールの背景色を変更します。

• 背景色：#ffffff

背景画像

微妙な背景画像も追加します。 ソフトウェアセールランディングページをアップロードすると、メディアライブラリで次の背景画像を見つけることができます。

• 背景画像：software-sale-13.png

テキスト設定

テキスト設定に移動し、モジュールのテキストの向きを変更して続行します。

• テキストの向き：左

タイトルテキスト設定

ランディングページのデザインスタイルに合わせるために、タイトルテキストの設定にもいくつか変更を加えます。

• タイトルフォント：ルービック
• タイトルフォントの太さ：軽い
• タイトルテキストの色：＃4258ff
• タイトルテキストサイズ：40px
• タイトルラインの高さ：1.3em

本文の設定

本文の設定も同様です。

• ボディフォント：ルービック
• ボディフォントの太さ：中
• 本文の色：rgba（0,0,0,0.34）
• 本文サイズ：15px
• ボディラインの高さ：1.8em

間隔

次に、上部のパディングを追加します。

• トップパディング：60px

国境

そして、モジュールの上部の隅のそれぞれに「8px」を追加します。

ボックスシャドウ

最後になりましたが、ページに奥行きを持たせるために微妙なボックスシャドウを追加します。

• ボックスシャドウの垂直位置：50px
• ボックスシャドウブラー強度：100px
• 影の色：rgba（66,88,255,0.2）

列1にテキストモジュールを追加

コンテンツボックスを価格1の動的コンテンツに接続する

先に進み、列1のCall toActionモジュールのすぐ下にテキストモジュールを追加します。このモジュールのコンテンツボックスをPrice1動的コンテンツにリンクします。

背景色

このモジュールの背景色を変更して続行します。

• 背景色：#ffffff

テキスト設定

テキスト設定も変更します。

• テキストフォント：ルービック
• テキストフォントの太さ：軽い
• テキストの色：＃4258ff
• テキストサイズ：70px
• テキスト行の高さ：1em

間隔

次に、いくつかのカスタムパディング値を追加します。

• ボトムパディング：60px
• 左パディング：40px

国境

境界線の設定に移動し、両方の下隅に「8px」を追加して続行します。

ボックスシャドウ

最後になりましたが、このテキストモジュールにもボックスシャドウを付けてください。

• ボックスシャドウの垂直位置：80px
• ボックスシャドウブラー強度：100px
• 影の色：rgba（66,88,255,0.2）

ボタンモジュールを列1にドラッグします

最初の列で必要になる最後のモジュールはボタンモジュールです。 前の行にあるボタンモジュールの1つを複製し、列1に配置します。

間隔を変更する

ボタンモジュールの設定を開き、カスタムマージンを追加します。

• トップマージン：30px
• ボトムマージン：50px

列1のすべてのモジュールのクローンを作成し、残りの列に配置します

時間を節約するために、列1の3つのモジュールすべてを2回複製し、行の残りの列に複製を配置します。

列2のモジュールを変更する

CTAモジュール

タイトルフィールドをメンバーシップレベル2の動的コンテンツに接続する

2番目の列のCTAモジュールから始めて、重複を変更する必要があります。 タイトルフィールドをメンバーシップレベル2の動的コンテンツに接続します。

コンテンツボックスをメンバーシップの説明に接続する2動的コンテンツ

コンテンツボックスについても同じことを行います。

グラデーションの背景を追加

次に、グラデーションの背景をモジュールに追加します。

• カラー1：＃6959ff
• 色2：＃c1bfff
• グラデーション方向：15度
• 開始位置：22％
• 終了位置：95％

タイトルのテキストの色を変更する

タイトルテキストの色も変更します。

• タイトルテキストの色：#ffffff

本文の色を変更する

本文の色も同様です。

• 本文の色：#ffffff

間隔を変更する

この特定の価格表にスポットライトを当てるために、間隔の値も試してみます。

• 上マージン：-50px（デスクトップ）、0px（タブレットと電話）
• トップパディング：100px

テキストモジュール

コンテンツボックスを価格2の動的コンテンツに接続する

列2のテキストモジュールを開いて続行し、コンテンツボックスを価格2の動的コンテンツにリンクします。

背景色を変更する

次に、このモジュールの背景色を変更します。

• 背景色：＃6959ff

テキストの色を変更する

そして、テキストの色を白に変更します。

• テキストの色：#ffffff

間隔を変更する

大事なことを言い忘れましたが、間隔設定でカスタムパディング値を変更します。

• ボトムパディング：120px
• 左パディング：40px

列3のモジュールを変更する

CTAモジュール

タイトルフィールドをメンバーシップレベル3の動的コンテンツに接続する

3列目のモジュールも変更する必要があります。 タイトルフィールドをメンバーシップレベル3の動的コンテンツにリンクします。

コンテンツボックスをメンバーシップの説明に接続する3動的コンテンツ

コンテンツボックスについても同じことが言えます。

グラデーションの背景を追加

次に、グラデーションの背景をモジュールに追加します。

• 色1：＃c87cff
• 色2：＃ffbcf8
• グラデーション方向：18度
• 開始位置：22％
• 終了位置：95％

タイトルのテキストの色を変更する

タイトルテキストの色を白に変更します。

• タイトルテキストの色：#ffffff

本文の色を変更する

本文の色についても同じようにします。

• 本文の色：#ffffff

テキストモジュール

コンテンツボックスを価格3の動的コンテンツに接続する

続けて、列3のテキストモジュールを開き、ここでも動的コンテンツを変更します。

背景色を変更する

次に、別の背景色を追加します。

• 背景色：＃c87cff

テキストの色を変更する

最後になりましたが、テキストの色を白に変更すれば完了です。 これで、ページに3つの完全に動的な価格表ができました。

• テキストの色：#ffffff

最終的な考え

このユースケースは、ブラックフライデーの顧客および生涯メンバーと6つの無料限定版ランディングページを共有するブラックフライデーディールの一部です。 これらの日に私たちの権限を与えられたコミュニティに参加し、メンバーになることによって、あなたは得るでしょう：

• すべてが25％オフ
• 6つのランディングページすべてを無料で
• 私たちの素晴らしいテーマとプラグインへのアクセス
• ボーナス賞

チャンスをつかんで、今日メンバーになりましょう！