Wat moet er in een header en menu van een website staan?

De header is een van de belangrijkste elementen van een website. Deze is altijd zichtbaar. Op grote schermen zie je het gehele menu staan. Op kleinere schermen, zoals een mobiele telefoon, zie je het vaak als een hamburgermenu; een menu bestaande uit drie streepjes. Klikt de gebruiker hier op, klapt deze uit. Op een affiliatewebsite richt je het menu zo goed mogelijk in, zodat de bezoeker snel kan vinden waar hij of zij moet zijn. Wat moet er allemaal in een header staan? In dit hoofdstuk van de gratis cursus affiliate website maken leg ik uit waar je op moet letten. Ook geef ik een aantal voorbeelden.

Wat is een header op een website?

Een header is het bovenste gedeelte van een website. Je ziet dit (meestal) als eerste wanneer je een site bezoekt. Hier vind je meestal het logo, een menu met navigatie-items en soms een zoekbalk. Het helpt bezoekers om snel te begrijpen waar de website over gaat. Een goede header biedt precies de juiste items, zodat de bezoeker gemakkelijk kan vinden wat ze zoeken.

Verschillende soorten headers

In principe heb je -grofweg gezien-  drie soorten headers: statisch, plakkend (sticky) en transparant. De meeste websites hebben een statische header. Dit is een header die altijd op dezelfde plaats blijft staan. Als de bezoeker op een website scrolt, verdwijnt de header uit beeld. In sommige gevallen blijft de header staan als je scrolt. Je spreekt dan over een sticky header of plakkende header. Sommige websites kiezen voor een transparante header. Deze heeft geen eigen achtergrondkleur, maar past zich aan de achtergrond van de pagina waar je op bent aan.

Soorten menu’s

Naast de soort header, heb je ook veel verschillende soorten menu’s. Het gaat hier dan om de navigatieitems, waar links zoals Home, Blog, Contact e.d. in staan. Zeven soorten op een rij:

• Horizontaal menu: De Menu-items staan naast elkaar. Dit is een gebruikelijke vorm van navigatie op grotere schermen, zoals een pc of tablet. Een voorbeeld hiervan zie je op deze website zelf.
• Verticaal menu: Menu-items staan onder elkaar weergeven, meestal zie je dit in een zijbalk.
• Uitklapmenu: Pas na een klik of een hover met de muis klapt er een deel van het menu uit. Dit wordt ook wel een submenu genoemd. Vaak is deze vorm gecombineerd met bijvoorbeeld een horizontaal menu.
• Hamburgermenu: Compact icoon dat een uitklapbaar menu toont bij klik. Dit komt veel voor op mobiele telefoons. Vrijwel alle gebruikers met een mobiele telefoon herkennen dit symbool als menu-icoon.
• Mega-menu: Groot uitklapbaar menu met meerdere kolommen en categorieën. Dit soort menu’s zie je veel bij grotere websites en webshops. Denk bijvoorbeeld aan een bol.com, waar er enorm veel categorieën zijn.
• Accordeonmenu: Verticaal menu waarbij bij het klikken op een menu-item hetde bijbehorende subitems uitvouwt. Vaak wordt een ander item dat open staat weer ingeklapt. .
• Breadcrumb-menu: Dit element is geen primair menu. Breadcrumbs zijn essentieel voor een website en bieden ook een vorm van navigatie.

Een hamburger menu heeft niets met een hamburger (links) te maken. Het gaat hier om een soort icoontjes (rechts)

Wat moet er echt in een header staan?

Een header zie ik als het visitekaartje van je website. Ik vind persoonlijk een simpele header erg fijn, zonder al te veel poespas. De volgende items moeten wel altijd in een header:

Deze elementen vind ik essentieel voor een header:

• Logo of sitenaam
• Menu

Optionele elementen

• Zoekbalk of zoekicoon
• Contactinformatie
• Call-to-action (hier leg ik in een later hoofdstuk of module meer  over uit)

Zelf een header maken

Je kan een header in WordPress eenvoudig instellen. In alle thema’s zit al een header verwerkt. Je kan via de WordPress customizer aanpassingen doen. Werk je – net als ik – met het thema GeneratePress dan kan je via de demo importer kiezen uit heel veel soorten headers en demosites.