Header
Ook wel kop van de website
Wat is een header?
Een header (ook wel kop van de website) is het bovenste deel van een pagina, met meestal je logo en menu. Het is iets anders dan de HTML-head: die bevat onzichtbare informatie voor browsers en zoekmachines, zoals de meta title.
Veelgestelde vragen over header
Hoe pas ik de header van mijn WordPress-website aan?
Dat hangt af van je thema. Werk je met een modern blokthema, dan pas je de header aan via de Site Editor. Gebruik je een klassiek thema, dan zit het meestal in de Customizer.
- Blokthema: ga naar Weergave > Editor > Patronen en kies het template-onderdeel Header.
- Klassiek thema: ga naar Weergave > Customizer en zoek naar Header of Kop.
- Gebruik je een paginabouwer, dan maak je de header in Elementor Pro via de Theme Builder.
Sommige thema's, zoals Astra, hebben een eigen header builder. Maak voor de zekerheid eerst een back-up voordat je grote wijzigingen doet.
Wat moet er in een goede header staan?
Een goede header helpt bezoekers direct verder. Houd hem overzichtelijk en zet er alleen in wat echt nodig is:
- Je logo, met een link naar de homepage.
- Een menu met je belangrijkste pagina's.
- Eén duidelijke call-to-action, een knop die aanzet tot actie, zoals 'Offerte aanvragen'.
- Eventueel je telefoonnummer, als bellen belangrijk is voor je bedrijf.
- Bij een webshop: een zoekveld en het winkelmandje.
Twijfel je over een onderdeel? Vraag je dan af of een bezoeker het op elke pagina nodig heeft. Zo niet, dan hoort het waarschijnlijk niet in de header.
Zet ik trackingcodes in de header of in de head?
In de head. Dat is een veelgemaakte vergissing door de gelijkende namen. Codes van bijvoorbeeld Google Analytics of Google Tag Manager horen in de onzichtbare HTML-head. Plak je ze in een tekstblok in je zichtbare header, dan werken ze vaak niet of verschijnt de code als tekst op je site.
In WordPress regel je dit zonder te knutselen in themabestanden:
- Koppel Google-diensten met Site Kit by Google.
- Plaats andere codes met WPCode, via het veld voor de head.
Zo blijven je codes ook bewaard als je thema een update krijgt.
Is een sticky header die meescrollt handig of juist irritant?
Het kan allebei. Een sticky header blijft bovenaan staan terwijl je scrolt. Dat is handig op lange pagina's en webshops, omdat het menu en je actieknop altijd binnen bereik zijn.
Hij wordt irritant als hij te veel ruimte inneemt, vooral op een telefoon. Let daarom op:
- Houd de meescrollende versie compact, bijvoorbeeld alleen logo, menu-icoon en knop.
- Test op je eigen telefoon of er genoeg ruimte overblijft voor de inhoud.
- Kijk in je statistieken of bezoekers vaker doorklikken na de wijziging.
Veel thema's hebben hiervoor een simpele aan/uit-instelling in de header-opties.
Waarom ziet mijn header er op mobiel rommelig uit?
Meestal staat er te veel in voor een klein scherm. Logo, menu, telefoonnummer en knoppen passen op een computer naast elkaar, maar op een telefoon schuiven ze over elkaar of worden ze piepklein.
- Controleer of je thema een apart mobiel menu gebruikt, het bekende hamburgericoon met drie streepjes.
- Verberg minder belangrijke onderdelen op mobiel via de instellingen van je thema of paginabouwer.
- Gebruik een kleinere of liggende versie van je logo.
- Leeg je cache na wijzigingen, anders zie je soms nog de oude versie.
Bekijk het resultaat daarna op een echte telefoon, niet alleen in de voorbeeldweergave.
