Vil du lage en global overskrift med fullskjermmenymodulen i Divi?
Overskriften er et av de viktigste elementene i enhver nettstedet Web og er i hjertet av brukeropplevelsen. Navigasjonsmenyen gir brukerne en ide om hva de kan forvente å finne på din nettstedet Web og hjelper dem med å finne informasjonen de trenger.
I tillegg kan en sekundær menylinje være et flott sted å fremheve en oppfordring til handling eller til fremme et tilbud. For ikke å nevne at overskriften er en av de viktigste delene av din nettstedet Web, fordi det vanligvis vises på hver side. Dette er en flott mulighet til å vise frem merkevarebyggingen din og lage en header som er i samsvar med utformingen av resten av nettstedet ditt.
Divis Theme Builder-alternativer lar deg lage en tilpasset global overskrift og tilpasse utseendet til overskriften og menymodulene på tvers av hele nettstedet.
I denne opplæringen skal vi vise deg hvordan du lager en global overskrift ved hjelp av Divis fullskjerms menymodul.
La oss begynne!
undersøkelsen
Her er en forhåndsvisning av den globale headeren vi skal designe.
Åpne temabyggeren
Siden vi bygger en global overskrift i dette eksemplet, la oss navigere til "Theme Builder", som du finner i WordPress Divi-menyen. Velg Legg til global overskrift, og velg deretter Opprett global overskrift.
Lag den sekundære menylinjen
Når du først åpner det globale overskriftsoppsettet, leveres det forhåndslastet med en vanlig seksjon. Vi vil endre dette til å være vår sekundære menylinje, som vil sitte over menyen i full bredde og inkludere handlingsfremmende tekst og en knapp.
Først åpner du seksjonsinnstillingene og legger til bakgrunnsfargen.
- Bakgrunn: #92A8A1
Deretter seksjonsmarginen.
- Inner Margin Vertex: 0px
- Nedre intern margin: 0px
Sett nå inn en rad. For dette eksemplet bruker vi oppsettet vist nedenfor.
I radinnstillingene, under Størrelse på Stil-fanen, harmoniser kolonnehøydene.
- Harmoniser kolonnehøyder: JA
Deretter setter du topp- og bunnmargen som følger:
- Øvre indre margin: 5px
- Nederste indre margin: 5px
Siden vi vil at våre sekundære overskriftselementer skal justeres vertikalt, legger vi til noe tilpasset CSS til hovedradelementet.
1.
align-items:center;
Nå som linjen vår er konfigurert, kan vi sette inn modulene for vår innhold. Sett først inn en tekstmodul på venstre side.
Endre innhold av tekst. Dette er det perfekte stedet å inkludere en Call to Action eller til fremme et tilbud.
- Tekst: "Bli med på vår e-postliste for å motta 10 % rabatt på bestillingen din!" »
Gå til Stil-fanen i tekstmodulen og endre parameterne som følger:
- Font "Tekst": Poppins
- "Tekst" Dim lys: Middels
- "Tekst" tekstfarge: #FFFFFF
Deretter legger du til Button-modulen til høyre.
Legg til knappetekst.
- Tekst: "Få et gratis tilbud"
Juster knappen i midten i kategorien Stil.
- Knappjustering: Senter
La oss nå tilpasse utseendet til knappen.
- Bruk egendefinerte stiler for "Knapp": Ja
- Knappens tekststørrelse: 14px
- Tekstfarge på knapp: #FFFFFF
- Bakgrunnsknapp: #2F5349
- Knappkantbredde: 0px
- Kantradiusknapp: 50 px
- Knappebokstavavstand: 1px
- Button Font: Poppins
Legg til fullskjermmenymodulen
Nå som sekundærmenyen er utformet, kan vi gå videre til hovedmenyen. Vi bygger menyen ved å bruke fullskjermmenymodulen. Legg til en ny fullskjermseksjon i den globale overskriften.
Velg og sett inn fullskjermmenymodul
Deretter tilpasser vi innstillingene for fullskjermmeny.
- Aktiv lenke farge: #2F5349
- Fontmeny: Poppins
- Dim lys-meny: Semi fet
- Kopier stilmeny: TT
- Menytekstfarge: #000000
- Hover Meny tekstfarge: #2F5349
- Menytekststørrelse: 15px
- Menybokstavavstand: 2px
Endre hamburgermenyikonets farge til svart.
- Hamburgermenyikon Farge: #000000
Før vi legger til logoen i menyen vår, la oss endre størrelsesalternativene. Vi vil bruke Divis innebygde responsive alternativer for å sette en annen maksimal høyde for PC og mobil.
- Maksimal logohøyde på PC: 3vw
- Maksimal logohøyde på mobil: 6vw
Legg nå til logoen din i fullskjermmenyen.
Til slutt ønsker vi at hovedmenyen forblir øverst på skjermen når brukeren ruller gjennom nettsiden, så vi bruker Divis innebygde sticky sticky-innstillinger for dette.
- Sticky Posisjon: Stick på toppen
Med det er vårt globale headerdesign komplett.
Opprett en ny side med et forhåndsdefinert oppsett
For å se overskriften og menyen i full bredde i aksjon, la oss lage en ny side med et forhåndsdefinert oppsett fra Divi-biblioteket. For dette eksemplet vil vi bruke gulvhjemmesiden fra pakken planløsning.
Legg til en ny side på nettstedet ditt og gi den en tittel, og velg deretter alternativet Bruk Divi Builder.
Vi bruker en forhåndsdefinert layout fra Divi-biblioteket for dette eksemplet, så velg Velg layout.
Finn og velg "Startside for gulv"-oppsettet.
Velg "Velg layout" for å legge til oppsettet på siden din.
Nå er designet ferdig!
Endelig resultat
konklusjonen
Som vi sa ovenfor, er overskriften og navigasjonsmenyen i hjertet av nettstedets brukeropplevelse. Du har nå sett hvor enkelt det er å designe en fantastisk helhetlig header med Divis "Full Screen Menu"-modul.
Heldigvis gir Divis temabygger deg kontroll over alle aspekter av nettstedets meny og overskrift, og du kan lage helt tilpassede og unike design med bare noen få klikk.
Har du brukt Divis globale topptekstalternativer for å tilpasse overskriften og navigasjonsmenyen? Fortell oss hva du synes i kommentarene!
