Diviのショップモジュールの使い方

こんにちは、根本です。今回は、Diviのショップというモジュールの使い方をご紹介していきます。

重要Diviは有料のテーマ及びプラグインです。こちらの公式サイトから契約し、テーマもしくはプラグインをインストールしてから続きをご覧ください。

Diviのショップモジュールとは?

Divi ショップモジュール

Diviのショップモジュールは、WooCommerceのプラグインをインストールしている場合に使用することができるモジュールで、WooCommerceで作成した商品を表示することができます。

コンテンツ設定

では、実際にショップモジュールの使い方を確認していきましょう。まずは、コンテンツの設定です。

コンテンツ

Divi ショップ コンテンツ コンテンツ

  • 製品ビュータイプ:商品の表示タイプを選択します。
  • 製品数:1つのモジュールで何個の商品を表示するかを設定します。
  • 列レイアウト:1つのモジュールの中で商品を何列で表示するかを設定します。

要素

Divi ショップ コンテンツ 要素

「要素」では、「ページネーションを表示」を「はい」に切り替えるとモジュールの中にページを切り替えるページネーションが表示され、そのモジュールに表示できない商品をページを移動することで表示することができます。

デザイン

オーバーレイ

Divi ショップ デザイン オーバーレイ

  • オーバーレイアイコン色:オーバーレイ時に表示されるアイコンの色を設定します。
  • オーバーレイの背景色:オーバーレイ時の商品画像の背景色を設定します。
  • オーバーレイアイコン:オーバーレイアイコンの種類を選択します。

Divi ショップモジュール オーバーレイ

オーバーレイというのは、商品にカーソルを置いた時の効果です。デフォルトだと、青いプラスボタンが表示されます。

画像

Divi ショップ デザイン 画像

  • 画像 角丸長方形:商品画像の4つの角の丸みを調節します。
  • 画像 ボーダースタイル:商品画像にボーダーを付ける場合は、どの辺に追加するのかを選択します。
  • 画像 ボーダー幅:画像につけるボーダーの幅を調節します。「0」だとボーダーが表示されません。
  • 画像 ボーダーカラー:ボーダーの色を設定します。
  • 画像 ボーダースタイル:「直線」や「二重線」など、ボーダーのタイプを選択します。
  • 画像とビデオ:商品画像に付けるシャドー効果を選択します。

「画像」では、商品画像のボーダーを中心に設定していきます。その他にも、上記には記載していませんが、「画像 色相」や「画像 彩度」などを組み合わせて画像の色を調節することができます。

星評価

Divi ショップ デザイン 星評価

  • Star Rating Alignment:星の位置を設定します。
  • Star Rating Color:星の色を設定します。
  • Star Rating Size:星の大きさを調節します。
  • 星評価 文字間隔:それぞれの星の間隔を調節します。

Divi ショップモジュール 星の評価 1

「星評価」は、商品タイトルの直後に表示されるレビューのことです。

WooCommerce 商品 レビューを有効化

ちなみに、デフォルトでは商品を購入してもらったお客さんはレビューを投稿できないようになっているので、商品の作成画面で、「レビューを有効化」にチェックを入れておきます。

Divi ショップモジュール 商品のレビュー

すると、こんな感じで、商品の下の位置にレビューを投稿してもらうフォームが表示されます。

テキスト

Divi ショップ デザイン テキスト

  • 文字列の揃え:商品名や星の評価、値段テキストの位置をセットで設定します。
  • 文字サイズ:全ての文字に適用されるシャドーの設定をします。

「テキスト」では、商品名や星の評価、値段テキスト全てに適用される設定項目になります。別々に細かい設定をしたい場合は、以下のテキストタブで設定をしてみてください。

タイトル・価格・セールバッジ・セールスプライス・テキスト

Divi ショップ デザイン タイトルテキスト

  • 販売バッジカラー:これは、「セールスバッジ テキスト」のみの設定になります。
  • フォント:テキストのフォントを変更できます。
  • ソフトライト:の文字の太さを選択します。
  • 書式のコピー:テキストの書式(斜体にしたり、打ち消し線を引いたり)を設定します。複数の書式を選択することも可能です。
  • 文字の揃え:テキストの位置を設定します。
  • テキストカラー:文字の色を設定します。
  • 文字サイズ:文字の大きさを調節します。
  • 文字間隔:テキストの各文字の隙間を調節します。
  • 行の高さ:縦の幅を調節します。
  • 文字サイズ:テキストにかけるシャドウを設定します。

「タイトル テキスト」と「価格 テキスト」、「セールバッジ テキスト」、「セールスプライス テキスト」の4つのテキスト関連の設定は、ほとんど同じ設定項目になっているので、1つにまとめてしまいました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です