Vil du legge til et hamburgerikon i Menymodulen til Divi ?
Hvis du bygger inn overskriften din Divi, det er flere måter å gjøre dette på.
Vi vil vise deg hvordan du legger til et hamburgerikon i menymodulen til Divi. Dette hamburgerikonet vises allerede som standard på mindre skjermer. Men i denne opplæringen vil vi sørge for at et hamburgerikon også vises på skrivebordet.
Dette gir et minimalt utseende til overskriften din samtidig som det legger til interaksjon.
La oss gå.
undersøkelsen
Før du dykker inn i denne opplæringen, la oss ta en rask titt på resultatet.
Last ned DIVI nå!!!
Lag en ny global topptekstmal med Divi Builder
Gå til Divi Theme Builder
Fra WordPress-dashbordet, gå til 'Divi > Temabygger' klikk deretter "Legg til global overskrift"
Legg til en ny global overskrift
En rullegardinmeny vises. For å begynne å bygge fra bunnen av, fortsett ved å velge "Bygg global topptekst".
Utforming av det globale headerdesignet
Seksjonsinnstillinger
Bakgrunnsfarge
Når du er i maleditoren, er det på tide å begynne å designe overskriften. Du vil legge merke til at det allerede er en seksjon. Åpne seksjonsinnstillingene og legg til en bakgrunnsfarge.
- Bakgrunnsfarge: #f6f9fb
avstanden
Bytt til fane utforming i seksjonen og endre følgende parametere.
- Polstring (øverst og bunn): 0px
Legg til en ny linje
Struktur av kolonnen
Fortsett ved å legge til en ny rad ved å bruke følgende kolonnestruktur:
dimensjonering
Åpne linjeinnstillingene, gå til fanen utforming og endre maksimal bredde i størrelsesinnstillingene.
- Maks bredde: 1px
avstanden
Endre deretter topp- og bunnpolstringen i avstandsinnstillingene.
- Polstring (øverst og bunn): 5px
Legg til en menymodul i kolonnen
Velg menyen du vil legge til
Deretter legger du til en menymodul i radkolonnen og velger en dynamisk meny du ønsker.
Last ned logo
Last ned en logo.
Fjern bakgrunnsfarge
Fjern deretter standard hvit bakgrunnsfarge fra modulen.
Innstillinger for menytekst
Bytt til fane utforming av modulen og endre tekstparametrene til menyen tilsvarende:
- Fontmeny: Poppins
- Meny Skriftvekt: Semi fet
- Tekstfarge: #003e51
- Menytekststørrelse: 16px
- Tekstjustering: Høyre
Innstillinger for rullegardinmeny
Endre deretter innstillingene fra rullegardinmenyen.
- Rullegardinmenylinjefarge: #7159c8
Ikoninnstillinger
Endre også ikoninnstillingene.
- Handlevogn Ikon Farge: #670fff
- Søkeikon Farge: #670fff
- Hamburgermenyikon Farge: #670fff
dimensjonering
Gå deretter til størrelsesinnstillingene og tilordne en maksimal bredde på logo.
- logo Maks bredde: 280px
avstanden
Fjern også standard bunnmargen fra modulen.
- Marg (bunn): 0px
Gjør delen klissete
Nå som menyen vår er på plass, vil vi også gjøre delen klissete. Åpne seksjonsinnstillingene, gå til fanen Avansert og bruk følgende innstillinger:
- Sticky Posisjon: Hold deg til toppen
- Offset fra omkringliggende klebrige elementer: JA
- Overgang Standard og Sticky Styles: JA
Bakgrunnsfarge i klebrig tilstand
Endre deretter bakgrunnsfargen til delen til klebrig tilstand.
- Bakgrunnsfarge: #ffffff
Sticky state box skygge
Påfør også en boksskygge på seksjonen.
- Skyggefarge (skrivebord): rgba(0,0,0,0)
- Skyggefarge (klebrig): rgba(0,0,0,0.04)
Lagt til et hamburgerikon i menymodulen
Legg til CSS ID til menymodulen
Først åpner du menymodulinnstillingene, går du til fanen Avansert og tilordne en CSS-ID.
- CSS ID: divi-meny
Legg til en kodemodul under menymodulen
Deretter legger du til en kodemodul under menymodulen.
Legg til skript- og stilkoder
Vi vil bruke CSS og JQuery-kode. For å forberede oss på dette legger vi til stil- og skriptkoder.
Legg til CSS-kode
Vi limer inn følgende linjer med CSS-kode mellom stiltaggene:
.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;
}
Legg til JQuery
Legg til linjer med åpnings-JQuery-kode
Deretter vil vi ha JQuery-koden. Legg til følgende linjer med JQuery-kode mellom skripttaggene:
jQuery(function($){
$(document).ready(function(){
});
});
Lag variabler
Lag noen variabler neste.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Plasser veksleikonet i menymodulen
Deretter plasserer du veksleikonvariabelen i menymodulen ved å bruke følgende kodelinje:
toggleIcon.insertAfter(desktopMenu);
Legg til en klikkfunksjon
Vi legger også til en klikkfunksjon.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Lagre endringer i Divi Theme Builder
Nå som alt er på plass, gjenstår det bare å lagre alle Divi Theme Builder-modifikasjonene og se resultatet!
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en siste titt på sluttresultatet.
Last ned DIVI nå!!!
konklusjonen
I denne artikkelen viste vi deg hvordan du kan bli kreativ med din globale overskrift i Divi Theme Builder.
Spesifikt har vi vist deg hvordan du legger til et hamburgermenyikon på skrivebordet også. Som standard vises et hamburgerikon på nettbrett og mobil.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å fullføre prosjektene for å lage nettsider. Eller se også vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
