Wil je een globale header maken met de Full Screen Menu module in Divi?
De koptekst is een van de belangrijkste elementen van elk Site web en is in het hart van de gebruikerservaring. Het navigatiemenu geeft uw gebruikers een idee van wat ze kunnen verwachten op uw Site web en helpt hen de informatie te vinden die ze nodig hebben.
Bovendien kan een secundaire menubalk een geweldige ruimte zijn om een call-to-action of een oproep tot actie onder de aandacht te brengen bevorderen een aanbod. Om nog maar te zwijgen van het feit dat de header een van de belangrijkste onderdelen van je Site web, omdat het meestal op elke pagina verschijnt. Dit is een geweldige kans om uw branding onder de aandacht te brengen en een header te maken die consistent is met het ontwerp van de rest van uw website.
Met Divi's Theme Builder-opties kunt u een aangepaste globale koptekst maken en het uiterlijk van uw koptekst- en menumodules voor uw hele website aanpassen.
In deze zelfstudie laten we u zien hoe u een globale koptekst maakt met behulp van Divi's menumodule op volledig scherm.
Laten we beginnen!
overzicht
Hier is een voorbeeld van de globale header die we gaan ontwerpen.
Open de themabouwer
Aangezien we in dit voorbeeld een globale header bouwen, gaan we naar "Theme Builder", die u kunt vinden in het WordPress Divi-menu. Selecteer Globale koptekst toevoegen en selecteer vervolgens Globale koptekst maken.
Maak de secundaire menubalk
Wanneer u de algemene koptekstlay-out voor het eerst opent, wordt deze vooraf geladen met een normale sectie. We zullen dit aanpassen als onze secundaire menubalk, die boven ons menu over de volledige breedte komt te staan en call-to-action-tekst en een knop bevat.
Open eerst de sectie-instellingen en voeg de achtergrondkleur toe.
- Achtergrond: #92A8A1
Vervolgens de sectiemarge.
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Voeg nu een rij in. Voor dit voorbeeld gebruiken we de onderstaande lay-out.
In de rij-instellingen, onder Grootte van het tabblad Stijl, harmoniseert u de kolomhoogten.
- Kolomhoogten harmoniseren: JA
Stel vervolgens de boven- en ondermarges als volgt in:
- Bovenste binnenmarge: 5px
- Onderste binnenmarge: 5px
Omdat we willen dat onze secundaire kopelementen verticaal worden uitgelijnd, voegen we wat aangepaste CSS toe aan het hoofdrij-element.
1.
align-items:center;
Nu onze lijn is geconfigureerd, kunnen we de modules voor onze inhoud. Plaats eerst een tekstmodule aan de linkerkant.
Wijzig de inhoud van tekst. Dit is de perfecte plek om een Call to Action of to-action op te nemen bevorderen een aanbod.
- Tekst: "Word lid van onze mailinglijst en ontvang 10% korting op uw bestelling!" »
Open het tabblad Stijl van de module Tekst en wijzig de parameters als volgt:
- Lettertype "Tekst": Poppins
- "Tekst" Gedimd licht: gemiddeld
- Tekstkleur "Tekst": #FFFFFF
Voeg vervolgens de Button-module aan de rechterkant toe.
Knoptekst toevoegen.
- Tekst: "Vraag een gratis offerte aan"
Lijn op het tabblad Stijl de knop in het midden uit.
- Knop Uitlijning: Midden
Laten we nu het uiterlijk van de knop aanpassen.
- Gebruik aangepaste stijlen voor "Knop": Ja
- Tekstgrootte knop: 14px
- Tekstkleur knop: #FFFFFF
- Achtergrondknop: #2F5349
- Breedte knoprand: 0px
- Randstraalknop: 50px
- Knop Letterafstand: 1px
- Lettertype knop: Poppins
Voeg de module Volledig scherm toe
Nu het secundaire menu is ontworpen, kunnen we doorgaan naar het hoofdmenu. We zullen het menu bouwen met behulp van de module Volledig schermmenu. Voeg een nieuwe sectie Volledig scherm toe aan de algemene koptekst.
Selecteer en voeg de module Volledig schermmenu in
Vervolgens passen we de instellingen van het menu Volledig scherm aan.
- Actieve linkkleur: #2F5349
- Lettertypemenu: Poppins
- Gedimd lichtmenu: half vet
- Kopieerstijlmenu: TT
- Kleur menutekst: #000000
- Tekstkleur zweefmenu: #2F5349
- Grootte menutekst: 15px
- Letterafstand menu: 2px
Verander de kleur van het hamburgermenu in zwart.
- Hamburger Menu Pictogram Kleur: #000000
Voordat we het logo aan ons menu toevoegen, laten we eerst de formaatopties wijzigen. We zullen Divi's ingebouwde responsieve opties gebruiken om een andere maximale hoogte in te stellen voor pc en mobiel.
- Maximale logohoogte op pc: 3vw
- Maximale logohoogte op mobiel: 6vw
Voeg nu uw logo toe aan het menu Volledig scherm.
Ten slotte willen we dat het hoofdmenu bovenaan het scherm blijft wanneer de gebruiker door de website scrolt, dus we zullen hiervoor Divi's ingebouwde sticky sticky-instellingen gebruiken.
- Kleverige positie: bovenop plakken
Daarmee is ons globale headerontwerp compleet.
Een nieuwe pagina maken met een vooraf gedefinieerde lay-out
Laten we een nieuwe pagina maken met een vooraf gedefinieerde lay-out uit de Divi-bibliotheek om de koptekst en het menu over de volledige breedte in actie te zien. Voor dit voorbeeld gebruiken we de Flooring Home Page uit het pakket indeling van de vloer.
Voeg een nieuwe pagina toe aan uw website, geef deze een titel en selecteer vervolgens de optie Divi Builder gebruiken.
We gebruiken voor dit voorbeeld een vooraf gemaakte lay-out uit de Divi-bibliotheek, dus selecteer Lay-out kiezen.
Zoek en selecteer de lay-out "Flooing Home Page".
Selecteer "Kies lay-out" om de lay-out aan je pagina toe te voegen.
Nu is het ontwerp klaar!
Eindresultaat
Conclusie
Zoals we hierboven al zeiden, vormen de koptekst en het navigatiemenu de kern van de gebruikerservaring van uw website. Je hebt nu gezien hoe gemakkelijk het is om een verbluffende algemene header te ontwerpen met Divi's "Full Screen Menu"-module.
Gelukkig geeft Divi's themabouwer je de controle over elk aspect van het menu en de koptekst van je website, en kun je met slechts een paar klikken volledig aangepaste en unieke ontwerpen maken.
Heb je de algemene koptekstopties van Divi gebruikt om je koptekst en navigatiemenu aan te passen? Vertel ons wat je denkt in de reacties!
