Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Vil du lage en global overskrift med fullskjermmenymodulen i Divi?

Overskriften er et av de viktigste elementene på ethvert nettsted og er i hjertet av brukeropplevelsen. Navigasjonsmenyen gir brukerne en ide om hva de kan forvente å finne på nettstedet ditt 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 fremme et tilbud. For ikke å nevne at overskriften er en av de viktigste delene av nettstedet ditt fordi det vanligvis vises på hver side. Dette er en flott mulighet til å vise frem merkevaren din og lage en konsistent overskrift 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.

Divi: Hvordan lage en global overskrift med fullskjermmenymodulen

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
Divi: Hvordan lage en global overskrift med fullskjermmenymodulen

Sett nå inn en rad. For dette eksemplet bruker vi oppsettet vist nedenfor.

I radinnstillingene, under Størrelse på Stil-fanen, harmoniser kolonnehøydene.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

  • 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;

Divi: Hvordan lage en global overskrift med fullskjermmenymodulen

Nå som linjen vår er satt opp, kan vi sette inn modulene for innholdet vårt. Sett først inn en tekstmodul på venstre side.

Rediger tekstinnhold. Dette er det perfekte stedet å inkludere en oppfordring til handling eller promotere 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

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

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
Divi: Hvordan lage en global overskrift med fullskjermmenymodulen

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
Divi: Hvordan lage en global overskrift med fullskjermmenymodulen
  • 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!