DiviとACFを使用して、製品ページテンプレートの動的な製品利益グリッドを作成する

製品ページのデザイン方法は、訪問者の行動に即座に影響を与えます。 適切に設計およびカスタマイズされた製品ページの設計により、訪問者は製品を購入するかどうかを簡単に決定できます。 あなたがあなたの製品ページをより魅力的にする方法を探しているなら、あなたはこの投稿を気に入るはずです。 DiviとAdvancedCustom Fieldsプラグインを使用して、動的な製品特典グリッドをデザインに含める方法を説明します。 まず、メリットのフィールドグループを作成します。 次に、製品ページのカスタムフィールドに入力し、動的コンテンツを製品ページテンプレートに含めます。 商品ページのテンプレートも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

製品ページテンプレートを無料でダウンロード

無料の製品ページテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. ACFプラグインをインストールし、製品特典フィールドグループを追加します

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

製品のバックエンド内でさまざまな製品の利点を表示するために、無料のAdvanced CustomFieldsプラグインを使用します。 WordPressバックエンド>プラグイン>新規追加> ACFプラグインの検索>インストール>アクティブ化に移動します。

カスタムフィールドに移動し、新しいフィールドグループを追加します

ACFプラグインをインストールしてアクティブ化すると、カスタムフィールドに移動して、新しいフィールドグループを追加できるようになります。

フィールドグループ設定

新しいフィールドグループにタイトルを付けて、製品ページにのみ表示されるようにします。

• 「投稿タイプ」は「製品」と同じです

最初のフィールドを追加

続けて、最初の製品特典のタイトルに新しいフィールドを追加します。

• フィールドラベル：特典タイトル1
• フィールドタイプ：テキスト

残りのフィールドに対して手順を繰り返します

残りの製品の利点とその説明についても同じことを行います。 これらのフィールドはすべて、「テキスト」フィールドタイプを割り当てる必要があります。

• 特典タイトル1
• メリットの説明1
• 特典タイトル2
• メリットの説明2
• 特典タイトル3
• メリットの説明3
• 特典タイトル4
• メリットの説明4

2.製品に製品の利点を追加する

新製品を開くか追加する

フィールドグループとフィールドが作成されたら、個々のレベルで製品のメリットを製品に追加できます。 選択した製品を開くか、新しい製品を作成します。

製品のメリットフィールドに入力します

そして、製品のメリットを記入してください。

3.Diviテーマビルダー内で製品ページテンプレートを作成します

Diviテーマビルダーに移動し、新しいテンプレートを追加します

Diviを使い始める時が来ました！ 新しいテンプレートを作成するには、Diviテーマビルダーに移動し、[新しいテンプレートの追加]をクリックします。

すべての製品でテンプレートを使用する

このテンプレートはすべての製品で使用していますが、代わりに特定のカテゴリまたはタグを持つ製品を自由に選択してください。

テンプレートのボディテンプレートエディタを入力してください

次に、[カスタムボディの追加]をクリックし、[カスタムボディの作成]を選択して、テンプレートのボディを入力します。

セクション＃1を変更する

背景色

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を黒に変更します。

• 背景色：＃000000

間隔

セクションの[デザイン]タブに移動し、カスタムの上部と下部のパディングを追加します。

• トップパディング：10px
• ボトムパディング：10px

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定にいくつかの変更を加えます。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：90％
• 最大幅：100％

間隔

次に、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

Woo Cart NoticeModuleを列に追加

動的コンテンツ

この行とセクションで必要な唯一のモジュールは、ウーカート通知モジュールです。 動的コンテンツ領域で「この製品」が選択されていることを確認してください。

• 製品：この製品

背景色

次に、モジュールの設定を開き、完全に透明な背景色を使用します。

• 背景色：rgba（0,0,0,0）

テキスト設定

[デザイン]タブに移動し、次にテキスト設定でテキストフォントを変更します。

• テキストフォント：Karla

ボタンの設定

それに応じてボタンのスタイルを設定して、モジュール設定を完了します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：＃000000
• ボタンの背景色：＃ffd623
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px

• ボタンフォント：Oswald
• ボタンのフォントスタイル：大文字

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

セクション＃2を追加

グラデーションの背景

前のセクションのすぐ下に別の通常のセクションを追加し、セクション設定を開いて、レスポンシブグラデーションの背景を使用します。

• 色1：＃000000
• 色2：#ffffff
• 開始位置：
  • デスクトップ：30％
  • タブレット：57％
  • 電話番号：54％
• 終了位置：
  • デスクトップ：30％
  • タブレット：57％
  • 電話番号：54％

間隔

セクションの[デザイン]タブに移動し、上部にパディングを追加します。

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

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

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

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：95％
• 最大幅：2560px
• 行の配置：中央

間隔

行のデフォルトの上部パディングも削除します。

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

主な要素

また、列のコンテンツをデスクトップの中央に配置するために、行のメイン要素で2行のCSSコードを使用します。

デスクトップ：

display: flex;
align-items: center;

タブレットと電話：

display: block;

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

動的コンテンツ

1列目のWooImages Moduleから始めて、モジュールを追加します。動的コンテンツ領域で[この製品]が選択されていることを確認します。

• 製品：この製品

垂直モーションスクロール効果

[詳細設定]タブの水平方向のモーションスクロール効果を使用して、画像に微妙な動きを追加しています。

• 垂直モーションを有効にする：はい
• 開始オフセット：
  • デスクトップ：-4
  • タブレットと電話：0
• ミッドオフセット：0
• 終了オフセット：0
• モーションエフェクトトリガー：要素の中央

Wooタイトルモジュールを列2に追加

動的コンテンツ

2列目で、最初に必要なモジュールはWoo TitleModuleです。 動的コンテンツ領域で「この製品」が選択されていることを確認してください。

• 製品：この製品

タイトルテキスト設定

次に、[デザイン]タブに移動し、タイトルテキストのスタイルを次のように設定します。

• タイトルフォント：Oswald
• タイトルフォントスタイル：大文字
• タイトルテキストの色：＃ffd623
• タイトルテキストサイズ：80px

間隔

左右の余白を追加して、ウータイトルモジュールを完成させます。

• 左マージン：5％
• 右マージン：5％

Woo説明モジュールを列2に追加

動的コンテンツ

次のモジュールであるWooDescriptionModuleに進みます。 次の動的コンテンツを使用しています。

• 製品：この製品
• 説明タイプ：簡単な説明

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Karla
• テキストの色：#dbdbdb
• テキストサイズ：17px（デスクトップとタブレット）、15px（電話）
• テキスト行の高さ：1.9em

サイジング

次に、さまざまな画面サイズで幅を変更します。

• 幅：59％（デスクトップ）、82％（タブレットと電話）

間隔

間隔設定にいくつかのカスタムマージン値を追加して、ウー記述モジュールを完了します。

• トップマージン：50px
• 下マージン：100px
• 左マージン：5％
• 右マージン：5％

列2に宣伝文モジュールを追加する

動的コンテンツ

このチュートリアルの最初の部分で追加した製品の利点を表示するために、Blurbモジュールを使用します。 最初の宣伝文モジュールを追加し、タイトルと本文に最初の製品特典の動的コンテンツを使用します。

• タイトル：特典タイトル1
• 本文：メリットの説明1

画像をアップロード

次に、画像をアップロードするか、選択したアイコンを使用します。 このチュートリアル全体で使用したものは、このチュートリアルの最初にダウンロードできたダウンロードフォルダーにあります。

画像/アイコンの設定

モジュールの[デザイン]タブに移動し、次のように画像/アイコンの設定を変更します。

• 画像/アイコンの配置：上
• 画像/アイコンの配置：左

タイトルテキスト設定

次に、タイトルテキストの設定を変更します。

• タイトルフォント：Oswald
• タイトルフォントスタイル：大文字
• タイトルテキストサイズ：25px

本文の設定

本文の設定とともに。

• ボディフォント：Karla
• 本文のサイズ：17px（デスクトップとタブレット）、15px（電話）
• ボディラインの高さ：1.9em

サイジング

次に、サイズ設定に移動し、幅を変更します。 50％未満のメイン幅を使用することが重要です。これにより、次の手順で2つの宣伝文モジュールを並べて表示できるようになります。

• 画像幅：25％
• 幅：49％

間隔

また、さまざまな画面サイズでカスタムのパディング値を使用して、宣伝文句モジュールの周囲に空白を追加します。

• トップパディング：8％
• ボトムパディング：8％
• 左パディング：8％（デスクトップとタブレット）、2％（電話）
• 右パディング：8％（デスクトップとタブレット）2％（電話）

主な要素

ここで、2つの宣伝文モジュールが隣り合って表示されるようにするには、2つの重要な手順があります。 1つ目は、モジュールの幅が50％未満であることを確認することです（前の手順の1つで行ったように）。 2つ目は、インライン表示プロパティを使用することです。 このCSSプロパティを[詳細設定]タブのBlurbモジュールのメイン要素に追加します。

display: inline-block;

宣伝文句モジュールを3回クローンする

最初の宣伝文句モジュールを完了したら、それを3回複製できます。 宣伝文句がグリッドに表示されることに自動的に気付くでしょう。

宣伝文モジュールの画像を変更する

複製された各宣伝文モジュールの画像を変更します。 これらは、この投稿の冒頭でダウンロードできたダウンロードフォルダーにあります。

宣伝文モジュールの動的コンテンツを変更する

重複する各宣伝文モジュールの動的コンテンツも変更します。

• タイトル：特典タイトル（2、3、または4）
• 本文：メリットの説明（2、3、または4）

宣伝文句モジュールに個別に境界線を追加する

宣伝文モジュール1の境界設定

次に、グリッドデザインを完成させるために、個々のレベルで宣伝文句モジュールにいくつかの境界線を追加します。 最初の宣伝文句モジュールを開き、右の境界線を使用します。

• 右ボーダー幅：1px
• 右の境界線の色：＃ffd623

最初の宣伝文モジュールにも下の境界線を追加します。

• 下の境界線の幅：1px
• 下の境界線の色：＃000000

宣伝文モジュール2の境界設定

次に、2番目の宣伝文モジュールを開き、下の境界線を使用します。

• 下の境界線の幅：1px
• 下の境界線の色：＃000000

宣伝文モジュール3の境界設定

3番目の宣伝文モジュールに右の境界線を追加してグリッドデザインを完成させます。

• 右ボーダー幅：1px
• 右の境界線の色：＃ffd623

Woo Add to CartModuleを列2に追加

動的コンテンツ

設計に必要な最後のモジュールは、Woo Add toCartモジュールです。 動的コンテンツ領域で「この製品」が選択されていることを確認してください。

• 製品：この製品

フィールド設定

次に[デザイン]タブに移動し、フィールドの設定を変更します。

• フィールドの背景色：#ffffff
• フィールドテキストの色：＃000000

• フィールドの丸みを帯びたコーナー：0px（すべてのコーナー）
• フィールド下部境界線幅：1px
• フィールド下の境界線の色：＃000000

ボタンの設定

次に、それに応じてボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：＃000000
• ボタンの背景色：＃ffd623
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px

• ボタンフォント：Oswald
• ボタンのフォントスタイル：大文字

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

間隔

そして、カスタムマージン値を追加してモジュール設定を完了します。

• トップマージン：100px
• 左マージン：5％

3.テーマビルダーの変更を保存して結果をプレビューする

製品ページテンプレートのデザインが完了したら、テーマビルダーの変更をすべて保存して、製品の結果を表示できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、次のDivi製品ページテンプレートを使用してクリエイティブにする方法を紹介しました。 具体的には、動的な商品特典グリッドを含めて、商品ページにインセンティブを追加する方法を示しました。 このチュートリアルは、DiviをAdvanced CustomFieldsプラグインと組み合わせて使用​​して作成しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。