Hoe je een breed mobiel Divi-menu op WordPress maakt

Het maken van een breed mobiel menu voor uw WordPress-site met Divi kan de gebruikerservaring op mobiele apparaten aanzienlijk verbeteren. Het standaard hamburgermenu schiet vaak tekort voor complexe navigatiebehoeften. Dit artikel begeleidt u bij het aanpassen van uw Divi-menu om een ​​mobiel menu over de volledige breedte te maken dat zowel functioneel als visueel aantrekkelijk is. We zullen het gebruik van de Theme Builder, het aanpassen van de menumodule en het toepassen van aangepaste CSS verkennen om het gewenste resultaat te bereiken. Of u nu werkt met een child theme of rechtstreeks in Divi's Theme Customizer, deze technieken helpen u bij het maken van een mobiele navigatie die opvalt ten opzichte van het standaard Divi-menu.

Waarom een ​​breed Divi-menu gebruiken op mobiele apparaten

In de huidige mobiele wereld is het cruciaal om de navigatie van uw website te optimaliseren voor mobiele apparaten. Hoewel het standaard Divi-menu met het hamburgerpictogram goed werkt voor eenvoudige sites, kan een breed mobiel menu verschillende voordelen bieden:

1. Verbeterde zichtbaarheid: een breed menu benut de volledige schermbreedte, waardoor menu-items beter opvallen en gemakkelijker te lezen zijn op kleinere schermen.
2. Verbeterde gebruikerservaring: doordat er meer opties tegelijk worden weergegeven, kunnen gebruikers efficiënter door uw site navigeren, zonder dat ze steeds een compact hamburgermenu hoeven te openen en te sluiten.
3. Aanpassingsmogelijkheden: Dankzij het uitgebreide mobiele menu kunt u de menustijlen beter aanpassen, zoals de achtergrondkleur, de lettergrootte van het menu en zelfs de integratie van social media-pictogrammen.
4. Consistentie van het merk: U kunt de visuele identiteit van uw site op zowel de desktop- als mobiele versie behouden door het mobiele menu aan te passen aan uw algehele ontwerp.
5. Minder klikken: Gebruikers hebben toegang tot alle primaire menu-items zonder dat ze nog een keer hoeven te tikken. Hierdoor verloopt hun bezoek aan uw site gestroomlijnder.
6. Veelzijdigheid: Brede menu's bieden ruimte voor complexere navigatiestructuren, waaronder megamenu's, die lastig te implementeren zijn in een traditioneel mobiel menu.
7. Onderscheidend ontwerp: een aangepast menu onderscheidt uw site van sites die het standaard Divi-menu gebruiken, wat de betrokkenheid en retentie van gebruikers kan vergroten.

Door gebruik te maken van Divi's Theme Builder en aangepaste CSS toe te passen, kunt u een mobiel menu maken dat er niet alleen geweldig uitziet, maar ook de algehele mobiele gebruikerservaring van uw WordPress-site verbetert.

Hoe maak je een breed Divi mobiel menu

Voor degenen die bekend zijn met Divi Theme Builder tutorials, is een veelvoorkomende functie die ontbreekt in de standaard header de optie voor het menu op volledig scherm. Hoewel het lastig is om te ontwikkelen, is deze stapsgewijze tutorial ontworpen om gebruikers te helpen een boeiende ervaring met het menu op volledig scherm te creëren.

CodeWatcher heeft een uitgebreide collectie Divi-tutorials, die oplossingen bieden voor problemen waar Divi-gebruikers vaak mee te maken krijgen. Kijk rond voor meer.

Thema Builder-header

Om dit te laten werken, moet de Menu-module worden gebruikt binnen een Theme Builder-headersjabloon. U bent klaar om te beginnen als u al bekend bent met de Divi Theme Builder.

De eerste stap is om naar Divi > Theme Builder te navigeren en de header template toe te voegen of te bewerken. Om het menu site-breed toe te passen, gebruikt u de eerste template om een ​​globale header te maken. Als u wilt dat het op specifieke pagina's verschijnt of het wilt testen, maakt u een nieuwe template en past u een aangepaste header toe.

Menu Module Aanpassing

Zodra u zich in de header-sjabloon bevindt, begint u met het toevoegen van een rij met één kolom en het invoegen van de Menu-module. Hoewel er geen verplichte aanpassingen nodig zijn voor de instellingen van de Menu-module, zijn er enkele aanbevolen aanpassingen:

1. Stel de tekstkleur in via het tabblad Ontwerp > Menu Tekst.
2. Vergroot de lettergrootte van de tekst via het tabblad Ontwerp > Menu Tekst en pas deze aan voor Desktop, Tablet en Telefoon.
3. Stel de tekstregelhoogte in op 1,2 em.
4. Pas de kleur van het hamburgermenu aan via het tabblad Ontwerp > Pictogrammen.
5. Vergroot de lettergrootte van het hamburgermenupictogram in het tabblad Ontwerp > Pictogrammen.

Deze aanpassingen zijn optioneel, maar ze kunnen je helpen om snel een indrukwekkend ontwerp te maken. Scroll naar beneden voor een screenshot van het gemaakte menu. Het is werkelijk verbluffend!

Aangepaste CSS voor de sectie

Nu, in plaats van een CSS-klasse direct aan de module toe te voegen, passen we de aangepaste CSS-klasse toe op de blauwe sectie. Dit is dezelfde sectie waar de Menu-module in de vorige stap werd toegevoegd.

Om dit te doen, opent u de sectie-instellingen, navigeert u naar het tabblad Geavanceerd en vouwt u de schakelaar Aangepaste CSS & ID's uit. Voer in het invoerveld CSS-klasse 'pa-fullscreen-menu' in.

Nu komt het belangrijkste tutorial-onderdeel: de gratis codefragmenten! Deze code voert verschillende functies uit, dus het is aan te raden om zowel de videotutorial als de codecommentaren te raadplegen voor een volledig begrip. Anders kunt u de code gewoon kopiëren en plakken.

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

U kunt de codes toepassen via de volgende systemen:

• Divi Assistant-plug-in : als u de Divi Assistant-plug-in gebruikt, plakt u de code in het CSS-tabblad in het aangepaste codevenster van Divi Visual Builder.
• Child Theme : Voeg de code toe aan het style.css- bestand voor degenen die een child theme gebruiken . Als u geen child theme hebt, kunt u er een rechtstreeks op uw site genereren of het gratis meegeleverde child theme downloaden.
• Integratie van Divi-themaopties : U kunt de code ook plakken in het vak Divi > Themaopties > Aangepaste CSS-code.

En klaar!

Afronden

Het maken van een breed mobiel menu voor uw Divi WordPress-site verbetert de gebruikerservaring op mobiele apparaten, terwijl de esthetische aantrekkingskracht van uw site behouden blijft. Door de Divi Theme Builder te gebruiken, de menumodule aan te passen en aangepaste CSS toe te passen, kunt u het standaard hamburgermenu transformeren in een full-width navigatiekrachtpatser.

Deze aanpassing verbetert niet alleen de zichtbaarheid en toegankelijkheid, maar biedt ook meer flexibiliteit in het ontwerp, door elementen als social media-iconen en aangepaste achtergrondkleuren te integreren. Vergeet niet dat de sleutel tot succes ligt in het in evenwicht brengen van functionaliteit en ontwerp. Of u nu een doorgewinterde ontwikkelaar bent of een Divi-beginner, deze technieken bieden de tools om een ​​mobiel menu te maken dat opvalt in het drukke digitale landschap.