Headers zijn een van de eerste dingen die klanten opvallen als ze je website bezoeken. Headers hebben veel potentieel; ze kunnen je merk benadrukken, belangrijke informatie weergeven en bezoekers helpen gemakkelijk door je website te navigeren. Daarom streef je naar een uitzonderlijke header.
Terwijl de positie van de header van pagina tot pagina constant blijft, hoeft de inhoud van de header niet statisch te blijven. Want wat als de header van de homepage informatie bevat die op andere pagina’s storend is?
Je kunt een koptekst configureren die verandert om zo relevant te blijven voor de huidige pagina.
In deze handleiding worden de beste gebruiksmogelijkheden voor alternatieve headers uitgelegd en wordt vervolgens uitgelegd hoe je headers in WordPress kunt bewerken. We sluiten af met best practices zodat je website zo effectief mogelijk is.
De basis van alternatieve headers voor WordPress
De header is de horizontale strook helemaal bovenaan elke website. Meestal bevat deze de naam, het logo en de slogan van het merk, plus een navigatiemenu. Soms vermelden merken ook contactgegevens en links naar sociale media.
Op sommige typen webpagina’s zijn headers effectiever als je andere informatie of helemaal geen informatie gebruikt. Daarover leer je meer in deze handleiding.
Alternatieve headers zijn headers die zijn aangepast voor specifieke pagina “s binnen een website. Je kunt de informatie die wordt weergegeven op de header van een pagina wijzigen of navigatiemenu” s voor die pagina aanpassen.
Deze doordachte headers verbeteren de klantervaring door de juiste informatie op het juiste moment weer te geven. Met dat in gedachten zul je nu leren hoe het bewerken van headers in WordPress je bedrijf een boost kan geven door je publiek te helpen.
Waarom je een alternatieve header moet gebruiken
Een website bevat meestal meerdere pagina “s met verschillende lay-outs. Zo heeft een pagina over ons meestal enkele foto” s, gevolgd door subkoppen en paragrafen. De typische productcataloguspagina heeft daarentegen een rasterindeling, zoekfilters en veel navigatielinks.
Ongeacht de lay-out blijft de header van de website bovenaan staan. Bekijk de volgende use cases om te leren wanneer homepaginakoppen suboptimaal zijn en hoe alternatieve koppen een oplossing kunnen bieden.
Website navigatie vereenvoudigen
Klanten gebruiken de header van een site vaak om te navigeren. Daarom bevatten headers van startpagina “s meestal links naar belangrijke secties zoals de pagina over ons en de ondersteuningspagina. Sommige pagina” s hebben baat bij extra knoppen om de navigatie te vereenvoudigen.
Stel je bijvoorbeeld de header van de homepage van een kledingmerk voor. Deze toont de standaardknoppen home, products en support. Een klant klikt op de productenpagina en begint te winkelen. Ze willen graag gemakkelijk tussen categorieën kunnen schakelen, om van hoeden naar schoenen te gaan.
Door een alternatieve header te configureren met navigatieknoppen voor elke grote kledingcategorie, kunnen klanten gemakkelijker iets vinden om te kopen. Aan de andere kant zou het onoverzichtelijk zijn om al die links in de header van de homepage op te nemen.
Alternatieve headers zijn de oplossing voor een eenvoudige navigatiemenu-ervaring die nog steeds nuttige links weergeeft wanneer ze nuttig zijn.
Het online kledingmerk Boohoo is een uitstekend voorbeeld van het gebruik van alternatieve headers voor navigatie. Klik op de dames- of herenpagina’s; de header wisselt van menu afhankelijk van de doelgroep.
Houd je marketing relevant
Veel merken gebruiken de header om advertenties weer te geven, zoals kortingen, lidmaatschappen en limited-time producten. Maar deze promoties zijn niet relevant voor elke pagina op de website.
In feite zegt 66% van de consumenten dat de meeste advertenties die ze online zien niet relevant voor hen zijn. Dit heeft ertoe geleid dat veel mensen advertenties volledig negeren, tenzij ze goed getimed en doelgericht zijn.
Wanneer klanten bijvoorbeeld je ondersteuningspagina bezoeken, zijn ze gericht op het krijgen van antwoorden en hulp. Het beste is om verkooptactieken voorlopig aan de kant te schuiven.
Om ervoor te zorgen dat je headerpromoties effectief zijn, moet je leren hoe je headers in WordPress bewerkt. Bewaar header-advertenties voor pagina “s waar de klant waarschijnlijk bereid is om te kopen. Wees vooral terughoudend op ondersteunings-, afreken- en resourcepagina” s.
Het afrekenproces stroomlijnen
Net als elk ander onderdeel van de winkelervaring willen klanten snel en probleemloos afrekenen – minimale stappen, minder gegevensinvoer en geen onderbrekingen. 18% van de klanten verlaat het winkelwagentje vanwege een ingewikkeld afrekenproces.
Als kopers hun aankoop afronden, hoeven ze niet naar je sociale-mediapagina’s of ergens anders te navigeren. Afleiding is de vijand van het sluiten van een verkoop.
Optimaliseer je afrekenpagina door navigatieknoppen, pictogrammen voor sociale media en andere niet-essentiële links uit de header te verwijderen.
Nu je de voordelen kent van het gebruik van alternatieve headers, laten we eens leren hoe je headers in WordPress kunt bewerken met verschillende methoden.
Methoden om aangepaste WordPress-headers te maken
Om headers in WordPress te bewerken, kun je de basiscode wijzigen, de codeblokken van een websitebouwer gebruiken of kiezen voor de eenvoudigste opties – thema’s en plugins.
Het is het beste om elke methode te overwegen voordat je er een kiest voor je website.
Methode 1: Code
Als je goed thuis bent in de codering van WordPress, kun je alternatieve headers maken met aangepaste CSS. Dit houdt in dat je kopieën maakt van het bestand header.php, de themabestanden aanpast en ze toepast op de gewenste pagina’s via de sjablooncode.
Vergeet niet om een child theme te maken voordat je de basiscode wijzigt. Zo kunt u uw wijzigingen testen zonder de hoofdwebsite te beïnvloeden.
Hoewel het gebruik van aangepaste code werkt, kan het ingewikkeld zijn als je weinig tot geen kennis hebt van codering. Het kan ook duur worden als je van plan bent een webontwikkelaar in te huren om het te doen.
Methode 2: Websitebouwers
Website builders (of theme builders), zoals WonderSuite van Bluehost, bieden een eenvoudigere manier om code te gebruiken om alternatieve headers te maken.
Deze tools maken meestal gebruik van stukjes code, zogenaamde blokken, en gebruiken een drag-and-drop interface om websitefuncties te maken en aan te passen.
Je kunt bestaande headers bewerken en geheel nieuwe headers maken die alleen van toepassing zijn op bepaalde pagina’s op je website. Omdat websitebouwers gebruikmaken van codering op basis van blokken, heb je geen computerdiploma nodig.
Dat gezegd hebbende, als je wilt profiteren van de ontwerpflexibiliteit van deze tools, zal enige basiskennis van codering helpen.
Methode 3: WordPress-thema’s
Thema “s zijn kant-en-klare sjablonen die worden gebruikt om het uiterlijk van een website te veranderen. De WordPress repository heeft meer dan 11.000 thema” s, waarvan er veel alternatieve thema-headers ondersteunen.
De meeste thema “s hebben ingebouwde pagina-editors met verschillende lettertype-, kleur- en stijlopties. Met een paar klikken kun je alternatieve kopteksten maken en deze toepassen op de gewenste pagina” s.
Omdat WordPress thema’s kant-en-klaar zijn, is er geen codering voor nodig om ze aan te passen. Zorg er echter wel voor dat je een WordPress thema kiest dat alternatieve headers ondersteunt.
Methode 4: Plugins
Als je al een websitethema gebruikt en het ondersteunt geen alternatieve headers, gebruik dan plugins om je pagina’s aan te passen. Plugins zijn WordPress customizer add-ons, elk ontworpen om een specifieke functie mogelijk te maken.
Net als thema’s heeft het gebruik van WordPress plugins vaak een ingebouwde interface waarmee je eenvoudig wijzigingen kunt aanbrengen.
Volg de onderstaande stappen om aangepaste headers te maken met een WordPress thema of plugin.
Een koptekst bewerken in WordPress
1. Kies een WordPress thema of plugin die alternatieve headers ondersteunt.
2. Ga in je WordPress dashboard naar Uiterlijk > Aanpassen en maak een nieuwe header.
3. Pas de aangepaste koptekst toe op de gewenste pagina’s.
Je kunt kiezen uit thema’s, plugins of een combinatie van beide. Hoe dan ook, voor het maken van alternatieve headers op deze manier is geen technische kennis nodig.
Hieronder wordt stap voor stap uitgelegd hoe je headers in WordPress kunt bewerken voor een specifieke pagina.
1. Kies een WordPress thema of plugin die alternatieve headers ondersteunt
WordPress heeft talloze opties voor websitethema’s, maar niet bij elk thema kun je alternatieve headers instellen.
Sommige thema “s, zoals Blocksy PRO, ondersteunen standaard alternatieve headers. Vind compatibele thema” s via de volgende methoden:
Ga op je WordPress dashboard naar Uiterlijk > Thema’s en klik in het dropdown menu op Nieuw thema toevoegen.
Gebruik in de zoekbalk trefwoorden als “alternatieve headers”, “meerdere headers” en “aangepaste headers” om thema’s te vinden die deze functie ondersteunen.
Als je een thema vindt waarin je geïnteresseerd bent, lees dan zorgvuldig de beschrijving en controleer of het alternatieve headers ondersteunt.
Om je beslissing te vergemakkelijken, raadpleeg je bronpagina “s zoals Themeisle en WPHub, die thema” s catalogiseren en beoordelen.
Als je al een thema op je WordPress site hebt toegepast, zoek dan uit of het aangepaste headers ondersteunt; bezoek de officiële website van het thema of neem contact op met het ondersteuningsteam.
Gebruik een thema-aanpassingsplugin om alternatieve headers te configureren als je al een WordPress-thema hebt toegepast dat geen ingebouwde alternatieve header-tool heeft.
Sommige gratis plugins helpen je om headers aan te passen met afbeeldingen uit je galerij of de mediabibliotheek van WordPress; Unique Headers en WP Header Images zijn goede voorbeelden.
Als je andere aanpassingsopties wilt, ga dan naar je WordPress dashboard en ga naar Plugins > Nieuwe plugin toevoegen. Gebruik in de zoekbalk trefwoorden als “alternatieve headers”, “meerdere headers” en “aangepaste headers”.
Als je een bevredigende plugin hebt gevonden, controleer dan de details om er zeker van te zijn dat deze compatibel is met je huidige versie van WordPress. Klik vervolgens op Installeren om de plugin te downloaden. Activeer tot slot de plugin – je WordPress dashboard zal je hierom vragen.
2. Ga in je WordPress dashboard naar Uiterlijk > Aanpassen en maak een nieuwe header aan
Als je thema of plugin klaar is, ga dan naar je WordPress dashboard, open via de zijbalk het menu Uiterlijk en klik op de optie Aanpassen . Selecteer vervolgens de optie Header in het zijmenu.
Als je een thema hebt gekozen met een alternatieve headerfunctie of als je een plugin voor het aanpassen van thema’s hebt toegepast, zie je de optie Nieuwe header maken .
Gebruik deze functie om aangepaste kopteksten te maken; je kunt kopteksten toevoegen en verwijderen. Bovendien kun je de headerstijl, de achtergrondkleur en het lettertype wijzigen.
3. Pas de aangepaste koptekst toe op de gewenste pagina’s.
Zodra je klaar bent met het aanpassen van een nieuwe header, pas je deze toe op de pagina “s die je wilt. Afhankelijk van je gekozen thema of plugin kan deze optie anders geformuleerd zijn – zoek naar iets dat lijkt op Toepassen op pagina” s of Voorwaarden weergeven.
De optie Toepassen op pagina “s is rechttoe rechtaan; hiermee kun je de pagina” s kiezen waarop je de aangepaste koptekst wilt hebben.
De optie Voorwaarden weergeven is ingewikkelder. Naast het selecteren van pagina “s kun je ook scenario” s kiezen die de koptekst veranderen. De koptekst kan bijvoorbeeld van kleur veranderen als bezoekers naar beneden scrollen. Of je kunt het uiterlijk veranderen als klanten op een bepaald product klikken.
Bekijk hoe dan ook eerst de wijzigingen voordat je ze opslaat.
Best practices en use cases voor alternatieve headers
Naast de basisbeginselen van het bewerken van headers in WordPress, zullen de best practices hieronder je uitvoering aanscherpen en de wijsheid delen die je nodig hebt om alternatieve headers effectief te gebruiken.
Om de gebruikerservaring van je website te verbeteren, is het essentieel dat je de juiste header-elementen kiest voor elke pagina. Hier zijn enkele tips die je kunnen helpen bij het maken van je keuze.
Homepage: De homepage is vaak de eerste pagina die klanten zien als ze je website bezoeken. Wanneer u de header van uw homepage maakt, probeer dan alle elementen te bevatten die nodig zijn om de algehele lay-out van de website te vereenvoudigen.
Naast het logo en de merknaam van de site moet de header van de homepage een navigatiemenu bevatten naar belangrijke pagina’s, zoals de productenpagina en de ondersteuningspagina.
De header van de homepage moet ook sociale pictogrammen en contactinformatie bevatten voor klanten die contact willen opnemen.
Productpagina’s: Als je meerdere soorten producten verkoopt, moet de kop van je productpagina snelkoppelingen bevatten naar de verschillende categorieën. Zo kunnen klanten gemakkelijk de gewenste catalogus vinden.
Als extraatje helpt het weergeven van productcategorieën in je header klanten om het complete spectrum te leren kennen van wat je verkoopt.
Afrekenpagina: Als het aankomt op het maken van een afrekenpagina, is minder beter. Te veel elementen op de header leiden klanten af; met onnodige knoppen kan de klant elders naartoe navigeren in plaats van zijn aankoop af te ronden.
Houd de koptekst van de afrekenpagina minimaal; zelfs alleen de merknaam en het logo zijn voldoende.
Over ons en ondersteuningspagina’s: Als een consument je pagina over ons bezoekt, is dat waarschijnlijk alleen om informatie te verzamelen. Als ze je ondersteuningspagina bezoeken, hebben ze in de eerste plaats hulp nodig.
Dit is een geweldige kans om jezelf te laten zien als een klantgericht merk door je publiek van informatie te voorzien – zonder ze tot kopen aan te zetten.
Vermijd advertenties en aanbiedingen op de header van je supportpagina. Zorg ervoor dat u uw contactnummer en e-mailadres weergeeft, zodat klanten u snel kunnen bereiken.
Pagina “s met loyaliteitsprogramma” s en abonnementen: Configureer een unieke header rond het programma. Wees duidelijk over waar klanten informatie kunnen vinden over waar ze zich bij hebben aangesloten.
Neem naast basiselementen zoals het merklogo en de homeknop ook links op naar de introductie-, instructie-, formulieren- en FAQ-pagina’s met betrekking tot het programma.
Pagina gebruikersaccount: Als klanten zich op je website kunnen registreren om producten te kopen, geef ze dan gemakkelijk toegang tot beheeropties. Pas de header aan om links op te nemen naar accountinformatie, bestelgeschiedenis, verlanglijstje, hulpbronnen en betalingsinformatie.
Landingspagina’s: Een landingspagina geeft meestal prioriteit aan conversies die verband houden met een specifiek product of een specifieke service. De header moet deze focus volgen.
Als je bijvoorbeeld een landingspagina hebt gemaakt voor een promotieaanbieding, moet de koptekst links bevatten naar de producten die onder de promotie vallen en enkele veelgestelde vragen over de aanbieding.
Op dezelfde manier kan de kopregel op een landingspagina voor leadconversie linken naar nuttige bronnen die de pijnpunten van de bezoeker aanpakken.
Blog sectie pagina’s: Verdeel je blogsectie in categorieën zoals tutorials, updates, persberichten, evenementen en casestudies. Neem links naar de hoofdcategorieën op in je header zodat klanten direct naar hun interesses kunnen gaan.
Laatste gedachten: Hoe headers bewerken in WordPress
Alternatieve headers zijn een effectief hulpmiddel om een betere ervaring te creëren voor de kijkers van je website. Nu je weet hoe je een header in WordPress kunt bewerken, kun je de kwaliteit van pagina’s op je website verhogen.
Aan de andere kant hebben eigenaren van kleine bedrijven wel wat beters te doen dan het handmatig bewerken van headers voor elke webpagina. Dat is een taak voor een ervaren WordPress website ontwerper die WordPress header aanpassingen door en door kent.
De meeste mensen weten niet waar ze zo’n specialist moeten zoeken, maar de website ontwerpservice van Bluehost brengt ze naar je toe. Vraag een consult aan om een op maat gemaakte website te ontvangen die aan al je eisen voldoet – van aangepaste headers tot mobiele compatibiliteit tot eCommerce hosting.
