プライマリメニューバーをDiviの全幅メニューモジュールに置き換える方法
公開: 2018-08-29プライマリメニューバーにより、訪問者のナビゲートがシームレスになります。 WordPressで使用されているデフォルトのプライマリメニューバーとは別に、Diviが提供する全幅メニューモジュールにも出くわしたことでしょう。 通常、各ページの上部にあるプライマリメニューとは異なる他のメニューをWebサイトに表示するために使用されます。
ただし、全幅メニューモジュールを簡単に使用してプライマリメニューバーを置き換えることもできます。 これにより、ページの上部にある重複メニューを処理することなく、ページ上の任意の場所にメニューを自由に配置できます。 Diviの組み込みオプションを使用して、メニューを好きなようにスタイル設定することもできます。つまり、たとえば、境界線と仕切りのオプションを使用して、見事な結果を作成できます。
このチュートリアルでは、DiviのCarpenter Layout Packを使用して、プライマリメニューバーを全幅メニューモジュールに置き換える方法を示します。 これは、現在進行中のDivi設計イニシアチブの一部です。 この方法をすべてのページに適用するか、一部のページにのみ適用するかを選択できます。 それを手に入れよう！
プレビュー
ユースケースのチュートリアルに入る前に、さまざまな画面サイズでの最終結果を簡単に見てみましょう。
固定ナビゲーションバーを無効にする
Diviのテーマオプションに移動します
最初に行う必要があるのは、Diviのテーマオプションで固定ナビゲーションオプションを無効にすることです。 これは、ページ上部のプライマリメニュースペースを削除するために行っています。 これを行うには、 WordPressダッシュボード> Divi>テーマオプションに移動します。
固定ナビゲーションバーを無効にする
[全般]タブを開き、[固定ナビゲーションバー]オプションを無効にします。
プライマリメニューの作成
メニューに移動
次に行うことは、プライマリメニューを作成することです。 このプライマリメニューは、上部のデフォルトのプライマリメニューバーと全幅メニューモジュールの両方に使用します。 メニューを追加するには、 WordPressダッシュボード>外観>メニューに移動します。
新しいプライマリメニューを追加
新しいメニューを追加し、メニューに名前を付けて、プライマリメニューにします。
ページの追加とメニューの保存
最後になりましたが、すべてのページを追加してメニューを保存してください。
テーマカスタマイザのスタイルプライマリメニューバー
テーマカスタマイザに移動
すべてのページでデフォルトのプライマリメニューバーを非表示にするかどうかによっては、最初にデフォルトのプライマリメニューバーのスタイルを設定することをお勧めします。 一部のページで使用する予定がある場合にのみ、これを行う必要があります。 プライマリメニューバーをどこからでも削除したい場合は、この手順をスキップできます。
プライマリメニューバーの設定
レイアウトパックに合わせるために、次の変更を適用しました。
- フォントスタイル：太字と大文字
- テキストの色：#FFFFFF
- アクティブリンクの色：#FFFFFF
- 背景色：＃f25b3a
- ドロップダウンメニューの背景色：＃f25b3a
プライマリメニューバーを非表示
1ページ
選択したページに移動してVisualBuilderを有効にする
ページ上部のプライマリメニューバーを非表示にするには、少量のCSSコードを使用する必要があります。 固定ナビゲーションバーオプション（前の手順の1つ）を無効にすることが重要であることに注意してください。 そうしないと、プライマリメニューバーが占めるスペースが白くなり、完全に消えることはありません。 特に、1つのページでプライマリメニューバーを非表示にする場合は、そのページに移動してVisualBuilderを有効にします。
ページ設定を開く
次に、ページの下部にある次のアイコンをクリックして、ページ設定を開きます。
CSSコードを追加する
[詳細設定]タブに切り替えて、次のCSSコードを[カスタムCSS]ボックスに追加します。
#main-header {
display: none;
}
ウェブサイト全体
Diviのテーマオプションに移動します
Webサイト全体のプライマリメニューバーを削除したい場合は、それを行うこともできます。 各ページに手動でコードを追加する必要はありません。 代わりに、 WordPressダッシュボード> Divi>テーマオプションに移動するだけです。
CSSコードを追加する
[カスタムCSS]ボックスが表示されるまで下にスクロールして、同じCSSコードを追加します。
#main-header {
display: none;
}
プライマリメニューバーをページに追加
VisualBuilderでランディングページを開く
プライマリメニューバーを非表示にしたので、ページに全幅メニューモジュールを追加し始めることができます。 これを行うには、たとえば、ランディングページに移動し、ビジュアルビルダーを有効にします。
全幅セクションを追加
ヒーローセクションのすぐ下に全幅セクションを追加して続行します。
トップボーダー
Diviのすべての組み込みオプションを使用して、必要なデザインを正確に作成できます。 私たちはそれをかなりきれいに保つつもりです。 セクションオプションに追加するのは、上部の境界線だけです。
- 上枠幅：7px
- 上枠の色：＃f25b3a
全幅メニューモジュールを追加
次に、全幅メニューモジュールをセクションに追加します。
プライマリメニューを選択します
表示するメニューとしてプライマリメニューを選択します。
背景色
モジュールに黒の背景色を付けて続行します。
リンク設定
次に、リンク設定を開き、次の変更を適用します。
- アクティブリンクの色：#FFFFFF
- ドロップダウンメニューのテキストの色：#FFFFFF
- モバイルメニューのテキストの色：#FFFFFF
- テキストの向き：左
- テキストの色：明るい
ドロップダウンメニューの設定
次に、ドロップダウンメニューの設定を変更します。
- ドロップダウンメニューの背景色：＃000000
- ドロップダウンメニューの線の色：＃000000
- モバイルメニューの背景色：＃000000
メニューテキスト設定
最後に、テキスト設定をレイアウトパックと一致させます。
- メニューのフォントの太さ：超太字
- メニューのフォントスタイル：大文字
全幅セクションをグローバルにし、他のページでも使用する
グローバルセクションとして保存
新しいプライマリメニューの作成が完了しました。 他のページでも使用する予定がある場合は、先に進んで、グローバルアイテムとしてDiviライブラリに追加してください。
プライマリメニューバーなしで他のページに追加
この全幅メニューを他のページに簡単に追加できるようになりました。 あなたはその位置を選ぶことができ、あなたはそれに付随する組み込みのデザインオプションで自由に遊ぶことができます！
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
最終的な考え
このユースケースのブログ投稿では、ページ上部のプライマリメニューバーを全幅メニューモジュールに置き換える方法を紹介しました。 この方法を適用すると、ページの好きな場所にメニューを自由に配置できます。 さらに、Diviの組み込みオプションを使用してスタイルを設定することもできます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。