Wil je een hamburger icoon toevoegen aan de Menu module van Divi ?
Als je je header inbouwt Divi, zijn er verschillende manieren om dit te doen.
We laten u zien hoe u een hamburgerpictogram toevoegt aan de Menumodule van Divi. Dit hamburgerpictogram verschijnt al standaard op kleinere schermen. Maar in deze tutorial zorgen we ervoor dat er ook een hamburgerpictogram op het bureaublad verschijnt.
Dit geeft een minimale uitstraling aan uw header en voegt ook interactie toe.
Laten we gaan.
overzicht
Laten we, voordat we in deze tutorial duiken, even naar het resultaat kijken.
Download DIVI nu!!!
Maak een nieuwe Global Header-sjabloon met de Divi Builder
Ga naar Divi Theme Builder
Ga vanuit het WordPress-dashboard naar 'Divi > Themabouwer' dan klikken 'Algemene koptekst toevoegen'
Voeg een nieuwe algemene koptekst toe
Er verschijnt een vervolgkeuzemenu. Om helemaal opnieuw te beginnen met bouwen, gaat u verder door te selecteren “Bouw globale kop”.
Het ontwerp van de globale koptekst ontwerpen
Sectie-instellingen
Achtergrond kleur
Eenmaal in de sjablooneditor is het tijd om te beginnen met het ontwerpen van de koptekst. U zult merken dat er al een sectie is. Open de sectie-instellingen en voeg een achtergrondkleur toe.
- Achtergrondkleur: #f6f9fb
tussenruimte
Overschakelen naar tabblad Design van de sectie en wijzig de volgende parameters.
- Opvulling (boven en onder): 0px
Voeg een nieuwe regel toe
Structuur van de kolom
Ga verder door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:
sizing
Open de lijninstellingen, ga naar het tabblad Design en wijzig de maximale breedte in de maatinstellingen.
- Maximale breedte: 1px
tussenruimte
Wijzig vervolgens de opvulling aan de boven- en onderkant in de instellingen voor afstand.
- Opvulling (boven en onder): 5px
Voeg een menumodule toe aan de kolom
Selecteer het menu om toe te voegen
Voeg vervolgens een menumodule toe aan de rijkolom en selecteer een dynamisch menu naar keuze.
Logo downloaden
Download een logo.
Achtergrondkleur verwijderen
Verwijder vervolgens de standaard witte achtergrondkleur uit de module.
Menu tekst instellingen
Overschakelen naar tabblad Design van de module en wijzig de tekstparameters van het menu dienovereenkomstig:
- Lettertypemenu: Poppins
- Menu Lettergewicht: Semi Vet
- Tekstkleur: #003e51
- Grootte menutekst: 16px
- Tekstuitlijning: Rechts
Vervolgkeuzemenu-instellingen
Wijzig vervolgens de instellingen in het vervolgkeuzemenu.
- Kleur dropdownmenu: #7159c8
Pictogram instellingen
Wijzig ook de pictograminstellingen.
- Kleur winkelwagenpictogram: #670fff
- Kleur van zoekpictogram: #670fff
- Hamburger Menu Pictogram Kleur: #670fff
sizing
Ga dan naar de maatinstellingen en wijs een maximale breedte toe van logo.
- logo Maximale breedte: 280px
tussenruimte
Verwijder ook de standaard ondermarge van de module.
- Marge (onder): 0px
Sectie kleverig maken
Nu ons menu klaar is, maken we de sectie ook plakkerig. Open de sectie-instellingen, ga naar het tabblad Geavanceerd en pas de volgende instellingen toe:
- Kleverige positie: blijf bij de top
- Offset van omringende plakkerige elementen: JA
- Overgang Standaard en Sticky Stijlen: JA
Achtergrondkleur in plakkerige toestand
Verander vervolgens de achtergrondkleur van de sectie in de plakkerige staat.
- Achtergrondkleur: #ffffff
Sticky state box schaduw
Pas ook een kaderschaduw toe op de sectie.
- Schaduwkleur (desktop): rgba(0,0,0,0)
- Schaduwkleur (kleverig): rgba(0,0,0,0.04)
Een hamburgerpictogram toegevoegd aan de menumodule
CSS-ID toevoegen aan menumodule
Open eerst de instellingen van de menumodule, ga naar het tabblad Geavanceerd en wijs een CSS-ID toe.
- CSS-ID: divi-menu
Voeg een codemodule toe onder de menumodule
Voeg vervolgens een Code-module toe onder de Menu-module.
Script- en stijltags toevoegen
We zullen CSS- en JQuery-code gebruiken. Om ons hierop voor te bereiden, voegen we stijl- en scripttags toe.
CSS-code toevoegen
We zullen de volgende regels CSS-code tussen de stijltags plakken:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
JQuery toevoegen
Voeg regels toe om JQuery-code te openen
Vervolgens hebben we de JQuery-code. Voeg de volgende regels JQuery-code toe tussen de scripttags:
jQuery(function($){
$(document).ready(function(){
});
});
Variabelen maken
Maak hierna enkele variabelen aan.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Plaats wisselpictogram in de menumodule
Plaats vervolgens de toggle-pictogramvariabele in de menumodule met behulp van de volgende regel code:
toggleIcon.insertAfter(desktopMenu);
Een klikfunctie toevoegen
We voegen ook een klikfunctie toe.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Wijzigingen in Divi Theme Builder opslaan
Nu alles op zijn plaats is, hoeft u alleen nog alle Divi Theme Builder-aanpassingen op te slaan en het resultaat te bekijken!
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken naar het eindresultaat.
Download DIVI nu!!!
Conclusie
In dit artikel hebben we je laten zien hoe je creatief kunt worden met je globale header in Divi Theme Builder.
In het bijzonder hebben we u laten zien hoe u ook een hamburgermenupictogram op het bureaublad kunt toevoegen. Op tablet en mobiel wordt standaard een hamburger icoon getoond.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig heeft om uw projecten voor het maken van websites te voltooien. Of zie ook onze gids op WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
