Divi is een geweldig thema en bouwer voor WordPress. Je kan er eigenlijk alles mee bouwen, zowel from scratch als met een sjabloon. Nu zijn er meer dan 240 van die templates, maar daar zit geen header bij. Logisch, want een header verschilt echt per website. Maar hoe bouw je een header in Divi? In deze blogpost krijg je een antwoord op je vraag.

Voor we erin vliegen, een kort woordje vooraf. Iedere webpagina kun je feitelijk in drie grote onderdelen verdelen: een header, een body en een footer. De header is het bovenste stuk: hier staat vaak een logo en een menu, met soms ook wat aanvullende informatie. De body is het middenstuk: de inhoud van de bewuste pagina. Helemaal onderaan vind je de footer met daarin copyright, soms contactgegevens en wat extra informatie. Op de meeste websites zijn de headers en de footers op iedere pagina hetzelfde, een body verschilt dus per pagina. Wil je meer lezen over webdesign in het algemeen? Hier lees je hoe je een fantastische website kunt bouwen.

Body’s en footers zijn gemakkelijk te maken in Divi, maar bij een header komt in dit thema en in deze bouwer net even wat meer kijken. Dat komt omdat hier ook een menu in zit, wat er op desktop, tablet en mobiele telefoon anders uitziet. Om het gemakkelijk te maken, zie je hieronder een stappenplan.

Wil je weten hoe je een footer in Divi maakt? Bekijk dan dit stappenplan om een geweldige footer in Divi te maken!

1. Global header aanmaken

Aan de linkerkant van je WordPress-dashboard kun je de letter -D zien, deze staat voor Divi. Schuif hier me je cursor overheen en klik op “theme builder”. In deze themabouwer zie je “Default website template”, hier kun je in werken. Zodra je op “add global header”, klikt, zie je verschillende opties. Selecteer “building from scratch”.

2. Fullwidth header creëren

Je komt op een lege pagina uit, waar je op een plusje kunt klikken. Zodra je daarop klikt, verschijnt het venster “insert section”. Je gaat voor “new section” en je kiest “fullwidth”. Dit is een handige omdat deze in principe al schermvullend is, je hebt daarvoor geen aanvullende code nodig. Tenminste, voor de desktopversie niet.

3. Fullwidth header instellen

Als je over deze balk schuift met je cursor, dan kun je twee instellingen wijzigen. Die van de section of die van de module. Wij gaan voor de module. Bij content selecteer je het menu dat je in de theme customizer hebt aangemaakt, bij logo kun je je logo uploaden. Zodra je dat gedaan hebt, zie je waarschijnlijk je logo heel groot staan. Je kan dat verkleinen bij design onder het kopje “sizing” bij “logo width”. Ook kun je bij “menu text” het lettertype, de kleur en de grootte van het menu wijzigen. Wil je de achtergrondkleur van je header wijzigen, dan kun je dat doen door bij content “background” te selecteren. Er bestaan ook mogelijkheden om deze (deels) transparant te maken.

Optioneel: top header creëren en instellen

Wat je hier boven deze website ziet staan, is een fullwidth header. Bij sommige websites kun je daarboven een balkje vinden met soms een tagline of extra informatie: dat is een top header. Deze kun je heel eenvoudig maken in Divi. Druk onder je fullwidth header op het plusje, selecteer bij “new section” het item “fullwidth” en bij “insert module” ga je voor “fullwidth header”. Nu zie je daaronder een enorme header verschijnen. Als ik dit voor klanten aanmaak, dan haal ik eigenlijk alle informatie en functies eruit. Enkel de gewone tekst blijft erin, die ik aanpas door een tagline of contactgegevens. Verder verklein ik de header enorm door te werken met margin en padding. Uiteindelijk wil je dat deze top header boven je andere, of main header, komt. Dat doe je door deze eenvoudig weg te verslepen en boven de main header los te laten. Zo, je hebt een top header en main header boven elkaar.

4. Fullwidth header sticky maken

Wil je je header vastmaken aan de bovenkant van iedere pagina, dus deze zichtbaar houden terwijl je naar beneden scrollt? Ook dat kan. Selecteer het tandwieltje van de zwarte module (“fullwidth menu”), ga naar het tabblad “advanced” en ga naar “scroll effects”. Hier kun je bij het onderdeel “sticky position” de functie “stick to top” selecteren. Vergeet niet op om op te slaan.

5. Layout dropdown menu instellen

Bekijk nu eens je creatie via tablet of “mobile view” en je zult zien dat je dropdown menu en je hamburger icoontje er anders uitzien dan je gedacht had. Gelukkig kun je dat relatief eenvoudig instellen. Ga terug naar je “fullwidth menu settings” en open het deel “dropdown menu”. Hier kun je gemakkelijk je dropdown menu customizen. Verder kun je zien dat je icoontje van het hamburgermenu nog niet aan jouw wensen is aangepast. Dat doe je bij design en “icons”.

Optioneel: mobiel menu in Divi uitlijnen

Tot nu toe was er geen enkele regel code nodig. Maar… Wat als je geen margin wilt bij je mobiele menu? Als je bedoeling is om een strakke website te designen, dan kan het wel zo mooi zijn om je menu over de volledige breedte van het scherm van je mobiele telefoon uit te lijnen. Echter heb je daar wel CSS-code voor nodig. Omdat ik niet de schrijver van die code ben, verwijs ik je dan ook graag door naar een Engelstalige blog. Hier lees je hoe je mobiel menu kan uitlijnen en eventueel extra icoontjes aanpast met behulp van CSS-code.

En waarmee bouw jij je header?

Op de hoogte blijven van mijn nieuwste blogs? Schrijf je nu in voor mijn nieuwsbrief!

Op zoek naar gratis website tips? Boek nu een gratis webdesign sessie!