Kunne du tænke dig at oprette en global header med fuldskærmsmenumodulet i Divi?
Overskriften er et af de vigtigste elementer i enhver Websted og er i hjertet af brugeroplevelsen. Navigationsmenuen giver dine brugere en idé om, hvad de kan forvente at finde på din Websted og hjælper dem med at finde de oplysninger, de har brug for.
Derudover kan en sekundær menulinje være et ideelt sted at fremhæve en opfordring til handling eller til fremme et tilbud. For ikke at nævne, at overskriften er en af de vigtigste dele af din Websted, fordi det normalt vises på hver side. Dette er en fantastisk mulighed for at fremvise din branding og skabe en header, der stemmer overens med designet på resten af din hjemmeside.
Divi's temabygger muligheder giver dig mulighed for at oprette en brugerdefineret overordnet header og tilpasse udseendet af dine header og menumoduler på hele dit websted.
I denne vejledning skal vi vise dig, hvordan du opretter en global header ved hjælp af Divis fuldskærmsmenumodul.
Lad os starte!
undersøgelse
Her er en forhåndsvisning af den globale header, vi skal designe.
Åbn temabyggeren
Da vi bygger en global header i dette eksempel, så lad os navigere til "Theme Builder", som du kan finde i WordPress Divi-menuen. Vælg Tilføj global overskrift, og vælg derefter Opret global overskrift.
Opret den sekundære menulinje
Når du først åbner det globale header-layout, kommer det forudindlæst med en almindelig sektion. Vi vil ændre dette til at være vores sekundære menulinje, som vil sidde over vores menu i fuld bredde og indeholde opfordring til handling-tekst og en knap.
Først skal du åbne sektionsindstillingerne og tilføje baggrundsfarven.
- Baggrund: #92A8A1
Dernæst afsnitsmargenen.
- Indre margin toppunkt: 0px
- Bund intern margin: 0px
Indsæt nu en række. Til dette eksempel vil vi bruge layoutet vist nedenfor.
I rækkeindstillingerne, under Størrelse på fanen Stil, harmoniserer du kolonnehøjderne.
- Harmoniser søjlehøjder: JA
Indstil derefter top- og bundmargener som følger:
- Top indre margin: 5px
- Bund indre margin: 5px
Da vi ønsker, at vores sekundære header-elementer skal justeres lodret, tilføjer vi noget tilpasset CSS til hovedrækkeelementet.
1.
align-items:center;
Nu hvor vores linje er konfigureret, kan vi indsætte modulerne til vores indhold. Indsæt først et tekstmodul i venstre side.
Rediger indhold af tekst. Dette er det perfekte sted at inkludere en Call to Action eller til fremme et tilbud.
- Tekst: "Tilmeld dig vores mailingliste for at modtage 10% rabat på din ordre!" »
Få adgang til fanen Stil i tekstmodulet, og rediger parametrene som følger:
- Skrifttype "Tekst": Poppins
- "Tekst" Dæmpet lys: Medium
- "Tekst" tekstfarve: #FFFFFF
Tilføj derefter knapmodulet til højre.
Tilføj knaptekst.
- Tekst: "Få et gratis tilbud"
Juster knappen i midten på fanen Stil.
- Knapjustering: Center
Lad os nu tilpasse udseendet af knappen.
- Brug tilpassede stilarter til "Knap": Ja
- Knaptekststørrelse: 14px
- Knaptekstfarve: #FFFFFF
- Baggrundsknap: #2F5349
- Knapkantbredde: 0px
- Kantradiusknap: 50px
- Knap bogstavafstand: 1px
- Knapskrifttype: Poppins
Tilføj fuldskærmsmenumodulet
Nu hvor den sekundære menu er designet, kan vi gå videre til hovedmenuen. Vi bygger menuen ved hjælp af modulet Fuldskærmsmenu. Tilføj en ny fuldskærmssektion til den globale overskrift.
Vælg og indsæt Fuldskærmsmenumodul
Dernæst tilpasser vi indstillingerne for fuldskærmsmenuen.
- Aktivt link farve: #2F5349
- Skrifttypemenu: Poppins
- Dim Light Menu: Semi fed
- Kopier stilmenu: TT
- Menutekstfarve: #000000
- Hover Menu tekstfarve: #2F5349
- Menutekststørrelse: 15px
- Menubogstavafstand: 2px
Skift farven på hamburgermenuens ikon til sort.
- Hamburger Menu Ikon Farve: #000000
Før vi tilføjer logoet til vores menu, lad os ændre størrelsesmulighederne. Vi vil bruge Divis indbyggede responsive muligheder til at indstille en anden maksimal højde for pc og mobil.
- Maksimal logohøjde på pc: 3vw
- Maksimal logohøjde på mobil: 6vw
Tilføj nu dit logo til fuldskærmsmenuen.
Endelig ønsker vi, at hovedmenuen forbliver øverst på skærmen, når brugeren ruller gennem hjemmesiden, så vi bruger Divis indbyggede sticky sticky-indstillinger til dette.
- Sticky Position: Stick på toppen
Dermed er vores globale header-design komplet.
Opret en ny side med et foruddefineret layout
For at se overskriften og menuen i fuld bredde i aktion, lad os oprette en ny side med et foruddefineret layout fra Divi-biblioteket. Til dette eksempel vil vi bruge hjemmesiden for gulvbelægning fra pakken gulvindretning.
Tilføj en ny side til dit websted og giv den en titel, og vælg derefter indstillingen Brug Divi Builder.
Vi bruger et foruddefineret layout fra Divi-biblioteket til dette eksempel, så vælg Vælg layout.
Find og vælg layoutet "Startside for gulvbelægning".
Vælg "Vælg layout" for at tilføje layoutet til din side.
Nu er designet færdigt!
Endelig resultat
Konklusion
Som vi sagde ovenfor, er overskriften og navigationsmenuen kernen i dit websteds brugeroplevelse. Du har nu set, hvor nemt det er at designe en fantastisk overordnet header med Divis "Full Screen Menu"-modul.
Heldigvis giver Divis temabygger dig mulighed for at kontrollere alle aspekter af din hjemmesides menu og header, og du kan skabe helt tilpassede og unikke designs med blot et par klik.
Har du brugt Divis globale header-indstillinger til at tilpasse din header og navigationsmenu? Fortæl os, hvad du synes i kommentarerne!
