So erstellen Sie ein breites mobiles Divi-Menü in WordPress

Das Erstellen eines breiten mobilen Menüs für Ihre WordPress-Site mit Divi kann das Benutzererlebnis auf Mobilgeräten erheblich verbessern. Das standardmäßige Hamburger-Menü genügt komplexen Navigationsanforderungen oft nicht. Dieser Artikel führt Sie durch die Anpassung Ihres Divi-Menüs, um ein mobiles Menü in voller Breite zu erstellen, das sowohl funktional als auch optisch ansprechend ist. Wir werden die Verwendung des Theme Builders erkunden, das Menümodul anpassen und benutzerdefiniertes CSS anwenden, um das gewünschte Ergebnis zu erzielen. Egal, ob Sie mit einem untergeordneten Design oder direkt im Theme Customizer von Divi arbeiten, diese Techniken helfen Ihnen dabei, eine mobilfreundliche Navigation zu erstellen, die sich vom standardmäßigen Divi-Menü abhebt.

Warum ein breites Divi-Menü auf Mobilgeräten verwenden?

In der heutigen Mobile-First-Welt ist die Optimierung der Navigation Ihrer Website für mobile Geräte von entscheidender Bedeutung. Während das standardmäßige Divi-Menü mit seinem Hamburger-Symbol für einfache Websites gut geeignet ist, kann ein breites mobiles Menü mehrere Vorteile bieten:

1. Verbesserte Sichtbarkeit: Ein breites Menü nutzt die gesamte Bildschirmbreite, sodass Menüelemente deutlicher hervorgehoben und auf kleineren Bildschirmen leichter lesbar sind.
2. Verbessertes Benutzererlebnis: Durch die gleichzeitige Anzeige mehrerer Optionen können Benutzer effizienter auf Ihrer Site navigieren, ohne wiederholt ein kompaktes Hamburger-Menü öffnen und schließen zu müssen.
3. Anpassungsmöglichkeiten: Ein breites mobiles Menü ermöglicht eine umfassendere Anpassung der Menüstile, einschließlich Hintergrundfarbe, Menüschriftgröße und sogar die Einbindung von Social-Media-Symbolen.
4. Markenkonsistenz: Sie können die visuelle Identität Ihrer Site über die Desktop- und Mobilversionen hinweg beibehalten, indem Sie das mobile Menü an Ihr Gesamtdesign anpassen.
5. Weniger Klicks: Benutzer können auf alle primären Menüelemente zugreifen, ohne zusätzlich tippen zu müssen. Das vereinfacht ihre Navigation durch Ihre Site.
6. Vielseitigkeit: Breite Menüs können komplexere Navigationsstrukturen aufnehmen, darunter auch Megamenüs, deren Implementierung in einem herkömmlichen mobilen Menü eine Herausforderung darstellt.
7. Markantes Design: Ein benutzerdefiniertes Menü hebt Ihre Site von denen ab, die das standardmäßige Divi-Menü verwenden, und erhöht möglicherweise die Benutzerinteraktion und -bindung.

Indem Sie den Theme Builder von Divi nutzen und benutzerdefiniertes CSS anwenden, können Sie ein mobiles Menü erstellen, das nicht nur großartig aussieht, sondern auch das allgemeine mobile Benutzererlebnis Ihrer WordPress-Site verbessert.

So erstellen Sie ein breites Divi-Mobilmenü

Wer mit den Tutorials zum Divi Theme Builder vertraut ist, wird feststellen, dass in der Standardkopfzeile häufig die Vollbildmenüoption fehlt. Obwohl die Entwicklung eine Herausforderung darstellt, soll dieses Schritt-für-Schritt-Tutorial Benutzern dabei helfen, ein ansprechendes Vollbildmenüerlebnis zu erstellen.

CodeWatcher verfügt über eine umfangreiche Sammlung von Divi-Tutorials und bietet Lösungen für Probleme, mit denen Divi-Benutzer häufig konfrontiert werden. Schauen Sie sich um, um mehr zu erfahren.

Theme Builder-Kopfzeile

Damit dies funktioniert, muss das Menümodul innerhalb einer Theme Builder-Header-Vorlage verwendet werden. Wenn Sie bereits mit dem Divi Theme Builder vertraut sind, können Sie loslegen.

Der erste Schritt besteht darin, zu Divi > Theme Builder zu navigieren und die Kopfzeilenvorlage hinzuzufügen oder zu bearbeiten. Um das Menü auf der gesamten Site anzuwenden, verwenden Sie die erste Vorlage, um eine globale Kopfzeile zu erstellen. Wenn Sie möchten, dass es auf bestimmten Seiten angezeigt wird, oder wenn Sie es testen möchten, erstellen Sie eine neue Vorlage und wenden Sie eine benutzerdefinierte Kopfzeile an.

Menü Modul Anpassung

Sobald Sie sich in der Kopfzeilenvorlage befinden, fügen Sie zunächst eine einspaltige Zeile hinzu und fügen das Menümodul ein. Obwohl für die Einstellungen des Menümoduls keine zwingenden Anpassungen erforderlich sind, gibt es einige empfohlene Optimierungen:

1. Legen Sie die Textfarbe unter der Registerkarte „Entwurf“ > „Menütext-Umschalter“ fest.
2. Erhöhen Sie die Schriftgröße auf der Registerkarte „Entwurf“ > „Menütext“ und passen Sie sie für Desktop, Tablet und Telefon an.
3. Stellen Sie die Textzeilenhöhe auf 1,2em ein.
4. Passen Sie die Farbe des Hamburger-Menüs auf der Registerkarte „Entwurf“ > „Symbole“ an.
5. Erhöhen Sie die Schriftgröße des Hamburger-Menüsymbols auf der Registerkarte „Entwurf“ > „Symbole“.

Diese Anpassungen sind optional, können Ihnen aber dabei helfen, schnell ein beeindruckendes Design zu erstellen. Scrollen Sie nach unten, um einen Screenshot des erstellten Menüs anzuzeigen – es ist wirklich atemberaubend!

Benutzerdefiniertes CSS für den Abschnitt

Anstatt nun eine CSS-Klasse direkt zum Modul hinzuzufügen, wenden wir die benutzerdefinierte CSS-Klasse auf den blauen Abschnitt an. Dies ist derselbe Abschnitt, in dem im vorherigen Schritt das Menümodul hinzugefügt wurde.

Öffnen Sie dazu die Abschnittseinstellungen, navigieren Sie zur Registerkarte Erweitert und erweitern Sie den Schalter Benutzerdefinierte CSS und IDs. Geben Sie im Eingabefeld CSS-Klasse „pa-fullscreen-menu“ ein.

Jetzt kommt der wichtigste Teil des Tutorials: die kostenlosen Codeausschnitte! Dieser Code führt mehrere Funktionen aus, daher wird empfohlen, sowohl das Video-Tutorial als auch die Codekommentare zu konsultieren, um ihn vollständig zu verstehen. Andernfalls können Sie den Code einfach kopieren und einfügen.

/*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;
}

Sie können die Codes über die folgenden Systeme anwenden -

• Divi Assistant-Plugin : Wenn Sie das Divi Assistant-Plugin verwenden, fügen Sie den Code in die Registerkarte CSS im Fenster für benutzerdefinierten Code des Divi Visual Builder ein.
• Child-Theme : Fügen Sie den Code zur Datei style.css hinzu, wenn Sie ein Child-Theme verwenden . Wenn Sie kein Child-Theme haben, können Sie entweder direkt auf Ihrer Site eines generieren oder das kostenlos bereitgestellte Child-Theme herunterladen.
• Integration der Divi-Designoptionen : Alternativ können Sie den Code in das Feld Divi > Designoptionen > Benutzerdefinierter CSS-Code einfügen.

Und Sie sind fertig!

Einpacken

Das Erstellen eines breiten mobilen Menüs für Ihre Divi-WordPress-Site verbessert das Benutzererlebnis auf Mobilgeräten und behält gleichzeitig die ästhetische Attraktivität Ihrer Site bei. Indem Sie den Divi Theme Builder verwenden, das Menümodul anpassen und benutzerdefiniertes CSS anwenden, können Sie das standardmäßige Hamburger-Menü in ein Navigations-Kraftpaket in voller Breite verwandeln.

Diese Anpassung verbessert nicht nur die Sichtbarkeit und Zugänglichkeit, sondern ermöglicht auch mehr Flexibilität beim Design, indem Elemente wie Social-Media-Symbole und benutzerdefinierte Hintergrundfarben integriert werden. Denken Sie daran, dass der Schlüssel zum Erfolg darin liegt, Funktionalität und Design in Einklang zu bringen. Egal, ob Sie ein erfahrener Entwickler oder ein Divi-Neuling sind, diese Techniken bieten die Werkzeuge, um ein mobiles Menü zu erstellen, das in der überfüllten digitalen Landschaft hervorsticht.