Zo bewerk je de WordPress header met de site editor of customizer (inclusief tips)

WordPress headers zijn bepalend voor de eerste indruk van je bezoekers. Door te weten hoe je een WordPress header kan bewerken, kun je je merkidentiteit versterken, de navigatie verbeteren of simpelweg het uiterlijk van je website opfrissen.

Gelukkig kun je in WordPress eenvoudig je header aanpassen via de Customizer of de Site Editor. Beide methodes zijn snel en gebruiksvriendelijk – je keuze hangt af van je voorkeur en het thema dat je gebruikt.

In dit artikel laten we zien hoe je met beide tools aan de slag gaat én delen we handige tips voor het maken van een effectieve header.

Zo bewerk je een WordPress header

Hoe je een header aanpast in WordPress, hangt af van het thema en de versie van de software die je gebruikt. Die bepalen namelijk welke functies en tools je tot je beschikking hebt om een custom header te maken.

De twee meestgebruikte methodes zijn het bewerken via de Site Editor en via de Customizer. In deze handleiding gebruiken we de nieuwste versie: WordPress 6.5.

Zo bewerk je de header in WordPress met de Site Editor

Vanaf WordPress versie 5.0 is de standaard editor geïntegreerd met Gutenberg. Deze editor werkt met blokken waarmee je eenvoudig elementen aan je website toevoegt, zoals kopjes, alinea’s, lijsten en afbeeldingen.

Let op: niet alle thema’s zijn compatibel met de Gutenberg Editor. Je kunt de Site Editor alleen gebruiken als je thema een blok thema is.

Zo pas je je header aan met de Site Editor:

1. Ga in je WordPress dashboard naar Weergave → Editor.
2. Zodra de Site Editor is geopend, klik je in het linkermenu op Patronen.
3. Scroll naar beneden naar het gedeelte Template Onderdelen en selecteer Header.Let op: het aantal beschikbare header template onderdelen hangt af van je gekozen blok thema.

4. Kies de header die je wilt aanpassen en klik op de knop Bewerken om de volledige bewerkmodus van de header in de Site Editor te openen.

5. In de header editor pas je bestaande blokken aan, vervang je ze of voeg je nieuwe blokken toe aan het header template gedeelte.

Elk thema dat met Gutenberg werkt, gebruikt verschillende standaardonderdelen in de header template onderdelen. Klik op de knop Lijstweergave om een overzicht te krijgen van alle blokken in de header die je aan het bewerken bent.

In dit voorbeeld werken we met het Twenty Twenty-Four blok thema, waarin de standaard header uit een groep blokken bestaat. Als jouw gekozen template onderdeel dat ook gebruikt, zie je door op het pijltje te klikken alle samengevoegde blokken.

Als je de hele header wilt verwijderen, kies je in de lijst voor Groep en klik je op de Opties voor Groep knop. Kies daarna voor Verwijderen.

Gebruik de Blok inserter om nieuwe elementen toe te voegen, zoals een slogan of een zoekbalk aan de header. Je vindt de plusknop door met je muis over het header onderdeel te bewegen of via de bovenste toolbar van de Site Editor.

Zoek daarna naar beschikbare blokken om aan je header toe te voegen. Sleep de nieuwe elementen naar de plek waar jij ze wilt hebben. Dit kan ook via de Lijstweergave, terwijl je direct rechts op het scherm de aanpassingen bekijkt.

Omdat het Twenty Twenty-Four blok thema al de belangrijkste header elementen bevat, laten we die staan zoals ze zijn. In de volgende stappen personaliseren we de websitetitel, het logo en het navigatiemenu in de volledige site editor.

Websitetitel aanpassen

Pas de standaard websitetitel aan in de volledige site editor door het Site Titel blok te selecteren.

Je kunt de websitetitel ook wijzigen via Instellingen in je WordPress dashboard. Dit past automatisch ook het header blok aan.

Website logo toevoegen

Er zijn verschillende manieren om je logo in WordPress te wijzigen, bijvoorbeeld via de Site Editor. Omdat dit huidige thema standaard een logo toont, vervang je eenvoudig het tijdelijke plaatje door het Site Logo blok in de header te selecteren.

Klik vervolgens op de knop Voeg een site logo toe in het midden van het blok.

Er verschijnt nu een pop-upvenster van de mediabibliotheek. Upload het nieuwe afbeeldingsbestand en vergeet niet de alt-tekst toe te voegen voordat je op Selecteren klikt.

Je ziet het logo van de site nu in je aangepaste header. Pas de grootte aan door de selectie puntjes naar binnen of buiten te slepen tot het goed is. Wil je het logo verplaatsen, gebruik dan de pijltjestoetsen in de toolbar van de blokeditor.

Navigatiemenu toevoegen

Je gekozen WordPress thema toont waarschijnlijk een navigatiemenu in de header. Bijvoorbeeld, het Twenty Twenty-Four blok thema gebruikt het Navigatieblok, waarmee je de structuur en het ontwerp van het menu direct kunt aanpassen.

Selecteer het Navigatieblok in de header om het menu te bewerken en klik op de knop Blok toevoegen.

Door dit te doen, wordt er automatisch een link placeholder gemaakt die je kunt koppelen aan iedere pagina op je website.

Voor makkelijker bewerken van het navigatiemenu, kies je het blok en klik je op Instellingen om het configuratievenster te openen.

Daar kun je de link instellingen aanpassen, zoals het label, de URL, attributen en het ontwerp. Heb je een custom CSS om het menu te stylen? Dan kun je die hier ook toevoegen.

Wil je een dropdownmenu maken? Ga dan naar de opties voor Custom Link en kies Add submenu link. Of voeg een submenu toe via de blok inserter.

Als je klaar bent met je aanpassingen, vergeet dan niet om op Opslaan te klikken voordat je de header editor afsluit.

Hoe je een WordPress header aanpast met de Customizer

Als je een oudere WordPress versie of een klassiek thema gebruikt, pas je de header aan met de Customizer. De stappen om bij de Customizer te komen kunnen verschillen, afhankelijk van het thema dat je gebruikt.

Zo heeft het standaard Twenty Twenty-One thema en oudere thema’s alleen de optie Site Identity, waarmee je het logo en de titel op de header kunt aanpassen.

Populaire thema’s van derden zoals Astra en Neve bieden meestal extra header opties, zoals het toevoegen van sociale media-iconen, vooral als je de premium versie hebt.

In deze uitleg gebruiken we het Astra thema. De stappen om bij de WordPress Customizer te komen zijn hetzelfde: ga naar Weergave → Customizer.

De Customizer van Astra heeft een drag-and-drop bouwer met een gebruiksvriendelijke interface. Links kies je welke website-elementen je wilt aanpassen, terwijl je rechts direct ziet wat de wijzigingen doen.

Om je website header te bewerken, selecteer je Header Bouwer uit de lijst.

Je ziet de header patronen aan de linkerkant en de header bouwer rechtsonder in beeld.

Standaard zijn er drie header regels beschikbaar. Je voegt een nieuw header element toe door met je muis over een lege plek te gaan en op het plusje te klikken dat verschijnt.

Je kunt de bestaande header elementen ook verslepen en neerzetten waar jij ze wilt hebben. Zodra alles op zijn plek staat, kun je ze verder personaliseren.

Titel en logo aanpassen

Open de Algemene instellingen door in het header configuratiepanel te klikken op Site Titel & Logo.

Klik op de knop Logo Wijzigen om de WordPress mediabibliotheek te openen en je website logo te uploaden. Pas daarna de breedte van de header aan zoals je wilt.

Als je liever geen logo in je header wilt, kun je de placeholder ook verwijderen.

Als je in het panel naar beneden scrolt, zie je de algemene instellingen voor de Site Titel. Daar kun je de tekst aanpassen, bepalen op welke apparaten deze zichtbaar is, een tagline toevoegen en kiezen of je verschillende elementen in de header tonen of juist verbergen.

Onderaan het instellingen panel kun je het website icoon aanpassen. Bezoekers zien dit icoon in hun browser als ze jouw website bezoeken.

Je kunt het uiterlijk van de website titel, het logo en de tagline aanpassen door over te schakelen naar het Design tabblad in het instellingen panel.

Navigatiemenu toevoegen

Om het navigatiemenu in je nieuwe header aan te passen, klik je in het instellingen panel op de optie Primair Menu. Net als bij de site titel en het logo kun je hier de Algemene en Design instellingen van het menu aanpassen.

Wil je de menu-items in de header wijzigen? Klik dan op Menu vanaf hier Configureren om direct naar de menu-instellingen te gaan. Zo kun je het menu aanpassen, terwijl je meteen ziet hoe de veranderingen op de live website eruitzien.

Als alternatief worden de instellingen die je aanpast via Weergave → Menu’s ook automatisch overgenomen in de header van het thema.

Zorg er wel voor dat je op Publiceren klikt voordat je de thema bouwer afsluit, zodat alle wijzigingen aan de header worden opgeslagen.

Waarom een WordPress header belangrijk is

De header van je WordPress website staat bovenaan elke pagina en zet meteen de toon voor de gebruikerservaring.

Een aangepaste header biedt verschillende voordelen voor je WordPress website:

• Navigatiehub – De header bevat vaak het hoofdmenu, waarmee bezoekers makkelijk hun weg vinden op jouw WordPress website.
• Merkuitstraling – Je logo, tagline en kleuren komen hier samen en laten meteen zien waar jouw merk voor staat.
• Visuele aantrekkingskracht – Een goed ontworpen header maakt je WordPress website niet alleen mooier, maar ook professioneler en uitnodigender.

Kort gezegd: je WordPress header heeft grote invloed op de gebruikerservaring (UX), omdat het bepaalt hoe mensen je WordPress website ervaren en ermee navigeren. Daarnaast helpt een duidelijke header ook bij je zoekmachineoptimalisatie (SEO), omdat het structuur geeft die belangrijk is voor zoekmachines.

Tips voor een effectieve WordPress header

Houd je WordPress header functioneel én aantrekkelijk met deze handige tips:

Zorg voor consistentie

Je header helpt bezoekers om soepel door je website te navigeren. Daarom is het belangrijk dat hij op elke pagina dezelfde uitstraling heeft. Of iemand nu op je startpagina, een blogartikel of een productpagina belandt – een uniforme header zorgt voor herkenning en vertrouwen.

Let er ook op dat je de header bijwerkt als je nieuwe pagina’s toevoegt of content verandert. Maak je bijvoorbeeld een nieuwe pagina aan? Vergeet dan niet om het navigatiemenu te updaten.

Sommige WordPress thema’s passen de header automatisch aan, maar niet allemaal. Controleer dus altijd of alles nog klopt.

Houd het simpel

Een header is belangrijk, maar te veel elementen kunnen je website rommelig maken. Een minimalistische header werkt meestal het beste.

Zorg dat je bezoekers zich kunnen focussen op wat écht telt: je logo, websitetitel, tagline en het menu.

Wil je toch iets groots toevoegen, zoals een uitgebreide zoekfunctie? Overweeg dan om die ergens anders op de pagina te plaatsen.

Gebruik beelden van hoge kwaliteit

Je logo is het visuele anker van je merk. Zet daarom in je header altijd een scherp en professioneel ogend logo.

Een wazige afbeelding doet af aan je uitstraling. Gebruik dus een bestand met hoge resolutie voor de beste eerste indruk.

Tip: laat je logo ontwerpen door een professional of maak er een met een AI-logo tool.

Denk aan mobiel gebruik

Bijna 60% van alle internet zoekopdrachten wordt gedaan via een mobiel apparaat. Het is dus belangrijk dat mobiele bezoekers je WordPress website makkelijk kunnen lezen en gebruiken, zonder in te zoomen of te schuiven.

Een mobielvriendelijke header past zich automatisch aan elk schermformaat aan en zorgt voor een soepele gebruikservaring, of iemand nu op een laptop, tablet of smartphone zit. Dit is niet alleen fijn voor je bezoekers, maar ook gunstig voor je SEO.

Kies daarom altijd voor een responsief WordPress thema of een pagina bouwer die mobiel ondersteunt. Zo blijft je aangepaste header automatisch goed zichtbaar en bruikbaar op elk apparaat.

Wil je controleren of je WordPress website mobielvriendelijk is? Dan kun je bijvoorbeeld de Mobiel Vriendelijke Test in Google Search Console gebruiken.

Conclusie

Leren hoe je de header in WordPress aanpast, helpt om je website er beter uit te laten zien én gebruiksvriendelijker te maken. Gelukkig kun je dit eenvoudig doen via de Site Editor of de Customizer – het zijn maar een paar simpele stappen.

Naast de uitleg over beide methodes, hebben we ook tips gegeven om je WordPress header effectief te houden. Hier een korte samenvatting:

• Houd je header consistent voor een professionele uitstraling.
• Zorg voor een rustige opzet met focus op de belangrijkste elementen: je logo, titel, tagline en navigatiemenu.
• Gebruik afbeeldingen van hoge kwaliteit om je branding te versterken.
• Kies een mobielvriendelijk WordPress thema, zodat je header goed werkt op elk schermformaat.

En tot slot: kies een betrouwbare WordPress hostingprovider zodat je website altijd bereikbaar is en snel laadt.

Hoe je een WordPress header aanpast FAQ’s

Lees hieronder de meestgestelde vragen over het aanpassen van je WordPress header:

Alle educatieve content op deze website wordt zorgvuldig gecontroleerd en voldoet aan de hoge redactionele standaarden van Hostinger.