Diviのテーマビルダーを使用してカスタムeコマースメガメニューを作成する方法

公開: 2020-08-26

DiviとWooCommerceを使用してeコマースWebサイトを構築する場合、Webサイトの全体的なルックアンドフィールをカスタマイズする方法はたくさんあります。 DiviのWooCommerceモジュールをDiviTheme Builderと組み合わせて使用​​すると、製品ページ、カテゴリページなどのテンプレートを作成できます。 ただし、Webサイトの構造とWooCommerceページを立ち上げる準備ができていることを確認するだけでなく、訪問者が体験するナビゲーションエクスペリエンスについて考えることも重要です。 eコマースWebサイト用に作成したメニューは、Webサイトでの訪問者の購入行動のトーンを設定します。

eコマースWebサイトの可能性を最大限に引き出すために、Diviのテーマビルダーを使用してカスタムeコマースメガメニューを作成する方法を紹介します。 Diviの組み込み要素を使用してすべてを視覚的に構築し、いくつかのコードで要素をドロップダウンとして使用します。 このアプローチを使用すると、構築したeコマースWebサイト用にあらゆる種類のeコマースメガメニューを構築できます。 JSONファイルも無料でダウンロードできます。

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

プレビュー

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

デスクトップ

eコマースメガメニュー

モバイル

eコマースメガメニュー

eコマースメガメニューレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

JSONファイルをアップロードする方法

上記でダウンロードできたzipフォルダーを解凍します。 次に、WordPressWebサイト> Divi> Divi Libraryに移動し、JSONをアップロードします。

eコマースメガメニュー

eコマースメガメニュー

レイアウトがDiviライブラリに保存されたら、Diviテーマビルダーに移動し、[グローバルヘッダーの追加]または[カスタムヘッダーの追加]をクリックして[グローバル/カスタムヘッダーの作成]を選択することにより、保存したレイアウトをインポートできます。 Diviライブラリの[保存したレイアウト]タブに移動し、前の手順でアップロードしたレイアウトを選択して、Diviテーマビルダーの変更をすべて保存します。

eコマースメガメニュー

eコマースメガメニュー

eコマースメガメニュー

eコマースメガメニュー

すぐに機能するメニューを使用するには、以下のこのチュートリアルの最初の部分を実行する必要があります。 個々のレベルのメニュー項目にCSSクラスを追加します。 また、このチュートリアルのパート5に示すように、コードモジュール内のCSSクラスの1つを有効にする必要があります。 アイコンが正しく表示されない場合は、コードモジュール内のアイコンの内容を確認してください。 下の印刷画面でわかるように、アイコンには「\ 4c」と「\ 21」のコンテンツが含まれている必要があります。

eコマースメガメニュー

1.メニュー項目にCSSクラスを追加します

外観のメニューに移動

このチュートリアルの最初の部分では、ドロップダウンメガメニューを追加するメニュー項目に2つの異なるCSSクラスを割り当てます。 これを行うには、WordPressダッシュボードの外観設定のメニューに移動します。

eコマースメガメニュー

CSSクラスオプションを有効にする

画面オプションを切り替えてCSSクラスオプションを有効にして、上部でCSSクラスオプションが有効になっていることを確認します。

eコマースメガメニュー

ドロップダウンが必要なメニュー項目に連続したCSSクラスを追加する

ドロップダウンメガメニューを割り当てるメニュー項目には、それぞれ2つのCSSクラスが必要です。 まず、「第1レベル」と呼ばれる一般的なCSSクラスです。 2番目のCSSクラスには、末尾に「first-level-1」、「first-level-2」、「first-level-3」などの連続番号が含まれています。

  • ドロップダウンを含む最初のメニュー項目：第1レベル第1レベル-1
  • ドロップダウンを含む2番目のメニュー項目：第1レベル第1レベル-2
  • ドロップダウンを含む3番目のメニュー項目：第1レベル第1レベル-3

eコマースメガメニュー

2.Diviのテーマビルダーを使用してグローバルヘッダーを作成します

Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

メニュー項目が配置されたら、Diviに切り替えます。 Divi Theme Builderに移動し、[Add Global Header]をクリックして、新しいグローバルヘッダーを作成します。 グローバルヘッダーを最初から作成します。

eコマースメガメニュー

eコマースメガメニュー

セクション＃1設定

間隔

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、デフォルトの上部と下部のパディングをすべて削除します。

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

eコマースメガメニュー

可視性

次にタブレットと電話でこのセクションを非表示にします。 このセクションは、小さい画面サイズでのナビゲーションエクスペリエンスが圧倒されないようにするために、大きい画面サイズでのみ保持しています。

eコマースメガメニュー

行＃1を追加

カラム構造

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

eコマースメガメニュー

サイジング

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

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 列の高さを等しくする：はい
  • 幅：95％
  • 最大幅：100％

eコマースメガメニュー

間隔

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

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

eコマースメガメニュー

列1に画像モジュールを追加

ロゴをアップロード

列1の画像モジュールから始めて、モジュールを追加します。ロゴをアップロードします。

eコマースメガメニュー

間隔

モジュールの[デザイン]タブに移動し、上部マージンを追加します。

  • トップマージン：3％

eコマースメガメニュー

列2にテキストモジュールを追加します

コンテンツを追加する

次の列に進みます。 選択したコンテンツを含むテキストモジュールを追加します。

eコマースメガメニュー

テキスト設定

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

  • テキストフォント：Oswald
  • テキストフォントの太さ：中
  • テキストフォントスタイル：大文字
  • テキストの色：＃000000
  • テキストサイズ：19px

eコマースメガメニュー

間隔

上下の余白も追加します。

  • トップマージン：5％
  • 下マージン：5％

eコマースメガメニュー

テキストモジュールのクローンを2回作成し、列3と4に複製を配置します

コピーの変更

列2の最初のテキストモジュールを完了したら、それを2回複製し、列3と4に複製を配置できます。両方の複製モジュールの内容を必ず変更してください。

eコマースメガメニュー

セクション＃2を追加

間隔

前のセクションのすぐ下に別のセクションを追加します。 セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

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

eコマースメガメニュー

行＃2を追加

カラム構造

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

eコマースメガメニュー

サイジング

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

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

eコマースメガメニュー

間隔

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

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

eコマースメガメニュー

国境

次に、境界線の設定に移動し、上下の境界線を適用します。

  • 上部の境界線の幅：
    • デスクトップ：2px
    • タブレットと電話：0px
  • 下の境界線の幅：2px
  • ボーダーカラー：＃ff6600

eコマースメガメニュー

メニューモジュールを列に追加

メニューを選択

メニューモジュールを行の列に追加し、選択したメニューを選択します。

eコマースメガメニュー

タブレットと携帯電話にロゴを追加

次に、レスポンシブオプションを有効にし、ロゴ画像ファイルをアップロードして、タブレットと携帯電話にロゴを追加します。 デスクトップ領域は空のままにします。

eコマースメガメニュー

要素

ショッピングカートと検索アイコンも有効にしています。

  • ショッピングカートアイコンを表示：はい
  • 検索アイコンを表示：はい

eコマースメガメニュー

メニューテキスト設定

[デザイン]タブに移動し、メニューテキストの設定を次のように変更します。

  • メニューフォント：Oswald
  • メニューのフォントスタイル：大文字
  • メニューテキストの色：＃000000
  • メニューテキストサイズ：19px

eコマースメガメニュー

ドロップダウンメニューのテキスト設定

ドロップダウンメニューの線の色も変更します。

  • ドロップダウンメニューの線の色：#ffffff

eコマースメガメニュー

アイコン設定

アイコンの設定と一緒に。

  • ショッピングカートのアイコンの色：＃ff6600
  • 検索アイコンの色：＃ff6600
  • ハンバーガーメニューアイコンの色：＃ff6600

eコマースメガメニュー

CSSクラス

CSSクラスを追加して、モジュールの設定を完了します。 このCSSクラスは、チュートリアルの後半でコードを追加するときに使用します。

  • CSSクラス：カテゴリメニュー

eコマースメガメニュー

3.ヘッダーテンプレート内にドロップダウン行を作成します

新しいセクションの追加（最初のメニュー項目のドロップダウン専用）

サイジング

メニューが配置されたので、eコマースメガメニューのドロップダウンの作成に特化したチュートリアルの次の部分に進みます。 最初のドロップダウンeコマースメガメニューを作成するために、新しいセクションを追加します。 セクション設定を開き、サイズ設定で幅と最大幅が100％に設定されていることを確認します。

  • 幅：100％
  • 最大幅：100％

eコマースメガメニュー

間隔

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

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

eコマースメガメニュー

CSSクラス

次に、2つのCSSクラスを追加します。 2番目のCSSクラスの最後の番号は、このチュートリアルの最初の部分で最初のメニュー項目に使用された番号と同じです。

  • CSSクラス：dropdown-menu dropdown-menu-1

eコマースメガメニュー

セクションに新しい行を追加

カラム構造

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

eコマースメガメニュー

背景色

モジュールをまだ追加せずに、行設定を開き、白い背景色を追加します。

  • 背景色：#ffffff

eコマースメガメニュー

サイジング

行の[デザイン]タブに移動し、次のようにサイズ設定を変更します。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 列の高さを等しくする：はい
  • 幅：100％
  • 最大幅：100％

eコマースメガメニュー

間隔

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

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

eコマースメガメニュー

国境

そして、下の境界線を適用します。

  • 下の境界線の幅：2px
  • 下の境界線の色：＃ff6600

eコマースメガメニュー

1列目と2列目の設定

次に、列1と列2の設定を個別に開きます。

eコマースメガメニュー

間隔

次のレスポンシブパディング値を両方の列に追加します。

  • トップパディング：
    • デスクトップとタブレット：10％
    • 電話番号：5％
  • ボトムパディング：
    • デスクトップとタブレット：10％
    • 電話番号：5％
  • 左パディング：5％
  • 右パディング：5％

eコマースメガメニュー

主な要素CSS

1行のCSSコードとともに。 これは、小さい画面サイズでも列を並べて配置するのに役立ちます。 

width: 50% !important

eコマースメガメニュー

列3の設定

グラデーションの背景

列3の設定に進みます。 次のグラデーションの背景を適用します。

  • 色1：rgba（0,0,0,0.08）
  • 色2：＃0a0a0a
  • 背景画像の上にグラデーションを配置：はい

eコマースメガメニュー

背景画像

次に、選択した背景画像をアップロードします。

eコマースメガメニュー

主な要素CSS

そして、1行のCSSコードを使用して、列に右マージンを追加します。 

margin-right: 10px !important;

eコマースメガメニュー

可視性

モバイルのドロップダウンが圧倒されすぎないようにするために、タブレットと電話でこの列全体を非表示にしています。

eコマースメガメニュー

列4の設定

グラデーションの背景

次に、4番目の列があります。 同じグラデーションの背景を追加します。

  • 色1：rgba（0,0,0,0.08）
  • 色2：＃0a0a0a
  • 背景画像の上にグラデーションを配置：はい

eコマースメガメニュー

背景画像

ここにも背景画像をアップロードします。

eコマースメガメニュー

可視性

そして、タブレットと電話の列を非表示にします。

eコマースメガメニュー

列1にテキストモジュールを追加

コンテンツボックスに製品カテゴリ名を追加

モジュールを追加する時が来ました！ このドロップダウンには、好きなものを配置できます。 1列目の最初のテキストモジュールから始めて、テキストモジュールを使用しています。カテゴリ名を追加します。

eコマースメガメニュー

製品カテゴリリンクを追加

次に、このカテゴリへのリンクを追加します。

eコマースメガメニュー

テキスト設定

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

  • テキストフォント：Oswald
  • テキストフォントスタイル：大文字
  • テキストの色：＃000000
  • 文字サイズ：
    • デスクトップ：22px
    • タブレット：18px
    • 電話番号：16px
  • テキスト文字の間隔：-0.6px
  • テキスト行の高さ：2.4em

eコマースメガメニュー

国境

下の境界線も追加します。

  • 下の境界線の幅：2px
  • 下の境界線の色：
    • デフォルト：rgba（0,0,0,0）
    • ホバー：＃ff6600

eコマースメガメニュー

必要な回数だけテキストモジュールのクローンを作成して変更する

最初の1つを完了したら、必要な回数だけクローンを作成し、重複を列1と2の両方に分散させることができます。

eコマースメガメニュー

製品カテゴリのタイトルとリンクを変更する

すべての製品カテゴリ名とリンクを必ず変更してください。

eコマースメガメニュー

列3にテキストモジュールを追加

製品カテゴリ名を追加

3番目の列に進みます。 新しいテキストモジュールを追加し、製品カテゴリ名を挿入します。

eコマースメガメニュー

製品カテゴリリンクを追加

リンクも追加してください。

eコマースメガメニュー

テキスト設定

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

  • テキストフォント：Oswald
  • テキストフォントの太さ：太字
  • テキストフォントスタイル：大文字
  • テキストの色：#ffffff
  • テキストサイズ：3.4vw
  • テキスト行の高さ：1em

eコマースメガメニュー

ポジション

モジュールも再配置します。

  • 位置：絶対
  • 場所：左下
  • 垂直オフセット：2％
  • 水平オフセット：2％

eコマースメガメニュー

列3にテキストモジュールのクローンを作成し、列4に複製を配置します

テキストモジュールを列3に複製し、複製を列4に配置できます。

eコマースメガメニュー

製品カテゴリ名とリンクの変更

リンクと一緒に製品カテゴリ名を変更してください。

eコマースメガメニュー

セクション全体を複製して、他のメニュー項目のドロップダウンとして再利用する

最初のセクションのドロップダウンを作成したらすぐに、それを2回複製できます。

eコマースメガメニュー

すべての製品カテゴリ名とリンクを変更する

新しいドロップダウンですべての製品カテゴリ名を変更します。

eコマースメガメニュー

セクションCSSクラスを連続して変更する

最後のセクションとともに、各複製のCSSクラス。 連続した注文に従っていることを確認してください。

  • CSSクラス：dropdown-menu dropdown-menu-2

eコマースメガメニュー

  • CSSクラス：dropdown-menu dropdown-menu-3

eコマースメガメニュー

4.CSSとJQueryコードを追加します

メニューモジュールの上に新しいコードモジュールを追加する

すべてのメニュー要素が配置されたので、eコマースメガメニューのドロップダウンをメニュー内に配置します。 そのために、新しいコードモジュールにコードを追加します。 このコードモジュールを2番目のセクションのメニューモジュールのすぐ上に配置します。

eコマースメガメニュー

CSSコードを挿入

コードモジュールを開き、下の印刷画面に表示されているように、スタイルタグの間にCSSコードの次の行を追加します。 

/* Enable class below once you're done editing the menu */ 
   
/*
.dropdown-menu {
visibility: hidden;
}
*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

eコマースメガメニュー

JQueryコードを挿入する

下の印刷画面にも表示されているように、スクリプトタグの間にJQueryコードを追加します。 

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

eコマースメガメニュー

5.完了したらCSSクラスを有効にするメニューのカスタマイズ

すべてのドロップダウンセクションのカスタマイズが完了するとすぐに、やらなければならないことが1つあります。それは、一目でそれらを非表示にすることです。 これにより、ページの読み込み時にドロップダウンメニューが表示されなくなります。 このCSSクラスを有効にすると、Visual Builder内にドロップダウンセクションは表示されなくなりますが、ワイヤーフレームモードでそれらにアクセスしたり、ドロップダウンセクションに変更を加えるときにCSSクラスを一時的に無効にしたりできます。 クラスを有効にするには、CSSクラスの最初と最後にある「/ * * /」角かっこを削除します。

eコマースメガメニュー

6.Diviテーマビルダーの変更を保存します

グローバルヘッダーが完成したら、Webサイトで結果を表示する前に、Diviテーマビルダーの変更をすべて保存してください。

eコマースメガメニュー

eコマースメガメニュー

プレビュー

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

デスクトップ

eコマースメガメニュー

モバイル

eコマースメガメニュー

最終的な考え

この投稿では、Diviのテーマビルダー内でカスタムeコマースメガメニューを作成する方法を紹介しました。 Diviの組み込み要素を使用してドロップダウンを作成し、それに応じてメニューをドロップダウンに接続するのに役立つコードと組み合わせました。 このアプローチにより、プラグインを使用せずに、さまざまな画面サイズでeコマースドロップダウンを完全にカスタマイズできます。 JSONファイルもダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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