Hero-secties die converteren: 6 patronen die werken

Een hero sectie op je website converteert als een bezoeker binnen een paar seconden snapt wat je doet, voor wie en wat de volgende stap is. Dat vraagt om een concrete kop, een korte onderbouwing, één duidelijke call-to-action en een beeld dat de boodschap versterkt in plaats van afleidt. Mooi is mooi, maar duidelijk wint.

In dit artikel zetten we eerst op een rij wat een hero moet doen, en daarna zes patronen die je kunt gebruiken, afhankelijk van je bedrijf en je bezoekers.

Wat moet een hero sectie doen?

De hero is het eerste wat een bezoeker ziet, op desktop én op mobiel. Hij moet drie vragen beantwoorden, het liefst zonder te scrollen:

• Wat is dit? Welk product of welke dienst bied je aan?
• Is dit voor mij? Voor welk type klant, welke regio of welk probleem?
• Wat moet ik nu doen? Offerte aanvragen, bellen, een product bekijken, verder lezen?

Veel hero’s falen op de eerste vraag. Koppen als ‘Wij maken het verschil’ of ‘Passie voor kwaliteit’ zeggen niets over wat je doet. Een bezoeker die moet raden, haakt af. Herkenbaar? In waarom je website geen leads oplevert lees je hoe je meet waar bezoekers afhaken.

De bouwstenen van een hero die converteert

Onderdeel	Functie	Tip
Kop (h1)	Zegt wat je doet en voor wie	Concreet boven creatief; liefst met het belangrijkste zoekwoord
Subkop	Onderbouwt de belofte	Eén of twee zinnen met een concreet voordeel
Primaire CTA	De belangrijkste volgende stap	Actiegerichte tekst, zoals ‘Plan een kennismaking’
Secundaire CTA	Alternatief voor wie nog niet klaar is	Visueel ondergeschikt, zoals ‘Bekijk ons werk’
Beeld of video	Maakt de belofte tastbaar	Echt werk of product, geen generieke stockfoto
Vertrouwenssignaal	Neemt twijfel weg	Reviewscore, klantlogo’s of keurmerk

Niet elke hero heeft alle onderdelen nodig. Maar een kop, een subkop en één duidelijke CTA zijn het minimum.

6 patronen voor een hero sectie op je website

1. De heldere belofte

Een grote, concrete kop, een korte subkop en één knop. Weinig beeld, veel witruimte. Dit patroon werkt goed voor dienstverleners met een duidelijk aanbod. Stel: een boekhoudkantoor in Arnhem zet ‘Boekhouding en belastingaangifte voor zzp’ers in Arnhem’ als kop, met daaronder ‘Vaste prijs per kwartaal, persoonlijk contact’ en een knop ‘Vraag een offerte aan’. Geen kunstje, wel direct duidelijk.

2. Split-screen: tekst links, beeld rechts

De klassieker, en niet voor niets. Links de boodschap en CTA, rechts een beeld van het product of het resultaat. Belangrijk is dat het beeld iets laat zien wat de tekst ondersteunt: het eindresultaat van een verbouwing, de interface van je software, je team aan het werk.

3. Probleem eerst

De kop benoemt het probleem van de bezoeker, de subkop de oplossing. ‘Je website trekt bezoekers maar geen aanvragen?’ werkt als de bezoeker zich daarin herkent. Gebruik dit patroon alleen als je doelgroep een duidelijk, herkenbaar probleem heeft.

4. Directe actie

Voor bedrijven waar snelheid telt, zoals spoedservice, verhuur of horeca: de actie zit in de hero zelf. Een postcodeveld, een datumkiezer of een prominent telefoonnummer. De bezoeker hoeft niet verder te zoeken.

5. Bewijs bovenaan

Hier staat social proof centraal: een reviewscore, bekende klantlogo’s of een korte quote direct onder de kop. Dit werkt voor markten waarin vertrouwen de grootste drempel is, zoals zorg, juridische diensten of grote investeringen.

6. Kinetisch en expressief

Grote typografie, beweging en een uitgesproken stijl. Dit patroon zet je merk neer en valt op, maar het moet de boodschap dragen, niet verstoppen. De kop blijft leesbaar, de animatie vertraagt de pagina niet en de CTA is altijd zichtbaar. Subtiele hover-effecten op knoppen helpen daarbij; ideeën vind je in gedurfde CSS-knoppen en kant-en-klare code in ons CSS-lab met gratis snippets.

Veelgemaakte fouten in hero-secties

• Sliders en carrousels: veel bezoekers zien alleen de eerste slide, en de beweging leidt af. Kies één boodschap.
• Te veel knoppen: drie even prominente CTA’s betekent geen keuze. Maak er één primair.
• Zware video of afbeelding: de hero-afbeelding is vaak het grootste element bovenaan en dus bepalend voor de laadsnelheid (LCP). Comprimeer, gebruik moderne formaten en laad hem niet lazy.
• Tekst over een drukke foto: slecht leesbaar, zeker op mobiel. Zorg voor voldoende contrast.
• Alleen ontworpen voor desktop: op mobiel valt de CTA dan onder de vouw of wordt de kop in vijf regels gebroken.

Welk hero-patroon past bij jouw bedrijf?

De zes patronen sluiten elkaar niet uit; veel goede hero’s combineren er twee. De keuze hangt vooral af van hoe je bezoekers binnenkomen en hoe ver ze al zijn in hun beslissing.

• Bezoekers met een urgente vraag, zoals iemand met een lekkage of een kapotte auto, willen direct handelen. Kies voor directe actie, aangevuld met een vertrouwenssignaal.
• Bezoekers die vergelijken, bijvoorbeeld voor een verbouwing of een nieuw softwarepakket, zoeken houvast. Een heldere belofte of split-screen met bewijs eronder werkt dan goed.
• Bezoekers die je nog niet kennen en via social media of een campagne binnenkomen, hebben een probleemgerichte kop nodig die meteen herkenning oproept.
• Merken die willen opvallen in een markt waarin iedereen op elkaar lijkt, kunnen kiezen voor een kinetische, expressieve hero, mits de basis klopt.

Twijfel je, kies dan de eenvoudigste variant die je boodschap draagt. Een rustige, duidelijke hero is makkelijker te verbeteren dan een complexe hero waarvan je niet weet welk onderdeel werkt.

Zo pak je het aan: je hero verbeteren in 5 stappen

1. Schrijf je kop als een antwoord: wat doe je, voor wie? Test hem door hem voor te lezen aan iemand die je bedrijf niet kent.
2. Kies één primaire actie die past bij de fase waarin je bezoeker zit. Voor een eerste bezoek is ‘Bekijk prijzen’ soms beter dan ‘Koop nu’.
3. Vervang generiek beeld door echt werk, je product of je team.
4. Check mobiel als eerste: staan kop en CTA in beeld zonder te scrollen, en laadt de pagina snel?
5. Meet en test: kijk naar klikken op de CTA en scrolldiepte. Test bij voldoende verkeer één verandering tegelijk, bijvoorbeeld alleen de kop.

Laat je een nieuwe site bouwen? Vraag dan bij elk bureau hoe ze de hero onderbouwen en testen. Meer vragen die je moet stellen, vind je in website laten maken: 10 vragen voor elk bureau.

Conclusie

Een goede hero sectie is geen kunstwerk, maar een duidelijke belofte met een duidelijke volgende stap. Kies het patroon dat past bij je aanbod en je bezoeker, houd hem licht en snel, en meet wat er gebeurt. Een uitgesproken stijl mag, zolang de boodschap de hoofdrol houdt. En onthoud: een hero is nooit af. Wat vandaag werkt, kan na een nieuwe dienst, een andere doelgroep of een nieuwe campagne om een andere invalshoek vragen. Kijk er daarom regelmatig opnieuw naar.

Wil je een hero, en een hele website, die opvalt én converteert? Ontdek onze aanpak voor maatwerk webdesign.