Diviのテーマビルダーを使用してサイト全体のWoo製品ページテンプレートを作成する方法

Diviの新しいテーマビルダーは、DiviWebサイトの構築方法を自動化します。 たとえば、製品ページをデザインする場合、作成プロセスを1回実行するだけで、そこからすべての製品ページにデザインを割り当てることができます。 これが、今日のユースケースチュートリアルで紹介する内容です。 Diviを使用してサイト全体のwoo製品ページテンプレートを設定する方法を説明します。 まず、特定の製品のデフォルトのwoo製品ページをスタイリングして、Screen Printing LayoutPackと一致させます。 レイアウトをDiviライブラリに保存し、作成した新しいテンプレートのグローバルボディとして使用します。

それを手に入れよう！

プレビュー

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

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

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

無料でダウンロード

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

ダウンロード

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

1.既存の製品でDiviBuilderを有効にする

Diviを有効にしてページ設定を変更する

商品ページテンプレートの作成には2つの方法があります。 商品ページテンプレート内のグローバルボディの編集を開始することも、最初に個々の商品ページでデザインを作成することもできます。 個人的には、最初に個々の製品ページでデザインを作成することを好みます。 これにより、デザインを公開してライブ結果を確認してから、実際にすべての製品ページに一度に適用することができます。 これが今日のアプローチなので、先に進んで既存のページの1つを開き、ページレイアウトを全幅に変更します。

VisualBuilderに切り替えます

ページ設定でページレイアウトを変更したら、フロントエンドでビルドを開始できます。

2.ウェブサイト/レイアウトパックのスタイルに合わせてレイアウトをカスタマイズします

背景色

Visual Builder内では、必要なすべてのwoo要素に気付くことができます。 これらのモジュールの設定の一部を、スクリーン印刷レイアウトパックと一致するように変更します。 私たちが行っている変更は最小限であり、特定のデザインスタイルを製品ページに適用するのに役立ちます。 個人的なプロジェクトに取り組んでいる場合は、自由にカスタマイズを行ってください。ただし、このチュートリアルでは、シンプルに保つように努めます。 まず、いくつかの背景色を変更します。

• ウーカート通知モジュール：背景色

Woo Cart Notice Moduleを開き、背景色を変更します。

• 背景色：＃29314f

• ウータブモジュール：タブテキスト/背景色

Woo Tabs Moduleを開いて続行し、次にタブのテキストと背景色を変更します。

• アクティブなタブの背景色：#ffffff
• 非アクティブなタブの背景色：＃29314f
• アクティブなタブのテキストの色：＃000000
• タブのテキストの色：#ffffff

本文の設定

また、次のモジュールの本文にいくつか変更を加えたいと思います。

• ウーブレッドクラムモジュール：テキスト設定
• カートモジュールに追加：テキスト設定
• Woo説明モジュール：テキスト設定
• Wooメタモジュール：テキスト設定
• ウータブモジュール：テキスト設定
• ウータブモジュール：タブテキスト設定

上記の各モジュールを開き、テキストサイズとテキスト行の高さを次のように変更します。

• テキストサイズ：16px（デスクトップとタブレット）、14px（電話）
• テキスト行の高さ：2em（デスクトップとタブレット）、1.7em（電話）

タイトルテキスト設定

タイトルのスタイルも変更しています。 これらの各モジュールに変更を適用します。

• Wooタイトルモジュール：タイトルテキスト設定
• Woo関連製品モジュール：タイトルテキスト設定
• Woo関連製品モジュール：製品タイトルのテキスト設定

変更するのは、タイトルフォントとタイトルフォントの太さの2つだけです。

• タイトルフォント：Roboto
• タイトルフォントの太さ：太字

リンクの色

次に、クリック可能なアイテムが強調表示されていることを確認します。 次の2つのモジュールのリンクテキストの色を変更します。

• ウーブレッドクラムモジュール：リンクテキストの色
• Wooメタモジュール：リンクテキストの色

これは私たちが使用しているカラーコードです：

• リンクテキストの色：＃ff7145

価格テキスト設定

Woo Price Moduleから始めて、価格テキストもスタイル設定したいと思います。

• ウー価格モジュール：価格テキスト設定

価格テキストの設定を次のように変更します。

• 価格フォント：Roboto
• 価格フォントの太さ：太字
• 価格テキストの色：＃ff7145

次に、Woo関連製品モジュールを開きます。

• Woo関連製品モジュール：価格テキスト設定

そして、価格テキストの設定にいくつかの変更を加えます。

• 価格フォント：Roboto
• 価格フォントの太さ：太字
• 価格テキストの色：＃ff7145
• 価格テキストサイズ：16px

ボタンの設定

商品ページにも2つのボタンがあり、それぞれにスタイルを設定する必要があります。

• ウーカート通知モジュール：ボタン設定
• Wooカートモジュールに追加：ボタン設定

モジュールのボタン設定を次のように変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：14px
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃ff7145
• ボタンの境界線の幅：2px
• ボタンの境界線の色：＃ff7145

• ボタンの境界線半径：100px
• ボタンの文字間隔：1px
• ボタンフォント：Roboto
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

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

追加の詳細

ページの2行目の列2の背景から始めて、製品ページのデザインに適用したい追加の変更がいくつかあります。

• 列2：背景色

次のカラーコードを使用します。

• 背景色：#efefef

列2の間隔も変更しています。

• 列2：間隔

次の間隔値を使用します。

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

最後になりましたが、Woo Add To CartModuleのフィールド設定のスタイルを設定する必要があります。

• Woo Add To Cartモジュール：フィールド設定

次の変更を適用します。

• フィールドの背景色：#efefef
• フィールドテキストの色：＃7f7f7f
• フィールドフォント：Roboto
• フィールドフォントの太さ：太字

3.製品の新しいテンプレートを作成し、ボディ領域に製品ページのレイアウトをインポートします

製品ページのレイアウトをDiviライブラリに保存

製品ページのデザインが完了したら、レイアウト全体をDiviライブラリに保存できます。

Diviテーマビルダーに移動します

レイアウトを製品ページテンプレートに変える時が来ました！ これを行うには、Divi設定でテーマビルダーに移動します。

新しいテンプレートを追加

[新しいテンプレートの追加]をクリックして続行します。

テンプレート設定の[使用方法]タブで[すべての製品]を選択して、テンプレートをすべての製品に一度に適用します。

ライブラリからカスタムボディを追加

次に、[グローバルボディの追加]をクリックします。 カスタムボディを最初から作成する代わりに、Diviライブラリに保存したレイアウトを選択します。

[保存したレイアウト]タブに移動して、保存したレイアウトを選択します。

4.テーマビルダーオプションを保存し、既存の製品にテンプレートを表示します

テンプレートの本体が作成されたら、あと1つだけ行う必要があります。 変更を保存します。 新しいテンプレートが保存されるとすぐに、各製品をプレビューして、同じボディテンプレートが適用されていることに気付くことができます。

プレビュー

最終的な考え

この投稿では、サイト全体の商品ページテンプレートを作成する方法を紹介しました。 まず、Diviのwooモジュールを使用して、既存の製品ページを変更します。 スクリーン印刷レイアウトパックと一致するように、製品ページに最小限の変更を加えました。 続いて、製品ページのレイアウトをDiviライブラリに保存しました。 次に、新しいテンプレートを作成し、レイアウトを製品ページテンプレートの本文にアップロードして、Webサイト全体に適用できるようにしました。 このチュートリアルが、Diviの新しいテーマビルダーを使用して美しいeコマースWebサイトを構築するのに役立つことを願っています。 ご不明な点がございましたら、下のコメント欄にコメントを残してください。

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