商品ページのデザインは、ユーザーの行動に直接影響します。 訪問者. 適切に設計され、パーソナライズされた製品ページのデザインにより、次のことが可能になります。 訪問者 彼らがあなたの製品を購入したいかどうかをより簡単に決定できるようにします。 製品ページをより魅力的にする方法を探しているなら、おそらくこのチュートリアルが気に入るでしょう。
Divi と Advanced Custom Fields プラグインを使用して、動的な製品メリット グリッドをデザインに組み込む方法を説明します。 まず、福利厚生用のフィールド グループを作成します。 次に、製品ページのカスタム フィールドに入力し、 コンテンツ 製品ページテンプレートで動的に。
可能な結果
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
1. ACFプラグインとProduct Benefit Field Groupプラグインをインストールします
Advanced Custom Fieldsプラグインをインストールする
製品のバックエンドでさまざまな製品の利点を表示するには、プラグインを使用します。 フリー 高度なカスタムフィールド。 にアクセスしてください WordPressバックエンド>プラグイン>新規追加> ACFプラグインの検索>インストール>アクティブ化 .
カスタムフィールドに移動し、フィールドの新しいグループを追加します
ACFプラグインをインストールしてアクティブ化すると、カスタムフィールドにアクセスして新しいフィールドグループを追加できるようになります。
フィールドグループの設定
新しいフィールドのグループにタイトルを付け、製品ページにのみ表示できるようにします。
- 「メッセージタイプ」は「製品」に等しい
最初のフィールドを追加
最初の製品特典のタイトルに新しいフィールドを追加して続行します。
- フィールドラベル：特典のタイトル1
- フィールドタイプ：テキスト
残りのフィールドに対してこの手順を繰り返します
製品の他の利点とその説明についても同じようにします。 これらすべてのフィールドには、「テキスト」フィールドタイプが割り当てられている必要があります。
- サービスのタイトル1
- メリットの説明1
- サービスのタイトル2
- メリットの説明2
- サービスのタイトル3
- メリットの説明3
- サービスのタイトル4
- メリットの説明4
2.製品にメリットを追加する
新しい製品を開くか追加します
フィールドグループとフィールドが作成されたら、個々のレベルで製品のメリットを製品に追加できます。 選択した製品を開くか、新しい製品を作成します。
製品の利点フィールドに入力します
そして、製品のメリットを実現します。
3. Diviテーマビルダーで製品ページテンプレートを作成する
Diviテーマビルダーに移動して、新しいテンプレートを追加します
Diviから始める時が来ました！ 新しいテンプレートを作成するには、Diviテーマビルダーに移動し、[新しいテンプレートを追加]をクリックします。
すべての製品でテンプレートを使用する
このテンプレートはすべての製品で使用されますが、代わりに特定のカテゴリまたはラベルの製品を自由に選択してください。
モデル本体テンプレートエディタを入力します
次に、「カスタムボディの追加」をクリックして「カスタムボディの作成」を選択し、モデルのボディを入力します。
セクション1を編集
背景色
テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を黒に変更します。
- 背景色：＃000000
スペーシング
セクションのデザインタブに移動し、カスタムの上下のパディングを追加します。
- 上パディング：10px
- 下パディング：10px
新しい行を追加
カラム構造
次の構造を持つセクションに新しい行を追加して続けましょう。
スペーシング
modを追加せずに、行設定を開いて間隔を調整しましょう。
- パーソナライズされた溝を使用する：はい
- 側溝の幅：1
- 幅：90％
- 最大幅：100％
スペーシング
上下の内部間隔をすべて削除します。
- 高い内部マージン：0px
- 低い内部マージン：0px
Woo Cart Noticeモジュールを列に追加します
動的コンテンツ
この行とセクションで必要なモジュールは、Woo CartNoticeモジュールだけです。 動的セクションで「この製品」が選択されていることを確認してください。
- 製品：この製品
背景色
次に、モジュール設定を開き、透明な背景を使用します。
- 背景色：rgba（0,0,0,0）
テキスト設定
[デザイン]タブに切り替えて、テキストのフォントを変更します。
- 文字フォント：Karla
ボタン設定
スタイル設定を定義してプラグイン設定を完了します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：20px
- ボタンのテキストの色：＃000000
- ボタンの背景：＃ffd623
- ボタンのボーダーの幅：0px
- 丸枠ボタン：0px
- ボタンのフォント：Oswald
- ボタンのフォントスタイル：Shift
- 高い内部マージン：20px
- 低い内部マージン：20px
- 左内部マージン：50px
- 内部右マージン：50px
セクション2を追加
グラデーションの背景
前のセクションの下に別の通常のセクションを追加します。 次に、設定を開き、次のようにグラデーションの背景を使用します。
- 色1：＃000000
- 色2：#ffffff
- 開始位置：
- デスクトップ：30％
- タブレット：57％
- 電話：54％
- 終了位置：
- デスクトップ：30％
- タブレット：57％
- 電話：54％
スペーシング
[デザイン]タブに移動して、高い内部マージンを追加しましょう。
- 上パディング：150px
新しい行を追加
カラム構造
以下に示すのと同じ構造の新しい行を追加して続行します。
サイズ剤
まだmodを追加せずに、設定を開き、次のように間隔を変更します。
- カスタム側溝を使用する：はい
- ガタースペース：1
- 幅：95％
- 最大幅：2560px
- 行揃え：中央
間隔
上部の内部マージンも削除します。
- 上パディング：0px
主な要素
そして中心に置くために、 コンテンツ DeskTop の列では、モジュール行のメイン要素で XNUMX 行の CSS コードを使用します。
デスクトップ：
表示：フレックス、位置合わせ項目：中央;
タブレットと電話：
表示：ブロック;
Woo Imageモジュールを列1に追加します
動的コンテンツ
モジュールを追加するときが来ました。列1のWooImagesモジュールから始めます。「この製品」が選択されていることを確認してください。
- 製品：この製品
垂直スクロールアニメーション効果
詳細タブの水平モーションスクロール効果を使用して、画像に微妙な動きを追加します。
- 垂直移動を有効にする：はい
- 開始オフセット：
- オフィス：-4
- タブレットと電話：0
- 平均オフセット：0
- 終了オフセット：0
- トリガーモーション効果：要素の中央
Wooタイトルモジュールを列2に追加します
動的コンテンツ
列 2 で、必要な最初のモジュールは Woo タイトル モジュールです。 ボックス内で「この製品」が選択されていることを確認してください コンテンツ 動的。
- 製品：この製品
タイトルテキストの設定
次に、[デザイン]タブに移動し、タイトルテキストのスタイルを次のように設定します。
- タイトルフォント：Oswald
- タイトルのフォントスタイル：大文字
- タイトルのテキストの色：＃ffd623
- タイトルのテキストサイズ：80ピクセル
スペーシング
左右のマージンを追加して、Wooタイトルモジュールを完成させます。
- 左マージン：5％
- 右マージン：5％
Wooの説明モジュールを列2に追加します
動的コンテンツ
次のモジュールであるWoo記述モジュールに移りましょう。 これには、次の動的コンテンツを使用します。
- 製品：この製品
- 説明タイプ：簡単な説明
テキスト設定
モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。
- 文字フォント：Karla
- テキストの色：#dbdbdb
- テキストサイズ：17ピクセル（デスクトップおよびタブレット）、15ピクセル（電話）
- テキスト行の高さ：1,9 em
サイズ剤
次に、さまざまな画面サイズで幅を変更します。
- 幅：59％（デスクトップ）、82％（タブレットと電話）
スペーシング
間隔設定にカスタムマージン値を追加して、ウーの説明モジュールを完了します。
- 上余白：50px
- 下マージン：100px
- 左マージン：5％
- 右マージン：5％
Blurbモジュールを2列に追加します
動的コンテンツ
このチュートリアルの最初の部分で追加した製品の利点を表示するために、Blurbモジュールを使用します。 最初のBlurbモジュールを追加し、タイトルと本文に対して作成された最初のメリットの動的コンテンツを使用します。
- タイトル：Benefit Title 1
- 本文：特典の説明1
画像をアップロード
次に画像をアップロードするか、選択したアイコンを使用します。 このチュートリアル全体で使用したものは、このチュートリアルの最初にダウンロードできたダウンロードフォルダにあります。
画像/アイコン設定
モジュールのデザインタブに移動し、画像/アイコンの設定を次のように変更します。
- 画像/アイコンの配置：上
- 画像/アイコンの配置：左
タイトルテキスト設定
次に、タイトルテキストの設定を変更します。
- タイトルフォント：オズワルド
- タイトルのフォントスタイル：大文字
- タイトルのテキストサイズ：25px
本文の設定
本文の設定とともに。
- 本文のフォント：Karla
- テキストサイズ：17ピクセル（デスクトップおよびタブレット）、15ピクセル（電話）
- ボディラインの高さ：1,9 em
サイズ剤
次に、サイズ設定に移動し、幅を変更します。 50％未満のメイン幅を使用することが重要です。これにより、次の手順でXNUMXつのBlurbモジュールを並べて表示できます。
- 画像幅：25％
- 幅：49％
スペーシング
また、さまざまな画面サイズでカスタムのパディング値を使用して、Blurbモジュールの周囲にスペースを追加します。
- 上部パディング：8％
- 下詰め：8％
- 左パディング：8％（デスクトップおよびタブレット）、2％（電話）
- 右パディング：8％（デスクトップおよびタブレット）2％（電話）
主な要素
次に、50つの手順で、Summaryモジュールにテキストが隣り合って表示されることを確認します。 まず、モジュールの幅がXNUMX％未満であることを確認します（前の手順で行ったように）。 次に、行のプロパティを使用します。 このCSSプロパティを詳細セクションのメイン要素に追加します。
表示：インラインブロック;
要約モジュールを3回複製する
最初のBlurbmodを完了したら、それをXNUMX回複製できます。 Blurbモジュールがグリッドに表示されていることに自動的に気付くでしょう。
Blurbモジュールの画像を編集する
複製された各Blurbポッドの画像を編集します。 これらは、この記事の冒頭でダウンロードした可能性のあるダウンロードフォルダーにあります。
Blurbモジュールの動的コンテンツを変更する
また、重複する各Blurbモジュールの動的コンテンツを変更します。
- タイトル：サービスのタイトル（2,3、4、またはXNUMX）
- 本文：利点の説明（2,3、4、またはXNUMX）
境界線をBlurbモジュールに個別に追加する
Blurbモジュール1のボーダー設定
次に、グリッドの設計を完了するために、個々のレベルでBlurbモジュールに境界線を追加します。 最初のBlurbmodを開き、まっすぐな境界線を使用します。
- 右のボーダーの幅：1px
- 右のボーダー色：＃ffd623
また、最初のBlurbモジュールに下枠を追加します。
- 下罫線の幅：1px
- 下の境界線の色：＃000000
Blurbモジュール2のボーダー設定
次に、XNUMX番目のBlurbモジュールを開き、下の境界線を使用します。
- 下罫線の幅：1px
- 下の境界線の色：＃000000
Blurbモジュール3のボーダー設定
XNUMX番目のブラーブモジュールに直線の境界線を追加して、グリッドデザインを完成させます。
- 右のボーダーの幅：1px
- 右のボーダー色：＃ffd623
Wooを追加バスケットに追加列2のモジュール
動的コンテンツ
デザインに必要な最後のモジュールは、Woo Add toCartモジュールです。 動的コンテンツ領域で「この製品」が選択されていることを確認してください。
- 製品：この製品
フィールド設定
次のデザインタブに移動し、フィールド設定を変更します。
- フィールドの背景色：#ffffff
- フィールドテキストの色：＃000000
- 丸められたフィールド：0px（すべてのコーナー）
- フィールドの下枠の幅：1px
- フィールドの下の境界線の色：＃000000
ボタン設定
次に、それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用：はい
- ボタンのテキストサイズ：20ピクセル
- ボタンのテキストの色：＃000000
- ボタンの背景色：＃ffd623
- ボタンの境界線の幅：0px
- ボタンの境界線の半径：0px
- ボタンのフォント：Oswald
- ボタンのフォントスタイル：大文字
- 上部パディング：20px
- 下部のパディング：20px
- 左パディング：50px
- 右パディング：50px
スペーシング
そして、カスタムマージン値を追加してモジュールパラメータを完成させます。
- 上余白：100px
- 左マージン：5％
3.テーマジェネレーターの変更を保存し、結果をプレビューする
製品ページテンプレートのデザインが完了したら、テーマビルダーの変更をすべて保存して、製品に結果を表示できます。
概要
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
最終的な考え
この記事では、次のDivi製品ページテンプレートを使用してクリエイティブにする方法を説明しました。 具体的には、動的な製品特典グリッドを含めて、商品ページに特典を追加する方法を示しました。 このチュートリアルは、Advanced CustomFieldsプラグインと組み合わせてDiviを使用して作成しました。 JSONファイルを無料でダウンロードすることもできます！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
