Met jouw website wil je gezien worden. Niet alleen in de zoekmachines, maar ook zodra bezoekers op jouw website komen. Je moet dus altijd de aandacht van jouw website bezoekers trekken. Dit kun je doen door een goede website header te maken.
Er zijn een groot aantal mogelijkheden op dit gebied te vinden. Een van de mogelijkheden die daarbij niet over het hoofd gezien mag worden is een website header. Je kunt deze eenvoudig zelf maken, waardoor je altijd een goed opvallende website hebt. Onderstaande handleiding zorgt ervoor dat je precies weet waar je aan kunt denken en hoe je ermee aan de slag kunt.
Wat is een website header eigenlijk?
Een website header wordt ook wel een banner of omslag genoemd. Het is een visueel element dat bovenaan jouw eigen website komt te staan. Het is vaak een rechthoekig, langwerpig vlak, waarvoor vaak afbeeldingen, de naam van de website, een ondertitel en een eventueel logo gebruikt worden. Met een header kun je jouw creativiteit vaak de vrije loop laten gaan, maar je moet er wel rekening mee houden dat deze bij jouw website en de huisstijl van het bedrijf past. Het is daarmee ook direct een manier om een eerste indruk achter te laten bij bezoekers van de website.
Een website header hoeft echter niet altijd uit een foto te bestaan. Tegenwoordig zijn er ook steeds meer compacte headers terug te vinden op websites. Deze compacte headers bestaan uit de bedrijfsnaam, het logo en een eventuele slogan. Dit zorgt voor een strak en functioneel beeld. Deze headers zullen voornamelijk als professioneel aangemerkt worden, maar zullen de aandacht van de bezoeker wellicht minder goed vasthouden. Er zijn dus altijd verschillende mogelijkheden op het gebied van een header te vinden en je kunt dit langwerpige vlak te allen tijde opvullen bij jouw website.
Wat is het belang van een goede header?
Een website header maken heeft verschillende voordelen voor jouw website. Het is een belangrijk middel om een goede eerste indruk achter te laten bij bezoekers van de website. Potentiële klanten weten hiermee direct wat ze aan jouw website hebben en waar jouw bedrijf voor staat. Als deze header niet in orde is, zal de bezoeker niet geneigd zijn om de rest van jouw website nog te bekijken. Onbewust kan de header dus zorgen dat de omzet van jouw bedrijf hoger wordt of juist vrijwel geen omzet meer gaat draaien. Het belang van een goede header is daarom groot en je moet ervoor zorgen dat je deze banner ontwikkelt voordat de website te bezoeken is voor publiek.
Je kunt je dan afvragen hoe het de klantbeleving kan beïnvloeden. De header moet voldoende informatie bieden en daarbij ook de structuur van de site aanduiden. Dit zal de gebruiksvriendelijkheid van jouw website ten goede komen. De structuur kan er tevens voor zorgen dat er interesse opgewekt wordt bij de bezoekers. Denk daarbij ook de interesse in andere onderwerpen. Zoekmachines als Google houden daarbij altijd bij hoeveel tijd een bezoeker op een pagina besteedt. Het aantal minuten dat iemand blijft lezen kan dus dankzij een goede header verhoogd worden. Dit leidt uiteindelijk weer tot een hogere ranking in de zoekmachines en daarmee ook weer tot meer verkeer op de website.
Kun je zelf een website header maken?
Een header maken voor website kun je eenvoudig zelf doen. Hiervoor zijn verschillende page builders terug te vinden. Denk hierbij aan Elementor of Divi van Elegant Themes. Deze builders zullen jou dan stap voor stap door het proces heen leiden, waardoor je binnen een korte tijd een goede header op jouw website hebt staan. Hierbij kun je ook meerdere voorbeeldfoto’s terugvinden. Ook zijn er vaak opties en instellingen waarmee je de bedrijfsnaam, het logo en een ondertitel al in kunt voegen. De stappen kunnen hierdoor altijd goed doorlopen worden en je hoeft geen professional in te schakelen om de werkzaamheden te verrichten. Wel moet je er rekening mee houden dat het tijd kan kosten. Zorg daarom ook dat je deze tijd indeelt, zodat je aan de slag kunt met jouw header.
Als de website voorzien is van een template, kan het zijn dat er al een afbeelding in de header staat. Deze kun je vervangen of bewerken door op jouw rechtermuisknop te drukken. Denk hierbij bijvoorbeeld aan WordPress, waarbij de thema’s voorzien zijn van een voorbeeldfoto. Deze standaard banner zal echter niet bij jouw bedrijf passen. Je moet hem aanpassen om op te vallen. De website header image maken kan dan op basis van veel voorkomende afmetingen. Enkele standaardafmetingen waar je aan kunt denken zijn:
- 840 x 400
- 1140 x 380
- 1100 x 104
- 1350 x 350
- 1600 x 440
Zoals je kunt zien is de afbeelding altijd lang en smal. Ook worden de afmetingen weergegeven in pixels. Je kunt iedere afbeelding gebruiken die je wenst te hebben.
Je kunt ook een header maken zonder afbeelding. Dit is een nog eenvoudigere manier om zelf mee te werken. In dit geval kun je een compacte header maken, waarin je jouw bedrijfsnaam en logo plaatst. Deze banner zal daarbij klein zijn, waardoor er meer ruimte overblijft voor andere content op de website. Het is hierbij echter wel belangrijk dat het bij jouw bedrijf aan gaat sluiten. Indien je echt een goede indruk achter wilt laten op jouw bezoekers en daarbij meer wilt bieden, kan een afbeelding vaak een betere keuze zijn. Zo blijf je namelijk altijd origineel en kun je jouw concurrenten achter je laten.
Een website header maken in WordPress
Voor WordPress zijn er te allen tijde mogelijkheden om de header te realiseren. Een header voor jouw website maken is daarbij binnen enkele stappen gedaan. Als eerste kijk je of jouw thema al een banner heeft. Als dit niet het geval is, kun je via de instellingen de header selecteren. Deze komt dan automatisch bovenaan de website te staan. Dit is vaak een standaardafbeelding, welke je aan kunt passen naar een eigen foto. Hiervoor kun je onder andere kijken in jouw eigen media-bibliotheek, maar ook foto’s die je in de mediabestanden van WordPress vindt of via het internet. Kijk altijd naar afbeeldingen die in de breedte georiënteerd zijn. Doordat je gebruik maakt van de thema’s binnen WordPress zijn er veel stappen die automatisch verlopen.
Je kunt daarbij ook gebruik maken van Elementor en Astra website templates. De combinatie met WordPress zorgt ervoor dat jij na het vinden van een goede afbeelding de website header kunt maken. Hiervoor kun je de foto eerst bijsnijden in een foto-bewerkprogramma. Hiervoor zijn zowel gratis als betaalde programma’s terug te vinden. Denk bijvoorbeeld aan GIMP. Dit gratis programma zorgt ervoor dat je jouw creativiteit de vrije loop kunt laten gaan en altijd een goede header voor de website krijgt. Deze kun je daarna eenvoudig invoegen op de juiste plek. Je hebt hiermee dus al een template om mee te werken en hoeft in de toekomst alleen nog een nieuwe afbeelding uit te zoeken om de website van een nieuwe header te voorzien.
Tips voor het maken van een originele website header
Een originele website header is belangrijk om jezelf te onderscheiden van de concurrentie. De foto’s moeten op een nauwkeurige manier geselecteerd worden, zodat alles aansluit bij jouw bedrijf en website. Een header website maken kun je daarbij zelf realiseren. Door het volgen van onderstaande tips weet je precies waar je nog allemaal aan kunt denken. Ook kun je er hiermee voor zorgen dat je altijd een originele website header in handen hebt, waarmee je jezelf onderscheidt van jouw concurrentie.
1. Kies voor een brede foto
Een website header image maken begint met het kiezen van een goede afbeelding. Je moet er hierbij voor zorgen dat je een brede foto in handen hebt. Als je zoekt naar afbeeldingen kom je de termen ‘horizontaal’ of ‘landscape’ tegen. Het is van belang dat je deze afbeeldingen kiest. Dit zorgt ervoor dat je niet lang bezig bent met het bewerken van de afbeelding en je de gehele foto tot zijn recht kunt laten komen. In bovenstaande informatie heb je al gelezen op welke afmetingen je kunt letten. Veel van deze pixels kun je al terugvinden binnen de zoekresultaten in een media-bibliotheek, maar je kunt ze dus ook aanpassen door een van de programma’s voor fotobewerkingen te gebruiken.
2. Zorg dat de foto aansluit bij jouw website
Een goede header past helemaal bij jouw website. Het is daarom belangrijk dat je niet voor de eerste de beste afbeelding gaat omdat deze er mooi uitziet, maar ook dat deze aansluit bij de website. Bedenk goed waar jouw bedrijf bekend om staat, welke producten of diensten je aanbiedt en welke doelgroep je wilt bereiken. Hoe beter de foto aansluit bij de website, hoe beter de indruk is die potentiële klanten krijgen. Je kunt hiervoor altijd met eigen foto’s van het bedrijf aan de slag gaan, maar ook kiezen voor stockfoto’s. Met de header moet te allen tijde duidelijk worden dat het om jouw bedrijf gaat en zal jouw website ook tot een geheel brengen.
3. Voorkom het gebruik van een slider
Je hebt ongetwijfeld wel eens een slider op een website voorbij zien komen in plaats van een statische banner. Deze slider is een tijd lang erg populair geweest. Toch moet je het gebruik ervan gaan voorkomen. Er zijn hiervoor verschillende redenen te bedenken. De belangrijkste reden is dat er eigenlijk nauwelijks op een slider geklikt wordt. Hoewel je meer producten of diensten via een slider aan kunt bieden, zullen bezoekers niet geneigd zijn om hierop te klikken. De meeste bezoekers blijven namelijk hangen bij de eerste slide. Bezoekers kijken daarom dus ook over deze aanbiedingen heen. Het komt jouw bedrijf daarom nooit ten goede.
Het gebruik van een slider zorgt er ook voor dat jouw website langzamer laadt. Een langzame website is storend voor bezoekers. Veel bezoekers zullen afhaken als een pagina niet binnen drie seconden geladen is. Deze zal daarom ook niet op jouw slider of header klikken. Ook zorgt het voor een lagere ranking in de zoekmachines. Een snellere website komt hoger in de zoekresultaten van Google te staan dan een langzame website. Dit leidt weer tot minder verkeer op de website en daarmee ook weer tot een lagere conversie. Je zult jouw omzet daarom eerder zien dalen dan groeien.
Het gebruik van een slider heeft ook als groot nadeel dat deze vaak niet goed werkt op smartphones en tablets. Hoewel er steeds meer mogelijkheden komen om een responsive slider te maken, zal een eventuele call-to-action wel wegvallen. Daarbij scrollen mensen liever dan dat ze horizontaal moeten swipen. Ook zullen de sliders ervoor zorgen dat andere content naar beneden wordt geduwd. De belangrijke informatie waar de bezoekers naar op zoek zijn, zal hiermee dus niet meer goed zichtbaar zijn. De bezoekers lopen wederom weg en Google zal jouw website straffen door een lagere ranking te geven.
4. Plaats het belangrijkste onderdeel in de header
Een header website maken zal daarbij altijd om de belangrijkste onderdelen van de website draaien. Het is daarom belangrijk dat het belangrijkste onderdeel altijd bovenaan de website komt te staan. Dit is te allen tijde de naam van de website of het bedrijf. Zo kun je ervoor kiezen om de naam in de vorm van het webadres te tonen. Dit zorgt ervoor dat de bezoekers het adres in hun hoofd krijgen, zonder dat ze het door hebben. Denk hierbij bijvoorbeeld aan Bol.com, waarbij de header voorzien is van het webadres in plaats van ‘Bol’.
Een ander belangrijk aspect van de header is de ondertitel. Dit wordt ook wel de baseline genoemd. Deze ondertitel zorgt ervoor dat bezoekers direct weten waarover jouw website gaat. Dit kan bijvoorbeeld de slogan zijn van het bedrijf, maar ook vermelden welke producten en diensten er aangeboden worden. Houdt er hierbij rekening mee dat deze ondertitel maximaal 10 woorden bevat. Zo blijft het bij één regel en zorg je dat het niet slordig overkomt. Alle andere informatie over de website of jouw bedrijf kun je immers op de ‘About-pagina’ plaatsen. Een prikkelende ondertitel zal daarom altijd meer te weeg brengen dan een grote lap tekst.
5. Maak de header mobielvriendelijk
Waar mensen vroeger uitsluitend via een desktop of laptop op zoek gingen naar een website, zijn er tegenwoordig steeds meer apparaten die verbonden zijn met het internet. Je moet er daarom ook voor zorgen dat de header mobielvriendelijk wordt. Een responsive header past zich automatisch aan de grootte van het scherm aan. Als jouw website mobielvriendelijk is, zal de header afmeting automatisch ook aanpassen aan jouw smartphone of tablet. Dit zorgt ervoor dat bezoekers altijd een goede indruk krijgen van jouw website. Ook zal het de SEO-ranking aanzienlijk verhogen.
Conclusie: Een template voor jouw website header ontwikkelen voor hergebruik
Wil je in de toekomst ook een goede header maken website gemaakt daarbij minder tijd kwijt zijn met het ontwikkelen? Dan kun je altijd een eenmalige template voor jouw website header ontwikkelen met Elementor. De Elementor header template geeft jou de gelegenheid om direct de perfecte header te hebben voor de verschillende pagina’s. Hiermee heb je ook in de toekomst een goede header en kun je de aandacht van bezoekers blijven trekken.
Wil jij zelf een eigen website gaan maken? Dan kan ik je zeker aanraden om mijn gratis ebook te downloaden waarin ik jou stap voor stap uitleg hoe jij zelf een professionele website kunt maken!
Tim Gerrits
Mijn naam is Tim Gerrits en ik heb een passie voor het bouwen van websites en webshops. Via deze blog help ik jou met het bouwen van jouw eigen website, webshop of online cursus. Daarnaast review ik ook WordPress thema’s, page builders en hostingpartijen zodat jij direct met de juiste tools van start kunt gaan!
