WordPress で幅広のモバイル Divi メニューを作成する方法

Divi を使用して WordPress サイトに幅広いモバイル メニューを作成すると、モバイル デバイスでのユーザー エクスペリエンスが大幅に向上します。デフォルトのハンバーガー メニューでは、複雑なナビゲーションのニーズに対応できないことがよくあります。この記事では、Divi メニューをカスタマイズして、機能的かつ視覚的に魅力的なフル幅のモバイル メニューを作成する方法について説明します。テーマ ビルダーの使用、メニュー モジュールの調整、カスタム CSS の適用など、目的の結果を得るための方法を説明します。子テーマを使用する場合でも、Divi のテーマ カスタマイザーで直接作業する場合でも、これらのテクニックは、デフォルトの Divi メニューから目立つモバイル フレンドリーなナビゲーションを作成するのに役立ちます。

モバイルデバイスでワイド Divi メニューを使用する理由

今日のモバイルファーストの世界では、Web サイトのナビゲーションをモバイル デバイス向けに最適化することが重要です。ハンバーガー アイコン付きのデフォルトの Divi メニューはシンプルなサイトに適していますが、幅の広いモバイル メニューには次のような利点があります。

1. 視認性の向上: ワイド メニューは画面の幅全体を活用するため、メニュー項目がより目立ち、小さい画面でも読みやすくなります。
2. 強化されたユーザー エクスペリエンス: 一度に多くのオプションを表示することで、ユーザーはコンパクトなハンバーガー メニューを繰り返し開いたり閉じたりすることなく、より効率的にサイトをナビゲートできます。
3. カスタマイズの機会: 幅の広いモバイル メニューにより、背景色、メニューのフォント サイズ、さらにはソーシャル メディア アイコンの組み込みなど、メニュー スタイルをより柔軟にカスタマイズできます。
4. ブランドの一貫性: モバイル メニューを全体的なデザインに合わせてカスタマイズすることで、デスクトップ バージョンとモバイル バージョン間でサイトのビジュアル アイデンティティを維持できます。
5. クリック数の削減: ユーザーは追加のタップなしですべての主要なメニュー項目にアクセスできるため、サイト内の移動が効率化されます。
6. 汎用性: ワイド メニューは、従来のモバイル メニューでは実装が難しいメガ メニューなどの、より複雑なナビゲーション構造に対応できます。
7. 独特なデザイン: カスタムワイドメニューにより、デフォルトの Divi メニューを使用しているサイトとは一線を画し、ユーザーのエンゲージメントと維持率が向上する可能性があります。

Divi のテーマビルダーを活用してカスタム CSS を適用することで、見栄えが良いだけでなく、WordPress サイトの全体的なモバイル ユーザー エクスペリエンスを向上させるモバイル メニューを作成できます。

幅広の Divi モバイル メニューを作成する方法

Divi テーマ ビルダーのチュートリアルに詳しい方ならご存知でしょうが、デフォルトのヘッダーに欠けている一般的な機能は、フルスクリーン メニュー オプションです。開発は難しいですが、このステップ バイ ステップのチュートリアルは、ユーザーが魅力的なフルスクリーン メニュー エクスペリエンスを作成できるように設計されています。

CodeWatcher には Divi チュートリアルの広範なコレクションがあり、Divi ユーザーが頻繁に直面する問題の解決策が提供されています。さらに詳しくご覧ください。

テーマビルダーヘッダー

これを機能させるには、メニュー モジュールをテーマ ビルダーのヘッダー テンプレート内で使用する必要があります。Divi テーマ ビルダーにすでに精通している場合は、すぐに開始できます。

最初のステップは、Divi > Theme Builder に移動し、ヘッダー テンプレートを追加または編集することです。サイト全体にメニューを適用するには、最初のテンプレートを使用してグローバル ヘッダーを作成します。特定のページに表示したい場合やテストしたい場合は、新しいテンプレートを作成し、カスタム ヘッダーを適用します。

メニューモジュールの調整

ヘッダー テンプレートに入ったら、まず 1 列の行を追加し、メニュー モジュールを挿入します。メニュー モジュールの設定には必須の調整は必要ありませんが、推奨される調整がいくつかあります。

1. 「デザイン」タブ > 「メニュー テキスト」トグルでテキストの色を設定します。
2. [デザイン] タブ > [メニュー テキスト] トグルでテキストのフォント サイズを大きくし、デスクトップ、タブレット、電話に合わせて調整します。
3. テキスト行の高さを 1.2em に設定します。
4. 「デザイン」タブ > 「アイコン」トグルでハンバーガー メニューの色をカスタマイズします。
5. [デザイン] タブ > [アイコン] トグルで、ハンバーガー メニュー アイコンのフォント サイズを大きくします。

これらの調整はオプションですが、印象的なデザインを素早く実現するのに役立ちます。下にスクロールして、作成されたメニューのスクリーンショットをご覧ください。本当に素晴らしいです!

セクションへのカスタム CSS

ここで、モジュールに直接 CSS クラスを追加する代わりに、青いセクションにカスタム CSS クラスを適用します。これは、前の手順でメニュー モジュールが追加されたセクションと同じです。

これを行うには、セクション設定を開き、「詳細」タブに移動して、「カスタムCSSとID」トグルを展開します。CSSクラスの入力フィールドに「pa-fullscreen-menu」と入力します。

次は、チュートリアルの最も重要な部分、つまり無料のコード スニペットです。このコードは複数の機能を実行するため、完全に理解するにはビデオ チュートリアルとコード コメントの両方を参照することをお勧めします。それ以外の場合は、コードをコピーして貼り付けるだけでかまいません。

/*align the hamburger menu to the right right*/

.pa-fullscreen-menu .et_pb_menu__wrap {
	justify-content: flex-end !important;
}


/*hide the desktop version of the menu*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
	display: none !important;
}


/*show the mobile version of the menu on desktop*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
	display: block !important;
	align-items: center !important;
}


/*style the opened menu*/

.pa-fullscreen-menu .opened #mobile_menu1 {
	width: 100vw !important;
	position: fixed !important;
	top: 0em !important;
	left: 0vw !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	flex-direction: column !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: visibility 0.3s, opacity 0.3s ease-in-out;
	padding: 0 !important;
}


/*style the closed menu*/

.pa-fullscreen-menu .closed #mobile_menu1 {
	background-color: #fff !important;
	text-align: center !important;
	width: 100vw !important;
	position: fixed !important;
	left: 100vw !important;
	top: 0em !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column !important;
	transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
	opacity: 0 !important;
	visibility: hidden !important;
}


/*remove the bullet points from the list items*/

.pa-fullscreen-menu #mobile_menu1 li {
	list-style: none !important;
	text-align: center !important;
	width: 100%
}


/*move the menu to the top above other elements*/

.pa-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
	z-index: 999999 !important;
}


/*change the opened menu icon*/

.pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
	content: "\4d" !important;
}


/*make the hamburger menu fixed position on mobile*/

.pa-fullscreen-menu .opened .mobile_menu_bar {
	position: fixed !important;
}


/*remove the default blue border top on the mobile menu*/

.pa-fullscreen-menu .et_mobile_menu {
	border-top: none;
}


/*remove the default background color on menu items*/

.pa-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*remove the default hover background color and adjust opacity*/

.et_mobile_menu li a:hover {
	background-color: transparent;
	opacity: 1;
}


/*remove the default border bottom on menu items*/

.pa-fullscreen-menu .et_mobile_menu li a {
	border-bottom: none;
}

以下のシステムを通じてコードを適用できます -

• Divi Assistant プラグイン: Divi Assistant プラグインを使用する場合は、Divi Visual Builder のカスタム コード ウィンドウ内の CSS タブにコードを貼り付けます。
• 子テーマ:子テーマを使用している場合は、 style.cssファイルにコードを追加します。子テーマがない場合は、サイト上で直接生成するか、提供されている無料の子テーマをダウンロードすることができます。
• Divi テーマ オプションの統合: または、Divi > テーマ オプション > カスタム CSS コード ボックスにコードを貼り付けます。

これで完了です！

まとめ

Divi WordPress サイトに幅広のモバイル メニューを作成すると、サイトの美観を維持しながら、モバイル デバイスでのユーザー エクスペリエンスが向上します。Divi テーマ ビルダーを利用し、メニュー モジュールを調整し、カスタム CSS を適用することで、デフォルトのハンバーガー メニューをフル幅の強力なナビゲーションに変えることができます。

このカスタマイズにより、可視性とアクセシビリティが向上するだけでなく、ソーシャル メディア アイコンやカスタム背景色などの要素を組み込むことで、デザインの柔軟性も高まります。成功の鍵は、機能性とデザインのバランスにあることを忘れないでください。熟練した開発者でも、Divi 初心者でも、これらのテクニックは、混雑したデジタル環境の中で目立つモバイル メニューを作成するためのツールを提供します。