Diviで製品ページを作成する場合、アコーディオンモジュールを使用して、動的コンテンツを使用して製品情報を表示できます。 これにより、ページ上の貴重なスペースを維持しながら、製品ページに独自のデザインを与えることができます。
このチュートリアルでは、Diviの動的コンテンツ機能を使用して製品情報アコーディオンを作成する方法と、Divi Visual Builderを使用してアコーディオン（およびそのコンテンツ）を設計する方法を示します。
のは、始めましょう。
概要
これが、このチュートリアルで作成する設計のプレビューです。
同じ結果を得るには、このチュートリアルで説明されている製品セットアップが必要であることを忘れないでください。
Commencer
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、 Diviテーマ インストールされています (または、Divi Builder プラグインを使用していない場合は Diviテーマ).
- プラグインをインストールして有効化 WooCommerce. 構成する場合 WooCommerce 初めて、基本セットアップ ウィザードを実行してストアを準備する必要があります。 完了したら、新しい製品を追加する準備が整いました。
- 以下に示すように、新しい製品を作成します。
サンプル製品のセットアップ
このチュートリアルのサンプル製品を構成するには、[製品]> [新規追加]に移動します。 製品に「Massage（シングルセッション）」というタイトルを付け、クリックしてDiviBuilderを使用します。
次に、以下の製品ページ設定と製品情報を更新します。
1. Diviページ設定で、サイドバーなしレイアウトを選択します。
2. 製品カテゴリの追加/選択
3. 製品画像を追加
4. 説明の内容を追加します。
5. 下 データ 商品の商品タイプを変動商品に変更します。
6. 次の値を持つ「Type」という名前の属性を追加します。 ホットストーン| アロマセラピー| 深部組織。 必ず「バリエーションに使用」を選択してください。
7. 次に、[バリエーション] タブのトグルの下にある données ドロップダウン エントリを使用して、すべての属性からバリエーションを作成します。
8. ドロップダウンメニューから[通常価格の設定]を選択して、3つの変数の通常価格を設定します。
9. ダイアログボックスで、値「50」を入力し、[OK]を選択します。
10。 A 終了したら、製品を保存または公開します。
これで、カスタム製品アコーディオンを使用してレイアウトの設計を開始する準備が整いました。
Diviでの動的コンテンツを使用した製品情報アコーディオンの作成
デフォルトの製品レイアウトでは、さまざまなWooモジュールを使用して製品情報が表示されます。 この例では、アコーディオンを使用して、製品に関するXNUMXつの主要な情報（製品の説明、追加の製品情報、および製品のレビュー）を表示します。 これらのXNUMXつのコンテンツは、現在、ウータブモジュールに表示されています。 私たちがしなければならないのは、ウータブモジュールを取り外して、動的コンテンツを介して導入されたのと同じ情報を持つアコーディオンモジュールと交換することです。
それを行う方法は次のとおりです。
まず、クリックしてフロントエンドシステムでDiviを使用し、ビジュアルジェネレータを展開します。 次に、WooTabsモジュールを削除します。
次に、新しいアコーディオンモジュールを追加して、タブを置き換えます。
[アコーディオン設定]ポップアップウィンドウで、最初のアコーディオンの歯車アイコンをクリックして、個々のアコーディオン設定を開きます。
タイトル「製品について」を入力します。
次に、本文コンテンツ入力ボックスにカーソルを合わせ、動的コンテンツアイコンをクリックします。
動的コンテンツリストから[製品の説明]を選択します。
これにより、バックエンドで製品に対して定義した製品の詳細な説明が表示されます。
最初のアコーディオンコンテンツが配置されたら、2番目のアコーディオン設定を開き、以下を更新します。
- タイトル：仕様
次に、動的コンテンツ「追加製品情報」を本文に追加します。
2番目のアコーディオンコンテンツの準備ができたら、新しいアコーディオン要素を追加し、次のようにアコーディオン設定を更新します。
- タイトル：追加情報
次に、動的コンテンツ「製品レビュー」を本文に追加して、製品レビューのアイテム/コンテンツを埋め込みます。
注：ライブページのコンテンツを表示するには、少なくともXNUMXつの製品レビューを追加していることを確認してください。
製品の設計とDiviとのコンテンツ契約
製品情報アコーディオンに製品情報を表示する動的コンテンツが含まれるようになったので、組み込みのアコーディオンモジュールの設定を使用してカスタマイズする準備が整いました。
アコーディオンモジュールの設定を開き、以下を更新します。
- アイコンの色：＃ff9375
- アイコンのフォントサイズを使用する：はい
- アイコンのフォントサイズ：26px
- 背景色を切り替えます：#ffffff
- オープンテキストタイトルの色：#ff9375
- テキストタイトル：#222222
- タイトルフォント：ラト
- タイトルフォント：太字
- タイトルフォントスタイル：TT
- テキストのタイトルサイズ：20px
- タイトルの文字のスペース：0.2em
- タイトル行の高さ：2em
- 本文フォント：ラト
- 本文のサイズ：16px
- 身長：1.8em
- リンクテキストの色：#ff9375
これにより、星の評価など、各アコーディオンの動的コンテンツに含まれるすべてのリンクがターゲットになります。
- 番号なしリストのテキストの色：＃ff9375
- 順不同リストスタイルタイプ：円
- 順序付けられていないリストアイテムのインデント：5％
- ボーダーの幅：0px
- 上部の境界線の幅：1px
- 上部の境界線の色：#222222
最後のステップでは、小さなcss抽出を追加して、アコーディオンスケール間のデフォルトのマージンを抽出します。
[詳細設定]タブで、次のCSSをToggle要素に追加します。
margin-bottom: 0px;
それでは、製品情報アコーディオンの最終的なデザインを見てみましょう。
レイアウトの最終調整
アコーディオンのデザインに合わせて、レイアウトにいくつかの調整を加えることができます。 たとえば、各モジュールのフォントをLatoに調整したり、変数のドロップダウンリストの周囲にカスタムの境界線と境界線の半径を追加したり、[カートに追加]ボタンを無地の背景色で更新したりできます。彼に似合う。
完了したら、これが最終結果です。
上記の無料ダウンロードとしてこのデザインを含めました。 お気軽にチェックしてみてください。 同じ結果を得るには、このチュートリアルで説明されている製品構成が必要であることに注意してください。
注: ほとんどの項目のデフォルトの色 WooCommerce Divi の製品の色は、テーマのカスタマイズ設定の二次色の値から継承されます。 この二次色は、woo によってカラーモジュールが作成されたら更新する方が簡単かもしれません。
最終的な考え
私たちが学んだように、動的な製品情報を抽出するために使用できるのはWooModsだけではありません。 製品情報アコーディオンは、Diviモジュールを使用して製品情報を独自の簡潔な方法で表示する方法の優れた例です。 製品ページの新しいエキサイティングなアコーディオンデザインを自由に探索してください。 もちろん、アコーディオンの代わりに複数のロッカーモジュールを使用して、同様の結果を得ることができます。
