Vil du tilføje et hamburgerikon til menumodulet for Divi ?
Hvis du bygger dit header ind Divi, der er flere måder at gøre dette på.
Vi viser dig, hvordan du tilføjer et hamburgerikon til menumodulet Divi. Dette hamburgerikon vises allerede som standard på mindre skærme. Men i denne vejledning vil vi sørge for, at der også vises et hamburgerikon på skrivebordet.
Dette giver et minimalt udseende til din header, samtidig med at den tilføjer interaktion.
Lad os gå.
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på resultatet.
Download DIVI nu!!!
Opret en ny global header-skabelon med Divi Builder
Gå til Divi Theme Builder
Fra WordPress dashboard, gå til 'Divi > Theme Builder' klik derefter 'Tilføj global overskrift'
Tilføj et nyt globalt overskrift
En rullemenu vises. For at begynde at bygge fra bunden, fortsæt ved at vælge "Byg global header".
Design af det globale header-design
Sektionsindstillinger
Baggrundsfarve
Når du først er i skabeloneditoren, er det tid til at begynde at designe headeren. Du vil bemærke, at der allerede er et afsnit. Åbn sektionsindstillingerne og tilføj en baggrundsfarve.
- Baggrundsfarve: #f6f9fb
afstand
Skift til fanen Design i afsnittet og ændre følgende parametre.
- Polstring (top og bund): 0px
Tilføj en ny linje
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Åbn linjeindstillingerne, gå til fanen Design og ændre den maksimale bredde i størrelsesindstillingerne.
- Maks. bredde: 1px
afstand
Skift derefter top- og bundpolstringen i afstandsindstillingerne.
- Polstring (top og bund): 5px
Tilføj et menumodul til kolonnen
Vælg den menu, der skal tilføjes
Tilføj derefter et menumodul til rækkekolonnen og vælg en dynamisk menu efter eget valg.
Download logo
Download en logo.
Fjern baggrundsfarve
Fjern derefter standard hvid baggrundsfarve fra modulet.
Menutekstindstillinger
Skift til fanen Design af modulet og ændre tekstparametrene i menuen i overensstemmelse hermed:
- Skrifttypemenu: Poppins
- Menuskrifttypevægt: Semi fed
- Tekstfarve: #003e51
- Menutekststørrelse: 16px
- Tekstjustering: Højre
Indstillinger for rullemenu
Skift derefter indstillingerne fra rullemenuen.
- Rullemenulinjefarve: #7159c8
Ikonindstillinger
Skift også ikonindstillingerne.
- Indkøbskurv Ikon Farve: #670fff
- Søg ikon farve: #670fff
- Hamburger Menu Ikon Farve: #670fff
dimensionering
Gå derefter til størrelsesindstillingerne og tildel en maksimal bredde på logo.
- Logo Maks. bredde: 280px
afstand
Fjern også standard bundmargen fra modulet.
- Margen (bund): 0px
Gør sektionen klæbrig
Nu hvor vores menu er på plads, gør vi også sektionen klistret. Åbn sektionsindstillingerne, gå til fanen Avanceret og anvend følgende indstillinger:
- Sticky Position: Hold dig til toppen
- Forskydning fra omkringliggende klæbrige elementer: JA
- Overgangsstandard og Sticky Styles: JA
Baggrundsfarve i klæbrig tilstand
Skift derefter baggrundsfarven for afsnittet til klæbrig tilstand.
- Baggrundsfarve: #ffffff
Sticky state box skygge
Påfør også en kasseskygge på sektionen.
- Skyggefarve (skrivebord): rgba(0,0,0,0)
- Skyggefarve (klæbende): rgba(0,0,0,0.04)
Tilføjet et hamburgerikon til menumodulet
Tilføj CSS ID til menumodulet
Åbn først menumodulets indstillinger, gå til fanen Avanceret og tildel et CSS ID.
- CSS ID: divi-menu
Tilføj et kodemodul under menumodulet
Tilføj derefter et kodemodul under menumodulet.
Tilføj script- og stiltags
Vi vil bruge CSS og JQuery kode. For at forberede dette tilføjer vi stil- og script-tags.
Tilføj CSS-kode
Vi indsætter følgende linjer med CSS-kode mellem style-tags:
.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;
}
Tilføj JQuery
Tilføj linjer med åbnings-JQuery-kode
Dernæst vil vi have JQuery-koden. Tilføj følgende linjer med JQuery-kode mellem script-tags:
jQuery(function($){
$(document).ready(function(){
});
});
Opret variabler
Opret derefter nogle variabler.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Placer skifte-ikonet i menumodulet
Placer derefter skifteikonvariablen i menumodulet ved hjælp af følgende kodelinje:
toggleIcon.insertAfter(desktopMenu);
Tilføj en klikfunktion
Vi tilføjer også en klikfunktion.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Gem ændringer i Divi Theme Builder
Nu hvor alt er på plads, er der kun tilbage at gemme alle Divi Theme Builder-modifikationerne og se resultatet!
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på slutresultatet.
Download DIVI nu!!!
Konklusion
I denne artikel viste vi dig, hvordan du bliver kreativ med din globale header i Divi Theme Builder.
Specifikt har vi vist dig, hvordan du også tilføjer et hamburgermenuikon på skrivebordet. Som standard vises et hamburgerikon på tablet og mobil.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer for at fuldføre dine hjemmesideoprettelsesprojekter. Eller se også vores guide på WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
