セクションディバイダーを使用してナビゲーションメニューを構成する方法

ナビゲーションメニューは、訪問者がサイトにアクセスしたときに最初に探すものの1つです。 このため、ウェブサイトはそれに値する主要な不動産（ページの上部）を確実に提供します。 ただし、ナビゲーションメニューをもう少し目立たせたい場合は、カスタムの背景デザインでスパイスを加えることができます。 DiviのVisualBuilderを使用すると、ページのすべてのセクションで使用できるDivider背景オプションを使用して素晴らしい背景デザインを作成できます。 そして、少しの創造性で、仕切りの背景を使用して、ナビゲーションメニューの一意のフレームとして機能させることができます。 Webサイトのページごとに固有のメニュー背景を作成することもできます。

このチュートリアルでは、セクション仕切りの背景を使用して、ナビゲーションメニューを美しい背景デザインでフレーム化することがいかに簡単であるかを示します。 これらのデザインを作成するためのサンプルサイトとして、薬局のレイアウトパックを使用します。

始めましょう！

スニークピーク

これは、この設計手法で達成できることのスニークピークです。

何が必要

このチュートリアルでは、本当に必要なのは次のとおりです。

• Diviテーマ（インストール済みでアクティブ）
• 薬局レイアウトパック（Divi Builder内で利用可能な無料の既製のレイアウトパック）

テーマカスタマイザでのプライマリメニューの設定

このチュートリアルでは、薬局のレイアウトパックの6ページを含むプライマリメニューを使用して、Diviを新規インストールします。 デフォルトのメニューは次のようになります。

ご覧のとおり、ヘッダーの背景は白で、ページの最初のセクションの上にあります。 下にスクロールすると、ヘッダーが固定のナビゲーションメニューバーに変わります。

ただし、このチュートリアルでは、ヘッダーの背景を透明にして、独自のカスタム背景を追加できるようにします。 これを行うには、テーマカスタマイザーに移動する必要があります。 WordPressダッシュボードからDivi> ThemeCustomizerに移動します。 次に、カスタマイザメニューから、[ヘッダーとナビゲーション]> [プライマリメニューバー]に移動します。

透明度スライダーを一番下までドラッグして背景色を完全に透明にするか、カラーコードrgba（255,255,255,0）を入力します。

ご覧のとおり、白いヘッダーの背景が消え、最初のセクションがページの上部にジャンプして、ヘッダーとプライマリメニューの背景として機能します。

ナビゲーションメニューのフレームに色の背景を追加するので、次のメニューテキストオプションも更新しましょう。

フォント：Montserrat
フォントスタイル：太字（B）
テキストの色：白
アクティブリンクの色：白

カスタマイザメニューで1レベル戻り、[固定ナビゲーション]タブをクリックします。 固定ナビゲーションの機能を維持する場合は、ビジュアルビルダーで作成するカスタム背景の色を補完するカスタム色を指定できます。 または、より一般的な色を指定して、メインメニューをページごとに異なる色でフレーム化することもできます。 今のところ、固定ナビゲーションにはより一般的な配色を使用します。 以下を更新します。

プライマリメニューの背景色：#ffffff
プライマリメニューのリンクの色：rgba（0,0,0,0.61）
アクティブなプライマリメニューのリンクの色：＃ff5473

これで準備が整いました！ 必ず変更を公開してください。

セクションディバイダーの背景を使用したナビゲーションメニューのフレーミング

例1

薬局のホームページに移動して、ビジュアルビルダーをデプロイします。 次に、行、列、またはモジュールのない新しい通常のセクションを追加し（それらは必要ありません）、セクションをページの上部にドラッグします（セクションは大きなブロックであるため、ワイヤーフレームモードでセクションを再配置する方が簡単です）。

次に、デスクトップモードに戻って、設計を完了します。

セクション設定を開き、以下を更新します。

トップディバイダースタイル：スクリーンショットを参照
仕切りの色：＃ff5473
仕切りの高さ：150px
ディバイダー水平リピート：0.8x
カスタムマージン：-80px下
カスタムパディング：0px上、0px下

仕切りの色は、レイアウトで使用されているのと同じピンク色です。 仕切りを少し平らにするために、仕切りの水平方向の繰り返しを0.8倍に設定しました。 -80pxの下マージンは、セクションの白い背景を非表示にするために、セクションをページの下に移動します。 これにより、右側のナビゲーションを構成する仕切りが作成されます。 仕切りは左に伸びて、ロゴにも素敵な背景を追加します。

ライブサイトでは次のようになります。

例2

この次の例では、仕切りの背景がロゴまで拡張されるのではなく、ナビゲーションメニューのみをフレームに収めるようにセクションを配置します。 これを行うには、セクションにカスタム幅を指定し、ナビゲーションメニューの周囲に収まるように右揃えにする必要があります。

セクション設定に移動し、以下を更新します。

（注：セクションのカスタムマージンによってセクションメニューがクリックできなくなる可能性があるため、ワイヤーフレームモードで設定を開く必要がある場合があります。ワイヤーフレームモードで設定を開くと、デスクトップビューモードに戻ることができます。）

幅：75％
セクションの配置：右
仕切りスタイル：スクリーンショットを参照
ディバイダー水平リピート：1x

これがどのように見えるかです：

固定ナビゲーションをアクティブにすると、メニューがフレームを離れ始めたときに、固定メニューヘッダーがどのようにアクティブになるかを確認できます。

固定ナビゲーションを無効にする場合は、[Divi]> [テーマオプション]に移動し、[一般設定]の[固定ナビゲーションバー]オプションを無効にします。

固定ナビゲーションをアクティブにしないと、メニューはスクロールとしてフレームデザイン内の所定の位置にロックされたままになります。

レスポンシブ

フレームはモバイルでも見栄えがします。

ただし、デスクトップとモバイルのセクションにカスタムの仕切りの高さをゼロにすることで、いつでもフレームを非表示にすることができます。 次に、テーマカスタマイザーでモバイルメニューをカスタマイズします。

異なるページで異なるカラーフレームを使用する

必要に応じて、ページごとに異なる色やデザインを追加できます。 あなたがする必要があるのはあなたのセクションをあなたのDiviライブラリに保存してあなたのウェブサイトの別のページにそれを追加することです。 次に、必要に応じて色やデザインを調整できます。 可能性は無限大。

最終的な考え

ナビゲーションメニューにカスタム背景を追加することは、DiviBuilderを使用すると実際には非常に簡単です。 知っておく必要があるのは、メニューの背景として機能するようにセクションを配置する方法です。 この設定を行うと、さまざまな仕切りスタイルをテストして、ナビゲーションメニュー用のあらゆる種類の固有のフレームを作成できます。 また、セクションを使用しているため、フレームを設計するためのセクションのすべての設計オプションがあります。 単純なセクションの背景やグラデーションを使用して、セクションの位置を好きな場所に調整することもできます。

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

乾杯！