Heb je je ooit afgevraagd waarom sommige websites zo prettig aanvoelen terwijl je door de pagina naar beneden scrollt? Het geheim zit vaak in de navigatie die subtiel bovenin het scherm blijft plakken, zodat je nooit de weg kwijtraakt. In deze uitgebreide gids gaan we dieper in op hoe jij dit effect zelf kunt bereiken zonder dat je een regel code hoeft te schrijven. We nemen je mee in de wereld van de meest populaire paginabouwer voor wordpress en laten je zien hoe je jouw website naar een hoger niveau tilt.

Wat is een sticky header en waarom is het belangrijk?

Een sticky header, ook wel een klevend menu genoemd, is een navigatiebalk die bovenaan het viewport (het zichtbare gedeelte van je scherm) blijft staan wanneer een bezoeker naar beneden scrollt. Dit is een essentieel onderdeel van modern wordpress webdesign omdat het de gebruikerservaring aanzienlijk verbetert. Wanneer een bezoeker diep in een lang artikel zit, hoeft hij niet helemaal terug naar boven te scrollen om naar een andere pagina te gaan.

Het gebruik van een klevend menu zorgt voor een hogere conversie en een lagere bounce rate. Bezoekers vinden sneller wat ze zoeken en blijven daardoor langer op je website. Bovendien versterkt het je merkidentiteit, omdat je logo constant in beeld blijft. In deze divi sticky header maken handleiding leggen we uit hoe je dit effect instelt met de ingebouwde functies van de theme builder.

Stap 1: de voorbereiding in de divi theme builder

Voordat we beginnen met het maken van de sticky header, moet je weten waar je de instellingen kunt vinden. Divi heeft een krachtige tool genaamd de theme builder. Hiermee kun je sjablonen maken voor je hele website. Als je nog nooit een header hebt gemaakt, raden we je aan om eerst onze divi theme builder header maken voor beginners gids te lezen.

Om te starten navigeer je in je wordpress dashboard naar divi en vervolgens naar theme builder. Hier zie je het blok voor de global header (wereldwijde header). Klik op het potloodicoon om de lay-out te bewerken. Als je nog geen header hebt, klik dan op de lege plek om een nieuwe globale header aan te maken. Zorg ervoor dat je in de visual builder bent, zodat je direct ziet wat je doet.

Stap 2: de sectie-instellingen aanpassen voor een klevend effect

In de divi builder is je header meestal opgebouwd uit een sectie (het blauwe kader). Om deze sectie te laten plakken, moet je de specifieke instellingen van deze sectie aanpassen. Volg deze stappen nauwkeurig:

• Beweeg je muis over de blauwe sectie en klik op het tandwielicoon om de instellingen te openen.
• Ga naar het tabblad geavanceerd bovenin het instellingenvenster.
• Zoek naar het menu-item genaamd scroll-effecten (scroll effects).
• Bij de optie sticky position (plakkerige positie) kies je voor de optie stick to top (plak bovenaan).

Zodra je dit hebt gedaan, zal de sectie in de builder al aangeven dat hij een sticky status heeft. Je kunt nu ook instellen of de header moet blijven plakken op alle apparaten of alleen op desktops. Voor een optimale mobiele ervaring is het soms slim om de header op telefoons niet te laten plakken, maar dit hangt af van je ontwerp.

Stap 3: styling aanpassen tijdens het scrollen

Een van de mooiste functies van de divi sticky header maken handleiding is dat je de styling kunt veranderen op het moment dat de header plakt. Je wilt bijvoorbeeld dat de header iets kleiner wordt of een andere achtergrondkleur krijgt zodra de gebruiker begint te scrollen. Dit voorkomt dat de header te veel ruimte inneemt op het scherm.

In de instellingen van je sectie, rij of module zie je nu een nieuw icoontje verschijnen bij de stylingopties: een punaise-icoon. Dit staat voor de sticky state. Als je op dit icoontje klikt, kun je een specifieke waarde instellen die alleen geldt wanneer de header plakt. Denk hierbij aan:

• Achtergrondkleur: maak de header bijvoorbeeld licht transparant wanneer men scrollt.
• Padding: verklein de boven- en onderkant van de sectie zodat de header minder hoog wordt.
• Logo grootte: verklein de afbeelding van je logo in de menu-module voor een subtieler effect.
• Box shadow: voeg een schaduw toe zodra de header plakt om hem los te laten komen van de rest van de content.

Mocht je tijdens het bewerken tegen problemen aanlopen, zoals een builder die niet goed laadt, bekijk dan onze tips voor het divi visual builder wit scherm oplossen om snel weer verder te kunnen werken.

Stap 4: de z-index en overlapping controleren

Een veelvoorkomend probleem bij het maken van een sticky header is dat andere elementen op de pagina over de header heen scrollen. Dit ziet er onprofessioneel uit en maakt het menu onbruikbaar. Dit los je op met de z-index. De z-index bepaalt de volgorde van lagen op je website. Hoe hoger het getal, hoe meer het element “naar voren” komt.

Ga in de sectie-instellingen van je header naar het tabblad geavanceerd en open het kopje positie. Hier zie je een veld voor de z-index. Zet deze waarde op een hoog getal, bijvoorbeeld 999. Hiermee dwing je de header om altijd bovenop alle andere elementen van je wordpress website te blijven liggen, ongeacht wat er op de rest van de pagina gebeurt.

Geavanceerde tips voor een professionele afwerking

Nu je de basis van de divi sticky header maken handleiding onder de knie hebt, kun je gaan experimenteren met overgangen. Divi biedt de mogelijkheid om de transition duration aan te passen. Dit zorgt ervoor dat de verandering van een grote header naar een kleine, klevende header vloeiend verloopt in plaats van met een harde klik.

Je vindt deze instellingen onder het tabblad ontwerp bij de optie overgang (transitions). Een waarde van 300ms is meestal perfect voor een natuurlijk aanvoelend effect. Let er ook op dat je de sticky limit instelt. Je kunt er namelijk voor kiezen om de header te laten stoppen met plakken zodra hij de onderkant van een bepaalde sectie bereikt, hoewel dit voor een globale header meestal niet gewenst is.

Vergeet niet om na alle aanpassingen op de groene knop opslaan te klikken in de visual builder, en daarna ook nogmaals op alle wijzigingen opslaan in het hoofdscherm van de theme builder. Pas dan worden de wijzigingen definitief doorgevoerd op je live website.

Conclusie

Het maken van een sticky header in divi is een relatief eenvoudige manier om de professionaliteit van je website te verhogen. Door gebruik te maken van de ingebouwde scroll-effecten en de sticky state styling, creëer je een dynamische ervaring die je bezoekers helpt om makkelijker door je content te navigeren. Of je nu een kleine blog hebt of een grote webshop beheert, een goede navigatie is de ruggengraat van je online succes.

Mocht je hulp nodig hebben bij het optimaliseren van je website of wil je dat een expert naar je divi instellingen kijkt, dan staan wij bij prospects4u voor je klaar. Met onze diepgaande kennis van wordpress en divi zorgen we ervoor dat jouw website niet alleen mooi is, maar ook technisch perfect functioneert.