Vill du skapa en global rubrik med helskärmsmenymodulen i Divi?
Rubriken är en av de viktigaste delarna av någon webbplats och är i hjärtat av användarupplevelsen. Navigeringsmenyn ger dina användare en uppfattning om vad de kan förvänta sig att hitta på din webbplats och hjälper dem att hitta den information de behöver.
Dessutom kan en sekundär menyrad vara en idealisk plats för att markera en uppmaning till handling eller till främja ett erbjudande. För att inte tala om att rubriken är en av de viktigaste delarna av din webbplats, eftersom det vanligtvis visas på varje sida. Det här är ett utmärkt tillfälle att visa upp ditt varumärke och skapa en rubrik som överensstämmer med designen på resten av din webbplats.
Divis Theme Builder-alternativ låter dig skapa en anpassad global rubrik och anpassa utseendet på dina rubriker och menymoduler över hela din webbplats.
I den här handledningen kommer vi att visa dig hur du skapar en global rubrik med hjälp av Divis helskärmsmenymodul.
Låt oss börja!
undersökningen
Här är en förhandstitt på den globala rubriken vi ska designa.
Öppna temabyggaren
Eftersom vi bygger en global rubrik i det här exemplet, låt oss navigera till "Theme Builder", som du hittar i WordPress Divi-menyn. Välj Lägg till global rubrik och välj sedan Skapa global rubrik.
Skapa den sekundära menyraden
När du först öppnar den globala rubriklayouten är den förladdad med en vanlig sektion. Vi kommer att ändra detta så att det blir vår sekundära menyrad, som kommer att sitta ovanför vår fullbreddsmeny och inkluderar uppmaningstext och en knapp.
Öppna först avsnittsinställningarna och lägg till bakgrundsfärgen.
- Bakgrund: #92A8A1
Därefter avsnittsmarginalen.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Sätt nu in en rad. För det här exemplet använder vi layouten som visas nedan.
I radinställningarna, under Storlek på fliken Stil, harmonisera kolumnhöjderna.
- Harmonisera kolumnhöjder: JA
Ställ sedan in övre och nedre marginalerna enligt följande:
- Övre inre marginal: 5px
- Nedre inre marginal: 5px
Eftersom vi vill att våra sekundära rubrikelement ska justeras vertikalt, lägger vi till lite anpassad CSS till huvudradelementet.
1.
align-items:center;
Nu när vår linje är konfigurerad kan vi infoga modulerna för vår innehåll. Sätt först in en textmodul på vänster sida.
Ändra innehåll av text. Detta är den perfekta platsen att inkludera en Call to Action eller till främja ett erbjudande.
- Text: "Gå med i vår e-postlista för att få 10% rabatt på din beställning!" »
Öppna stilfliken i textmodulen och ändra parametrarna enligt följande:
- Teckensnitt "Text": Poppins
- "Text" Dimljus: Medium
- "Text" textfärg: #FFFFFF
Lägg sedan till knappmodulen till höger.
Lägg till knapptext.
- Text: "Få en kostnadsfri offert"
Justera knappen i mitten på fliken Stil.
- Knappinställning: Center
Låt oss nu anpassa utseendet på knappen.
- Använd anpassade stilar för "Knapp": Ja
- Knapptextstorlek: 14px
- Knappens textfärg: #FFFFFF
- Bakgrundsknapp: #2F5349
- Knappkantsbredd: 0px
- Kantradieknapp: 50px
- Knappbokstavsavstånd: 1px
- Button Font: Poppins
Lägg till modulen för helskärmsmeny
Nu när sekundärmenyn är designad kan vi gå vidare till huvudmenyn. Vi kommer att bygga menyn med hjälp av helskärmsmenymodulen. Lägg till en ny helskärmssektion i den globala rubriken.
Välj och infoga helskärmsmenymodul
Därefter kommer vi att anpassa inställningarna för helskärmsmenyn.
- Aktiv länkfärg: #2F5349
- Teckensnittsmeny: Poppins
- Dimljus-meny: Halvfet
- Kopiera stilmeny: TT
- Menytextfärg: #000000
- Hover Meny textfärg: #2F5349
- Menytextstorlek: 15px
- Menybokstavsavstånd: 2px
Ändra färgen på hamburgermenyns ikon till svart.
- Hamburgermenyikon Färg: #000000
Innan vi lägger till logotypen i vår meny, låt oss ändra storleksalternativen. Vi kommer att använda Divis inbyggda responsiva alternativ för att ställa in en annan maxhöjd för PC och mobil.
- Maximal logotyphöjd på PC: 3vw
- Maximal logotyphöjd på mobil: 6vw
Lägg nu till din logotyp i helskärmsmenyn.
Slutligen vill vi att huvudmenyn ska finnas kvar överst på skärmen när användaren rullar igenom webbplatsen, så vi använder Divis inbyggda sticky sticky-inställningar för detta.
- Sticky Position: Stick på toppen
Med det är vår globala headerdesign komplett.
Skapa en ny sida med en fördefinierad layout
För att se rubriken och menyn i full bredd, låt oss skapa en ny sida med en fördefinierad layout från Divi-biblioteket. För det här exemplet kommer vi att använda Golvhemsidan från paketet planlösning.
Lägg till en ny sida på din webbplats och ge den en titel, välj sedan alternativet Använd Divi Builder.
Vi använder en färdig layout från Divi-biblioteket för det här exemplet, så välj Välj layout.
Hitta och välj layouten "Golvbeläggningshemsida".
Välj "Välj layout" för att lägga till layouten på din sida.
Nu är designen klar!
Slutresultat
Slutsats
Som vi sa ovan är rubriken och navigeringsmenyn i hjärtat av din webbplats användarupplevelse. Du har nu sett hur enkelt det är att designa en fantastisk övergripande header med Divis "Full Screen Menu"-modul.
Lyckligtvis ger Divis temabyggare dig kontroll över varje aspekt av din webbplats meny och rubrik, och du kan skapa helt anpassade och unika design med bara några få klick.
Har du använt Divis globala rubrikalternativ för att anpassa din rubrik och navigeringsmeny? Berätta för oss vad du tycker i kommentarerna!
