Navigatie is een essentieel onderdeel van elke goede WordPress website met een geweldig design. Daarom is het de moeite waard om even na te denken over hoe bezoekers van je site middels je navigatie interactie hebben met je pagina’s en deze te verbeteren. Eén manier om dit te doen is door een sticky header te gebruiken.

Dit is waar het headergedeelte van je site bovenaan het scherm blijft terwijl de gebruiker scrolt. Dit biedt talloze voordelen, maar een van de belangrijkste pluspunten is dat je navigatie elementen binnen het zicht van de gebruiker blijven, ongeacht waar ze zich op de pagina bevinden. Alleen al om deze reden is een sticky header een welkom element van de gebruikersinterface (UI).

In deze tutorial laten we je zien hoe je een sticky header maakt in WordPress. We zullen veel aspecten behandelen, zoals voorbeelden op internet, WordPress plugins die je kunnen helpen en een handleiding voor het ontwikkelen van je eigen sticky header. Laten we echter eerst in meer detail bespreken wat een sticky header nou eigenlijk is.

Wat een sticky header is

Een headersectie van de website van Kotaku.
Een headersectie van de website van Kotaku.

Het headergedeelte van je site is een beetje zoals de informatiebalie van je site. Het zal iets zijn dat de meeste gebruikers als eerste zullen zien, en het zal altijd de plek zijn die ze eerst checken wanneer ze belangrijke informatie op je site willen vinden of bepaalde acties willen uitvoeren:

  • Hier staat bijvoorbeeld je logo of sitenaam, die dient als een centraal punt voor je gebruikers. Ze zullen in de meeste gevallen terug kunnen keren naar de startpagina door op het logo te klikken.
  • Als je gebruikersaccounts op je site gebruikt, biedt de header meestal een link om in te loggen bij die account- en profielpagina’s.
  • Er kan hier zoekfunctionaliteit zijn, vooral als je een grote site hebt met veel content op verschillende gebieden.
  • Natuurlijk is de navigatie van je site ook een integraal onderdeel van de header.

Over het algemeen is je header een contactpunt voor gebruikers. Je zult merken dat het vaak de ‘balk’ is voor F-vormige leespatronen, dus het trekt op een intuïtief niveau de aandacht van je gebruikers.

Je weet waarschijnlijk al wat een sticky header is, zelfs in intuïtieve zin. Het is waar de headersectie van je site ‘plakt’ aan de bovenkant van het scherm terwijl je verder scrolt. In tegenstelling tot een statische header, die op zijn plaats blijft en verdwijnt als je scrolt, is de sticky header een altijd zichtbaar element.

Hoewel de typische benadering voor een sticky header is om een statische versie ervan aan de bovenkant van je scherm te plakken, zijn er een paar verschillende manieren om dit bruikbaarder, schermefficiënter en dynamischer te maken. Vervolgens zullen we enkele voorbeelden uit de praktijk bekijken.

Voorbeelden van sticky headers op het web

Je vindt overal op internet sticky headers en het is een goed idee om er een paar te bekijken om te zien wat de reikwijdte is van wat je kunt bereiken. Een van de meest elementaire voorbeelden die er zijn, is van Hammerhead. Deze site gebruikt een ‘flyout menu’ en een sticky header, en het is duidelijk: het streeft ernaar om bovenaan de pagina te blijven in zijn statische lay-out:

De sticky header op de Hammerhead site.
De sticky header op de Hammerhead site.

Een andere eenvoudige implementatie is van Kin. Deze maakt gebruik van een typische sticky header, maar deze keer met een paar coole ontwerpelementen.

Je zult merken dat het contrast verandert op basis van het deel van de website waar je doorheen scrolt, en er zijn ook enkele mooie overgangseffecten:

De sticky header op de Kin website.
De sticky header op de Kin website.

We kunnen dit gedeelte niet afsluiten zonder de sticky header van Kinsta te vermelden. Deze houdt het ook eenvoudig met betrekking tot de elementen van de header, maar bevat een nette bruikbaarheidstouch die waarde biedt aan de bezoeker:

De sticky header op de Kinsta website.
De sticky header op de Kinsta website.

Deze keer zie je de header verdwijnen wanneer je naar beneden scrolt. Het zal echter opnieuw verschijnen wanneer je terug naar boven scrolt – je kunt het zien als een ‘gedeeltelijk persistente header’.

Het uitgangspunt hier is dat naar beneden scrollen betekent dat je je tijd in de pagina zelf investeert, dus waarschijnlijk heb je geen navigatie, inlogpagina’s nodig of wil je nergens anders naartoe. Op het moment dat je naar boven scrolt, is de kans groter dat je naar een andere pagina op de site wilt gaan. Hier verschijnt de sticky header als redder in nood.

Het zijn deze kleine gebruikerservaringen (UX) die zorgen voor een site waar bezoekers naar terug willen komen. Wat betreft het maken van je eigen header geldt:  denk na over wat je kan doen om een UX en UI te maken die zich richten op de behoeften van de bezoeker.

Waarom je een sticky header voor je site zou moeten gebruiken

Veel sites gebruiken sticky headers en er zijn tal van goede redenen waarom dit het geval is. Ze kunnen cruciale onderdelen zijn van de algehele ervaring van je site en hebben veel invloed op je UX en UI.

Aangezien de elementen die je in een header opneemt, de elementen zijn waartoe de gebruiker altijd toegang wil hebben, is het logisch om ze altijd in beeld te hebben. Dit geldt met name voor apparaten en formats met een kleiner scherm.

Hoewel het misschien contra-intuïtief lijkt om een ‘altijd-aan’ header te hebben wanneer de zichtveldruimte schaars is, is het slechts een kleine opoffering. Het daadwerkelijke voordeel is dat een mobiele gebruiker minder reden heeft om rond te scrollen – op kleinere apparaten is dit super belangrijk. Als je de navigatie van je site kan leveren aan de bezoeker, zonder dat deze hoeft te scrollen, kan de gebruiker zich makkelijker door je site verplaatsen.

De voor- en nadelen van sticky headers

We behandelden net een paar van de pluspunten voor sticky headers, dus laten we ze snel samenvatten:

  • Je kunt navigatie bieden waartoe de gebruiker altijd toegang heeft, waardoor het natuurlijke leespatroon op je site behouden blijft.
  • Je kunt de header aanpassen aan verschillende behoeften, zoals contrasten, kleurenschema’s of zelfs de intentie van de gebruiker.
  • Er is de mogelijkheid om waarde te bieden aan de gebruiker, voor zowel desktop als kleinere schermen.

Een sticky header is echter geen wondermiddel voor een verhoogde UX, en er zijn een paar nadelen aan het gebruik ervan:

  • We behandelen dit in het kort, maar voor schermen van alle formaten moet je ruimte toewijzen voor je header.
  • Een sticky header zal een deel van de rest van je content wegnemen, omdat zijn eigen elementen de aandacht wegtrekken van de hoofdtekst van de pagina.
  • Er is meer ontwikkelingswerk nodig voor een goede sticky header, omdat je het moet implementeren, ervoor moet zorgen dat het in verschillende browsers werkt en het moet controleren op bugs op kleinere schermen.

Als je echter nadenkt over je ontwerpkeuzes, gebruikersbehoeften en sitedoelen, kun je al deze nadelen verminderen of wegnemen, terwijl je de goede punten behoudt. Een manier waarop je dit kunt doen, is door middel van WordPress plugins.

3 plugins om je te helpen sticky headers te maken

In de volgende paragrafen laten we enkele van de toonaangevende sticky headerplugins voor WordPress zien. Later zullen we bespreken of dit type oplossing geschikt is voor jou. Hoe dan ook, een plugin kan je helpen functionaliteit te implementeren zonder dat je code nodig hebt, wat waardevol is als je thema deze niet bevat.

Bovendien kun je via de plugin gebruikmaken van de ontwerp- en ontwikkelingservaring van een expert. De ontwikkelaars zullen een aantal van de belangrijkste technische keuzes voor je maken en dit in een UI verpakken die intuïtief en gebruiksvriendelijk is.

1. Sticky Menu & Sticky Header

Webfactory’s Sticky Menu & Sticky Header plugin is een goede eerste keuze, vanwege de rijkdom aan features, handige flexibiliteit en budgetvriendelijke prijs.

De Sticky Menu & Sticky Header plugin.
De Sticky Menu & Sticky Header plugin.

De mogelijkheid hier is dat je elk element op je site op het scherm kunt laten plakken. Dit kan op een aantal manieren nuttig zijn, maar het betekent dat het implementeren van een sticky header een makkie is.

De plugin wordt ook geleverd met een reeks krachtige opties om je te helpen een sticky header te implementeren:

  • Je kunt het gewenste niveau van ’top’ positionering instellen. Dit betekent dat je ruimte kunt toevoegen aan het gebied boven de header om aan je ontwerpdoelen te voldoen.
  • Er zijn ook andere positioneringsopties, zoals het gebruik van de z-index CSS eigenschap om je site ‘van voor naar achter’ te ontwerpen.
  • Je kunt de sticky header alleen inschakelen op de pagina’s die je selecteert, wat handig kan zijn als je bestemmingspagina’s of andere ongeschikte content hebt.

Sticky Menu & Sticky Header bevatten ook een debug modus om je te helpen bij het repareren van ‘niet-klevende’ elementen. De Dynamic Mode helpt ook om problemen met responsieve ontwerpen aan te pakken.

Het beste nieuws is dat Sticky Menu & Sticky Header gratis te downloaden en te gebruiken is. Bovendien is er een premiumversie die meer van de technische knowhow wegneemt die je nodig hebt.

Met de gratis versie van de plugin moet je de elementselector kennen om deze in de opties te specificeren. De premiumversie ($49-199 per jaar) biedt echter een visuele elementselector om dit te omzeilen.

2. Options for Twenty Twenty-One

Hoewel we voor de meeste klantgerichte sites geen standaard WordPress thema zouden aanbevelen, hebben ze genoeg te bieden voor blogs en vergelijkbare soorten sites.

Twenty Twenty-One is naar onze mening een van de meer opvallende standaardthema’s, maar heeft geen sticky headerfunctionaliteit. Als je deze feature wilt toevoegen, kan de Options for Twenty Twenty-One plugin je geven wat je nodig hebt.

De Options for Twenty Twenty-One plugin.
De Options for Twenty Twenty-One plugin.

Deze editie van de plugin is een in een lange lijst van vergelijkbare plugins. Elk recent standaardthema heeft een versie, maar er is er nog geen voor Twenty Twenty-Two. Hoe dan ook, de kernfunctionaliteit van de plugin biedt veel extra’s:

  • Er is een Full Site Editing (FSE) tool, klaar voor de volledige uitrol.
  • Je kunt de lettergrootte voor de hoofdtekst wijzigen, hyperlinkonderstrepingen verwijderen en andere eenvoudige aanpassingen.
  • Je kunt werken met de maximale breedte van containers en elementen, zonder dat je code nodig hebt.

Er zijn tal van andere opties voor je navigatie, content, footer en header. Voor het laatste kun je het uit het zicht verbergen, het op de volledige breedte maken, een achtergrondafbeelding en -kleur toevoegen en tal van andere wijzigingen.

Hoewel de kernplugin gratis is, heb je een premium upgrade nodig ($25-50) om toegang te krijgen tot de sticky headeropties. Hiermee kun je de instellingen voor zowel mobiele als desktop headers aanpassen vanuit de WordPress Customizer:

De WordPress Customizer, met opties voor sticky headers.
De WordPress Customizer, met opties voor sticky headers.

Gezien de naam moet je verwachten dat deze plugin werkt met een ander thema dan Twenty Twenty-One (of welke ‘smaak’ je ook kiest). Als je dit standaardthema echter gebruikt en niet wilt coderen, is het is ideaal om je te helpen een sticky header aan je site toe te voegen.

3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu

Hier is een plugin die zijn kaarten op tafel legt. Premio’s myStickymenu plugin biedt bijna alles wat je in je eigen sticky header wilt opnemen en bevat een grote hoeveelheid functionaliteit.

De myStickymenu plugin.
De myStickymenu plugin.

Het heeft een verbazingwekkend aantal positieve reviews in de WordPress Plugin Directory – 799 vijfsterrenrecensies voor een gemiddelde van 4,9. Een deel hiervan is te danken aan de uitgebreide featureset die tot je beschikking staat:

  • De plugin biedt gebruiksflexibiliteit. Je kunt bijvoorbeeld een welkomstbalk maken, evenals een sticky menu en header.
  • De plugin past zich aan aan hoe responsief je site is. Dit betekent dat je geen functionaliteit meer hoeft te implementeren met behulp van code.
  • In feite hoef je voor de plugin niet te weten hoe je moet coderen om deze volledig te kunnen gebruiken.
  • De myStickymenu plugin is compatibel met een aantal toonaangevende paginabouwplugins, zoals Elementor, Beaver Builder, de native Block Editor, de Divi Builder en nog veel meer.

Je hebt ook een aantal aanpassingsopties om je sticky header te laten werken zoals jij dat wilt. Je kunt er bijvoorbeeld voor kiezen om een gedeeltelijk blijvende header te maken, eenvoudige aspecten zoals achtergrondkleuren, typografische keuzes en meer te wijzigen.

Vanwege de verschillende manieren waarop je je sticky header kunt presenteren (zoals het menu en de welkomstbalkopties), kun je ook kiezen hoe ze worden weergegeven en waar op je site.

Hoewel de gratis versie van myStickymenu voldoende zou kunnen zijn voor je behoeften, is er ook een premiumversie ($25-99 per jaar.) Dit biedt meer manieren om je sticky header uit te schakelen onder specifieke omstandigheden, afteltimers, de mogelijkheid om meerdere welkomstbalken toe te voegen, en nog een paar aanpassingsopties.

Zo maak je een sticky header in WordPress

Voor de rest van deze tutorial laten we je zien hoe je een sticky header maakt in WordPress. Er zijn een aantal benaderingen die je hier kunt volgen, en we zullen ze allebei behandelen. Onze eerste stap zal je echter helpen die beslissing te nemen.

Van daaruit werk je aan je eigen sticky header met behulp van je favoriete methode, en pas je enkele van onze tips toe om de jouwe in de toekomst efficiënter en bruikbaarder te maken.

1. Beslis hoe je je sticky header maakt

Een van de redenen waarom WordPress zo flexibel is voor allerlei gebruikers, is vanwege het pluginecosysteem en de open-source uitbreidbaarheid. Als zodanig kun je kiezen voor een kant-en-klare oplossing of ‘je eigen oplossing’.

Je eerste taak is om te beslissen of je een plugin wilt gebruiken of in code wilt graven om je sticky header te implementeren. Laten we de twee oplossingen opsplitsen:

  • Plugins. Dit is een door WordPress goedgekeurde methode, vooral als je niet over de technische kennis beschikt. Het biedt flexibiliteit, maar je bent overgeleverd aan wat de ontwikkelaar belangrijk vindt en aan hun vermogen om te coderen.
  • Codering. Als je een duidelijke visie voor ogen hebt, wil je misschien een sticky header voor je site coderen. Natuurlijk heb je de technische expertise nodig om dit voor elkaar te krijgen (voornamelijk CSS), maar de resultaten zullen precies zijn wat je wilt. Je zult echter meer potentieel onderhoud moeten uitvoeren, en het succes ervan zal te danken zijn aan je eigen vaardigheden om te coderen.

We zouden zeggen dat voor de meeste WordPress gebruikers een plugin de ideale oplossing is om een sticky header te maken. Het zal goed werken met het platform en het is makkelijker om te troubleshooten als je problemen hebt. In toekomstige stappen zullen we echter een codeeroplossing en de pluginoptie behandelen.

2. Kies of je je huidige thema wilt wijzigen of een speciaal thema wilt selecteren

Het volgende aspect dat je wilt overwegen, is of je je huidige thema aanpast, of een thema kiest dat al een sticky headerfunctionaliteit binnen de featureset heeft. Dit wordt belangrijk als je thema de functionaliteit niet heeft om een sticky header te verwerken.

Veel thema’s en paginabuilder plugins bevatten een sticky header optie, vanwege de voordelen en om je ontwerpflexibiliteit te bieden. Je zult merken dat sommige van de grotere, algemene thema’s en plugins dit standaard bieden, zoals Elementor, Astra, Divi, Avada en talloze andere.

De sticky header optie binnen Elementor.
De sticky header optie binnen Elementor.

Om deze beslissing te nemen, moet je een paar dingen overwegen over je huidige thema en site:

  • Ziet je site er al uit zoals je wilt, of heeft deze een opfrisbeurt nodig?
  • Is je huidige thema eenvoudig aan te passen? De ontwikkelaarsdocumentatie zou je dit moeten vertellen.
  • Wil je een complexe, geprefereerde sticky header implementatie of een eenvoudigere implementatie?

Op basis van de antwoorden die je hier geeft, kies je het een of het ander. Als je een nieuw thema nodig hebt, kun je er net zo goed een kiezen die sticky header implementatie biedt. Als je echter bij je huidige thema wilt blijven en het nog geen sticky header functionaliteit heeft, wil je de handen uit de mouwen steken en een van de volgende substappen volgen.

2a. Gebruik een plugin met een specifiek thema

Als je geen ontwikkelervaring hebt, raden we je aan een plugin te kiezen om sticky header functionaliteit aan je site toe te voegen. Er zijn te veel variabelen die je moet overwegen, bouwen en onderhouden. Daarentegen heeft een plugin al een codebase die een knipoog naar deze elementen geeft, dus het biedt een bijna ideale optie voor de meeste omstandigheden.

Voor dit deel van de tutorial gaan we de myStickymenu plugin gebruiken, omdat deze een veelzijdige en uitgebreide featureset biedt voor de meeste gebruikssituaties. Het algemene gebruik zal echter hetzelfde zijn voor de meeste plugins die je zult gebruiken.

Nadat je je plugin hebt geïnstalleerd en geactiveerd, moet je naar de thema opties gaan. Voor sommige plugins bevindt dit zich in de WordPress Customizer; voor anderen een speciaal beheervenster. Hier gebruik je een aangepast beheervenster op myStickymenu > Dashboard in WordPress:

Het myStickymenu beheervenster in WordPress.
Het myStickymenu beheervenster in WordPress.

Het standaardscherm toont echter de instellingen voor de welkomstbalk, die we voor deze tutorial niet willen. Klik daarom op de knop om de balk uit te schakelen en klik door naar het instellingenscherm van het Sticky menu:

Het instellingenscherm van het Sticky menu.
Het instellingenscherm van het Sticky menu.

Hoewel er hier veel opties zijn, heb je alleen het Sticky Class venster nodig. Zodra je de sticky header op “On” zet, voer je de relevante HTML tag voor je header in het relevante veld in dat samenvalt met het Other Class or ID dropdownmenu:

De HTML selectortag wijzigen in de myStickymenu plugin.
De HTML selectortag wijzigen in de myStickymenu plugin.

Zodra je je wijzigingen opslaat, wordt dit op je site toegepast. Van daaruit kun je enkele stylingfuncties bekijken. Je stelt bijvoorbeeld een fade- of dia-overgangseffect in, stelt de z-index in, werkt met dekkingen, kleuren en overgangstijden – samen met een hele reeks andere opties.

2b. Schrijf code om je sticky header te maken

Het is bijna vanzelfsprekend dat dit gedeelte bedoeld is voor mensen met ontwikkelingservaring. Je zult later zien dat de code zelf zo eenvoudig is dat het moeilijk te geloven is. Gezien het extra werk, onderhoud en algemeen onderhoud om een aangepaste sticky header te maken, moet je echter ook gebruikmaken van andere aspecten van je ervaring.

Vlak voordat je begint, heb je echter het volgende nodig:

Het is goed om te herhalen dat je niet aan de bestanden van je live site wilt werken. Werk in plaats daarvan binnen een testomgeving of een lokale installatie en upload de bestanden vervolgens terug naar je live server nadat je alles hebt getest.

Je wilt hiervoor ook een childthema gebruiken, omdat je aangepaste wijzigingen aanbrengt in je parent thema. Dit helpt je om je code te ordenen en ervoor te zorgen dat eventuele wijzigingen (letterlijk) blijven plakken als het thema een update krijgt.

Een sticky header implementeren met behulp van code: de juiste headertags vinden

Met dit alles in gedachten kun je beginnen. De eerste taak is om de juiste HTML tags voor je navigatie te ontdekken. Het resultaat hangt af van het thema dat je gebruikt, hoewel de header tag in de meeste gevallen een veilige gok is. De beste manier om erachter te komen, is door de devtools van je browser te gebruiken en de header te selecteren:

De Inspect Element tool met de Kinsta site en de tag.
De Inspect Element tool met de Kinsta site en de tag.

Je zult waarschijnlijk merken dat het niet zo eenvoudig is als één tag, dus we raden je aan de documentatie van je thema te bekijken (of rechtstreeks met de ontwikkelaar te praten) om erachter te komen welke tags je nodig hebt als je problemen ondervindt.

Een sticky header implementeren met code: werken met je stylesheets

Vervolgens moet je een style.css bestand maken of openen in de map voor je parent thema. Dit zal je CSS toevoegen aan die van de kerninstallatie, en waar tags worden herhaald, wordt deze overschreven.

Voeg in dit bestand de typische metadata toe die je nodig hebt om het childthema te registreren:

Een onderliggend thema maken met Onivim2.
Een onderliggend thema maken met Onivim2.

Vervolgens wil je code toevoegen om je sticky header in te schakelen. Dit vereist enige kennis van CSS inheritance, en afhankelijk van het thema dat je gebruikt, kan dit lastig zijn.

Het Twenty Twenty-Two thema gebruikt bijvoorbeeld twee headertags en het kan moeilijk zijn om de juiste combinatie van CSS te vinden om je code op het juiste element te laten werken. Dit is zelfs met het templateklasse dialoog in de Block Editor (als je de FSE functionaliteit gebruikt):

The Brave Inspector toont meerdere header tags voor het Twenty Twenty-Two thema.
The Brave Inspector toont meerdere header tags voor het Twenty Twenty-Two thema.

Hoe dan ook, de code die je nodig hebt, is hetzelfde:

Akhil Arjun biedt hiervoor een tweezijdige oplossing:


​​header {

    position: sticky; top: 0;

}

Je kunt echter ook overwegen om de eigenschap position: fixed te gebruiken, die nog een paar regels code gebruikt:


header {

    position: fixed;

    z-index: 99;

    right: 0;

    left: 0; 

}

Dit gebruikt z-index om de header naar de voorkant van de stack te brengen, en vervolgens een vast kenmerk om het boven aan het scherm te laten blijven.

Houd er rekening mee dat je hier mogelijk een nieuwe klasse moet toevoegen om de sticky header toe te passen. Hoe dan ook, dit zou de basis van je sticky header moeten implementeren. Als je dit eenmaal hebt vastgesteld, wil je verder aan het ontwerp werken om het te laten werken met de rest van je site.

Tips om je sticky headers effectiever te maken

Als je eenmaal een methode hebt om een sticky header te maken, wil je weten hoe je deze kunt perfectioneren. Er zijn veel manieren om het basisontwerp te verbeteren en ervoor te zorgen dat het voldoet aan de behoeften van de bezoekers van je site.

Een goede analogie voor je eigen sticky header is om ervoor te zorgen dat het zich gedraagt als een goede sportscheidsrechter. Vaak weet je niet dat ze er zijn. Als een speler of coach ze echter nodig heeft, zijn ze er meteen en aanwezig.

Je sticky header zou hetzelfde moeten doen – blijf in de schaduw, of uit het zicht totdat de gebruiker het nodig heeft. Je kunt dit bereiken met een paar vuistregels die je (zoals altijd) kunt kiezen om te gebruiken als het ontwerp daarom vraagt:

  • Houd het compact. Schermruimte is kostbaar, dus probeer de header klein te houden. Je kunt een oplossing implementeren waarbij je header op een dynamische manier wordt geschaald, op basis van het gebied van de site waarop deze wordt weergegeven.
  • Gebruik verborgen headers en menu’s op kleine schermen. Met een extensie zou je ervoor kunnen kiezen om een menu te verbergen, net zoals het eerdere voorbeeld van Hammerhead. Dit helpt om de header compact te houden en sluit aan bij het volgende punt.
  • Zorg ervoor dat je geen afleiding introduceert. Hoe groter het aantal elementen op het scherm, hoe meer ze strijden om aandacht. Als de sticky header geen element hoeft te tonen, verwijder het dan – je body content zal het waarderen, net als je statistieken.
  • Bied contrast aan. Dit is een truc uit het call-to-action (CTA) playbook. Als je contrast gebruikt voor de sticky header als geheel en de afzonderlijke elementen, kun je de aandacht trekken naar waar je het nodig hebt – of ergens anders heen duwen.

Over het algemeen doet je sticky header alleen wat je nodig hebt, en niet meer dan dat. Soms moet je dingen minimaal houden, andere keren moet je het inpakken met links, logo’s en aanmeldingsformulieren. Hoe dan ook, als je de UX en UI in gedachten houdt, neem je altijd een gebruikersgerichte beslissing.

Samenvatting

Bruikbaarheid en de UX van je site zijn zo belangrijk dat ze de eerste, tweede en derde dingen moeten zijn die je vastlegt wanneer je deze ontwerpt en bouwt. De navigatie van je site is daar slechts één aspect van, maar je moet de beste manier bedenken om een gebruiker zonder gedoe op je site te laten bewegen. Een sticky header is een goede manier om dit te bereiken.

Als je de header naar de bovenkant van het scherm vastzet, heeft de gebruiker altijd navigatie-elementen bij de hand. Dit is vooral handig op apparaten die moeten scrollen om door de hoofdcontent te bewegen, maar het biedt voordelen, ongeacht hoe hij eruit ziet. Als je een WordPress gebruiker bent, kun je een plugin of code kiezen om een sticky header te implementeren. Het is echter mogelijk dat je de functionaliteit in je favoriete thema ziet, in welk geval je dit kunt gebruiken en een slag kunt slaan op flexibiliteit.

Denk je dat een sticky header een essentieel UX en UI element van een website is, en zo niet, wat dan wel? Laat het ons weten in de comments hieronder!

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).