5つのグローバルプリセットを使用してDiviのメニューモジュールを最適化する方法（無料ダウンロード）

メニューはどのサイトでも重要な部分であるため、メニューが正しく表示されるように少し余分な時間と労力を費やすことは理にかなっています。 Diviでは、必要なスタイルオプションの多くを提供するDiviのメニューモジュールを使用して、カスタムメニューをすばやく作成できます。 ただし、事前にいくつかのメニューグローバルプリセットを準備することにより、Webサイトヘッダーの設計プロセスを合理化するのに常に役立ちます。 これにより、ボタンをクリックするだけでカスタムメニュースタイルフレームワークを展開できるため、Webサイトのブランドに合わせてデザインを微調整するためにより多くの時間を費やすことができます。 たとえば、ボタンのように見えるロゴとリンクを備えた中央のメニューが必要な場合は、グローバルプリセットを使用して、シングルクリックでそのフレームワークを展開できます。 これにより、貴重な時間とエネルギーを節約できます。

このチュートリアルでは、カスタムDiviヘッダーを作成するときに使用できる5つのメニューモジュールグローバルプリセットを共有します。 5つのプリセットすべてを含む無料ダウンロードとは別に、これらのプリセットを最初から作成するプロセスについて説明します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

グローバルヘッダーでこれらのメニューグローバルプリセットを使用するには、最初に次のようにレイアウト（プリセットを含む）をDiviライブラリにインポートする必要があります。

1. Divi> DiviLibraryに移動します。
2. ページ上部のインポート/エクスポートボタンをクリックします。
3. 移植性ポップアップで[インポート]タブを選択します
4. インポートするレイアウトJSONファイルを選択します
5. [プリセットのインポート]を選択します
6. インポートボタンをクリックします

次に、テーマビルダーに移動し、グローバルヘッダーを編集します。 ロゴを配置するメニューモジュールを追加し、プリセットを使用して、それに応じてメニューのスタイルと配置を設定します。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviで5つのメニューモジュールグローバルプリセットを作成する

＃1-ロゴ付きの中央ボタンリンク

最初のメニュースタイルのグローバルプリセットでは、メニューが対称に見えるように、同じ幅のボタンリンクを持つメニューを設計します。 メニューボタンリンクのアクティブ状態に一致するホバー状態も含まれます。

この最初のメニューグローバルプリセットを作成するには、通常のセクションに1列の行を追加します。

次に、メニューモジュールを行に追加します。

メニュー設定を開き、モジュールにメニューを追加します。

次に、サイトのロゴを動的コンテンツとしてモジュールにも追加します。

[デザイン]タブで、以下を更新します。

• スタイル：中央揃え

• メニューフォント：ポピンズ
• メニューフォントの太さ：太字
• メニューフォントスタイル：TT
• メニューテキストサイズ：14px（デスクトップ）、24px（タブレットと電話）
• メニューの文字間隔：0.15em
• メニューラインの高さ：1.3em（デスクトップ）、1.8em（タブレットと電話）

• ロゴの最大高さ：60px

• マージン：0px下

[詳細設定]タブで、ボタンとして表示されるようにいくつかのカスタムメニューリンクスタイルを追加します。

メニューリンクCSS

次のカスタムCSSをメニューリンクに追加します。

デスクトップ上…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

ホバー時に…

background: #333333;
color: #ffffff;
opacity: 1;

アクティブメニューリンクCSS

background: #333333;
color: #ffffff;
opacity: 1;

メニューロゴCSS

margin-bottom: 10px;

スタイル1の結果

これが最終結果です…

メニュースタイル1をグローバルプリセットとして追加

重複セクション

メニュースタイルをグローバルプリセットとして追加する前に、メニューモジュールを含むセクション全体を複製して、メニューのスタイルを使用して次のデザインをジャンプスタートできるようにします。

現在のスタイルから新しいプリセットを作成する

グローバルプリセットを追加するには、作成した元のメニューモジュールの設定を開き、[プリセット]ドロップダウンリンクをクリックします。

[現在のスタイルから新しいプリセットを作成]を選択します。

新しいプリセットに名前を付け（「ロゴ付きの中央ボタンリンク」）、プリセットを保存します。

＃2 –ボタンリンク付きのインライン中央ロゴ

2番目のメニューグローバルプリセットを作成するには、前のデザインの複製メニューモジュールの設定を開きます。

[デザイン]タブで、スタイルを更新します。

• スタイル：インライン中心のロゴ

以前のモジュールスタイルから継承されたカスタムCSSにより、メニューリンクはボタンのデザインを維持し、ロゴは完全に中央に配置されます。 カスタムボタンリンクスタイルにより、メニューリンクは対称的なデザインを維持できます。

[詳細設定]タブで、メニューロゴCSSを次のように更新します。

margin-bottom: 0px;

スタイル2の結果

これが最終結果です。

メニュースタイル2をグローバルプリセットとして追加

重複セクション

メニュースタイルをグローバルプリセットとして追加する前に、メニューモジュール（スタイル2）を含むセクション全体を複製して、メニューのスタイルを使用して次のデザインをジャンプスタートできるようにします。

現在のスタイルから新しいプリセットを作成する

グローバルプリセットを追加するには、作成したスタイル2の元のメニューモジュールの設定を開き、[プリセット]ドロップダウンリンクをクリックします。

[現在のスタイルから新しいプリセットを作成]を選択します。

プリセットに名前を付け（「ボタンリンク付きのインライン中央ロゴ」）、プリセットを保存します。

＃3 –モバイルラベル付きのフルセンターVWスペースメニュー

この次のメニュースタイルでは、ロゴのない全幅中央のメニューを設計します。メニューテキストのサイズと間隔はvwの長さの単位で、ブラウザの幅に合わせて調整されます。 また、モバイルのハンバーガーアイコンの上に「メニュー」ラベルが表示されます。

3番目のメニューのグローバルプリセットを作成するには、全幅の行が必要です。 重複メニューを保持している行設定を開き、以下を更新します。

• 側溝幅：1
• 幅：100％
• 最大幅：100％

メニューモジュールの設定を開き、ロゴを削除します。

[デザイン]タブで、スタイルを更新します。

• スタイル：中央揃え

次に、テキストサイズを次のVWの長さの単位で更新して、テキストサイズがブラウザの幅に比例するようにします。

• メニューテキストサイズ：1.5vw（デスクトップ）

モバイルメニューの「メニュー」ラベルを作成するには、次のように、タブレットのBefore PsuedoElementディスプレイにカスタムCSSを追加します。

CSSの前

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

メニューリンクで使用されているフォントと一致するように、フォントファミリが「poppins」に設定されていることに注意してください。 別のフォントを使用している場合は、これを更新する必要があります。

注：これは、ビジュアルビルダーに表示される場合と表示されない場合があります。 結果を表示するには、ライブページをロードする必要がある場合があります。

次に、ホバー時に間隔とメニューリンクの境界線を追加します。 次のカスタムCSSを引き続き追加します。

メニューリンクCSS（デスクトップ）：

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

メニューリンクCSS（ホバー）：

color: #333;
border: 1px solid #333;
opacity:1;

アクティブメニューリンクCSS：

color: #333;
border: 1px solid #333;
opacity:1;

スタイル3の結果

メニュースタイル3をグローバルプリセットとして追加

重複セクション

メニュースタイルをグローバルプリセットとして追加する前に、メニューモジュール（スタイル3）を含むセクション全体を複製して、メニューのスタイルを使用して次のデザインをジャンプスタートできるようにします。

現在のスタイルから新しいプリセットを作成する

スタイル3をグローバルプリセットとして追加するには、作成したスタイル3の元のメニューモジュールの設定を開き、[プリセット]ドロップダウンリンクをクリックします。

[現在のスタイルから新しいプリセットを作成]を選択します。

プリセットに名前を付け（「モバイルラベル付きのフルセンターVWスペースメニュー」）、プリセットを保存します。

＃4 –モバイルラベル付きの右間隔メニュー

4番目のメニューグローバルプリセットを作成するには、行の列レイアウトを0ne-fourth3 / 4sレイアウトで更新する必要があります。 これは、右側にメニューモジュールを含み、左側の列にロゴ画像用の個別のスポットを含むカスタムヘッダーレイアウトを模倣します。

メニューが正しい列にあることを確認してください。 次に、メニュー設定を開き、[要素]オプションを更新して、ショッピングカートアイコンと検索アイコンを表示します。

[デザイン]タブで、スタイルを更新します。

• スタイル：左揃え

次に、次のリンクスタイルとテキストの配置を更新します。

• アクティブリンクの色：＃ac3cf7
• メニューテキストサイズ（デスクトップ）：14px
• テキストの配置：右

モバイルのハンバーガーアイコンが右側に表示されたので、モバイルのメニューラベルの配置を調整する必要があります。 次に、メニューリンクCSSを追加して、リンクが間隔を空けられ、列/行の右側にぴったりと収まっていることを確認します。

次のカスタムCSSを追加します。

CSS（タブレット）の前

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

メニューリンクCSS：

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

スタイル4の結果

これが右揃えのメニューの最終結果です。 行に明るい灰色の背景を追加して、配置がよく見えるようにしました。

メニュースタイル4をグローバルプリセットとして追加

重複セクション

メニュースタイルをグローバルプリセットとして追加する前に、メニューモジュール（スタイル4）を含むセクション全体を複製して、メニューのスタイルを使用して次のデザインをジャンプスタートできるようにします。

現在のスタイルから新しいプリセットを作成する

スタイル4をグローバルプリセットとして追加するには、作成したスタイル4の元のメニューモジュールの設定を開き、[プリセット]ドロップダウンリンクをクリックします。

[現在のスタイルから新しいプリセットを作成]を選択します。

プリセットに名前を付け（「モバイルラベル付き右間隔メニュー」）、プリセットを保存します。

＃4 –モバイルラベル付きの左側のスペースメニュー

この4番目のメニューグローバルプリセットを作成するには、行の列レイアウトを0ne-fourth3 / 4sレイアウトで更新する必要があります。 これは、左側にメニューモジュールを含み、右側の列にロゴ画像（またはCTA）の個別のスポットを含むカスタムヘッダーレイアウトを模倣します。

メニューの設定を開き、メニューリンクのテキスト配置を更新します。

• テキストの配置：左

次に、左側のハンバーガーナビゲーションの上に配置されるようにモバイルメニューラベルを調整する必要があります。 また、タブレットに「direction：rtl」を追加することで、モバイルアイコンがモバイルでも左側に配置されるようにします。

[詳細設定]タブで、次のカスタムCSSを更新します。

CSS（タブレット）の前：

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

主な要素（タブレット）：

direction:rtl;

メニューリンクCSS：

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

これが最終結果です。

最終結果

最終的な考え

これらのメニューモジュールの外側のスタイルは基本的ですが、メニューレイアウトの内側のフレームワークのデザインは、創造的なプロセスをすぐに開始するのに非常に役立ちます。 さらに、これらのフレームワークでグローバルプリセットを使用すると、プロセスがさらに高速化されます。 メニューモジュールをカスタマイズし、次のプロジェクト用に独自のプリセットを追加する方法を自由に検討してください。

コメントでお返事をお待ちしております。

乾杯！