De perfecte hero-sectie: zo maak je de beste eerste indruk

Een bezoeker beslist in drie seconden of jouw site iets voor hem is. In die paar tellen telt alleen de hero-sectie: het bovenste deel van je homepage, het stuk dat hij ziet zonder te scrollen. Slecht in beeld? Hij is weg. Sterk in beeld? Hij scrollt door en wordt misschien klant. Hieronder loop je langs wat een hero werkt of breekt.

Wat een hero-sectie moet doen

Een hero heeft drie taken. Vertellen wat je doet. Vertellen voor wie. En een bezoeker een eerste duw geven om verder te kijken of contact op te nemen. Alle drie binnen het deel van de pagina dat zichtbaar is zonder scrollen. Niets meer, want extra elementen leiden af. Niets minder, want zonder een van de drie heb je geen werkende hero.

Wat een hero niet hoeft: alle features uitleggen, je hele aanbod tonen, een carrousel met vijf wisselende slides die niemand uitleest. Bezoekers willen één heldere boodschap, geen overzicht. Een specifieke uitwerking over de psychologie van die eerste seconden staat in onze blog over de above-the-fold.

De vier elementen die elke hero nodig heeft

Een werkende hero bevat vier dingen. Een hoofd-koptekst die in een korte zin vertelt wat je doet. Een ondertekst van twee tot drie zinnen die context geeft of een belangrijk voordeel benoemt. Een duidelijke knop met een actie-tekst. En een visuele basis: een sterke foto, illustratie of grafisch element dat de boodschap ondersteunt.

Daaronder kun je optioneel een rij klantlogo's, een Trustpilot-score of een korte quote toevoegen voor social proof. Bezoekers vertrouwen merken sneller wanneer ze zien dat anderen al klant zijn. Maar overlaad de hero niet met badges, awards en certificaten. Eén of twee bewijspunten is meer dan tien generieke iconen.

Hoe je een koptekst schrijft die scoort

Vage koppen zijn de meest gemaakte fout. "Jouw partner in groei", "Wij maken het verschil", "Slimme oplossingen voor het MKB": prachtig bedoeld, betekent niets. Bezoekers kunnen er niet uit afleiden of jij past bij hun probleem. Een goede koptekst is specifiek over wat je doet en voor wie.

Drie formules werken bijna altijd. De wat-voor-wie-formule: "X voor Y". Bijvoorbeeld "Google Ads-beheer voor webshops". De resultaat-formule: "Krijg X zonder Y". Bijvoorbeeld "Krijg meer klanten zonder zelf advertenties te maken". De vraag-formule die de zoekvraag van je doelgroep beantwoordt: "Loopt jouw Google Ads niet zoals het hoort?". Welke past, hangt af van je type doelgroep en je merkstem.

De ondertekst die de koptekst ondersteunt

De ondertekst is geen samenvatting van je homepage. Hij beantwoordt één vraag: waarom zou de bezoeker doorlezen of klikken? Geef daar in twee of drie zinnen antwoord op. Noem het voordeel dat je belooft, het soort klant waarmee je werkt, of het bezwaar dat je wegneemt. Voorbeeld: "Wij beheren je Google Ads volledig. Geen abonnementen, geen verborgen kosten, wel maandelijks heldere rapportages over wat klanten oplevert."

Wat een ondertekst niet is: marketingjargon zonder inhoud. Schrijf alsof je het tegen een potentiële klant aan tafel zou zeggen. Lees het hardop voor. Klinkt het opgeklopt? Schrijf het opnieuw.

De call-to-action: één primaire, één secundaire

Veel hero-secties bevatten te veel knoppen. Drie of vier knoppen naast elkaar maakt geen enkele duidelijk genoeg. Werk met één primaire CTA en eventueel één secundaire optie. De primaire actie is de gewenste vervolgstap: contact opnemen, demo aanvragen, kennismaken. De secundaire is voor de twijfelaars: meer lezen, video bekijken, prijzen zien.

Wat de knoptekst betreft: gebruik actiewerkwoorden. "Plan een gesprek" werkt beter dan "Contact". "Bekijk werkwijze" beter dan "Meer informatie". Zorg ook dat de primaire knop visueel duidelijk anders is dan de secundaire, met een opvallende achtergrondkleur. De secundaire kan een outline of subtielere stijl hebben. Voor uitgebreidere CTA-strategie zie onze gids over een landingspagina schrijven die converteert.

Visuele basis: wat werkt op de achtergrond

De visuele basis ondersteunt de boodschap. Een professionele foto van een echte klant of medewerker werkt vaak beter dan een stockfoto. Wanneer je toch stock gebruikt, kies onverwachte beelden in plaats van de generieke "team aan tafel"-foto's. Een illustratie of grafisch element kan ook, zolang het past bij je merkstem. Voor een serieuze B2B-dienst werkt een rustige illustratie beter dan een vrolijke; voor een lifestyle-merk is het andersom.

Wat je niet doet: de hero vol gooien met een autoplay-video met geluid. Het stoort, het kost laadtijd, en het maakt mobiele bezoekers boos. Een korte achtergrondvideo zonder geluid kan, maar werkt alleen wanneer hij snel laadt en de boodschap niet verstoort. Voor de meeste MKB-sites is een sterke statische foto effectiever én sneller.

Mobiel werkt anders dan desktop

Wat op desktop werkt, valt op mobiel vaak uit elkaar. Een hero die op desktop een koptekst links en een foto rechts heeft, moet op mobiel onder elkaar. De koptekst blijft, maar wordt vaak iets korter. De ondertekst kort je in tot één zin. De CTA-knop staat groot en duim-vriendelijk. Test je hero altijd op een echte telefoon, niet alleen in een browser-simulatie. Wat in Chrome op een MacBook werkt, kan op een midrange Android-toestel een chaos zijn.

Voor de meerderheid van MKB-sites komt meer dan de helft van het verkeer mobiel binnen. Toch zien we bij audits regelmatig dat de hero op mobiel een afterthought is. Een uur per maand testen op een echte telefoon brengt vaak meer fixes aan het licht dan een hele desktop-audit.

Wat je deze week kunt doen

Open je homepage op een telefoon. Lees de koptekst voor. Begrijpt iemand die je nog niet kent in twee zinnen wat je doet? Zie je een knop met een duidelijke actietekst? Zie je voor wie het bedoeld is? Drie keer nee? Tijd om de hero te herschrijven. Drie keer ja? Test welke variant beter converteert via A/B-testen.

Wil je samen kijken hoe jouw hero op een vreemde overkomt? Plan een vrijblijvend gesprek via onze contactpagina. We bekijken je homepage door de ogen van een nieuwe bezoeker en laten zien welke drie aanpassingen direct effect hebben.