De hero-sectie die converteert: above-the-fold voor B2B

Een hero-sectie is het bovenste blok van je pagina, zichtbaar zonder te scrollen.

Ze moet in enkele seconden drie vragen beantwoorden: wat doe je, voor wie, en waarom jij?

Lukt dat niet, dan haakt een groot deel van je bezoekers af. Nog voor ze iets anders van je site hebben gezien.

Het verdict: een sterke above-the-fold bestaat uit vier onderdelen die samenwerken. Een heldere headline, een onderbouwende subkop, een relevante visual en één primaire call-to-action.

Zo kijken wij ernaar: een hero-sectie op je website is geen visitekaartje om mooi te zijn. Het is je belangrijkste conversie-vastgoed.

Elke vierkante centimeter boven de vouw moet de bezoeker dichter bij een aanvraag brengen.

Een fraaie sfeerfoto met een vage slogan die niets zegt, kost je gewoon leads.

Wat is een hero-sectie en waarom is die zo belangrijk?

De hero-sectie is het eerste, meteen zichtbare gedeelte van een webpagina, nog voor de bezoeker scrolt.

Het is je belangrijkste stuk schermruimte. Het zet de eerste indruk en de toon voor de rest van het bezoek.

De eerste indruk valt in 50 milliseconden

Die eerste indruk valt sneller dan je denkt.

Onderzoek van Gitte Lindgaard en collega’s toonde aan dat mensen de visuele aantrekkelijkheid van een pagina al binnen ongeveer 50 milliseconden beoordelen.

Dat oordeel verandert daarna nauwelijks nog.

In die fractie van een seconde beslist je bezoeker onbewust of je betrouwbaar en relevant oogt.

Boven de vouw krijgt de meeste aandacht

Het bovenste deel van de pagina krijgt veruit de meeste aandacht.

Uit eyetracking-onderzoek van de Nielsen Norman Group blijkt dat bezoekers het grootste deel van hun kijktijd boven de vouw doorbrengen.

Gemiddeld behandelen ze informatie boven de vouw 84% anders dan eronder.

Een latere meting uit 2018 maakt het concreet:

Bezoekers besteden volgens NN/g ongeveer 57% van hun kijktijd boven de vouw. In de eerste twee schermen samen is dat 74%.

Wat daar staat, bepaalt of ze blijven of wegklikken.

Voor B2B telt het dubbel

Je bezoeker vergelijkt vaak meerdere leveranciers en heeft weinig geduld.

Snapt hij na twee seconden niet wat je doet en of het voor hem is? Dan gaat hij naar de volgende tab.

Een scherpe hero-sectie is dus geen luxe. Het is de filter die bepaalt of de rest van je site een kans krijgt.

Hoeveel bezoekers het eerste scherm voorbij raken, zie je in een tool met scrolldiepte. Microsoft Clarity toont dat gratis:

De homepage van Microsoft Clarity, oktober 2026 (Engelse versie). De scrolldiepte toont hoeveel bezoekers het eerste scherm verlaten.

Haakt een groot deel af in het eerste scherm?

Dan is je hero-sectie de eerste plek om te repareren.

Meer over die meting lees je in wat scroll depth is.

Uit welke onderdelen bestaat een sterke hero-sectie?

Uit vier onderdelen met elk een eigen taak, die samen één boodschap vormen.

Haal er één weg of laat er één tegenwerken, en het geheel verzwakt:

Per onderdeel:

• De headline: de grootste tekst, die in één zin duidelijk maakt wat je doet en welk resultaat je levert.
• De subkop: een of twee zinnen die de belofte concreter maken, vaak met het hoe of het voor wie.
• De visual: een beeld dat je boodschap versterkt, zoals een productbeeld, een screenshot of een relevante foto.
• De primaire call-to-action: één duidelijke knop met de logische volgende stap, zoals een intake aanvragen of een demo plannen.

De kunst zit in de samenhang

Headline, subkop, visual en knop horen naar hetzelfde te wijzen.

Gaat je tekst over leadgeneratie, maar toont je beeld een willekeurig handenschudmoment? Dan ontstaat ruis.

Eén heldere held boven aan de pagina werkt altijd beter dan vier elementen die om aandacht vechten.

Dat principe komt terug in elke vorm van visuele hiërarchie op je website.

Hoe schrijf je een headline die in seconden duidelijk maakt wat je doet?

Door over het resultaat van je bezoeker te schrijven, niet over jezelf.

De beste B2B-headline benoemt het probleem dat je oplost of de winst die je oplevert. In gewone taal, zonder jargon of holle superlatieven.

Kijk naar buiten, niet naar binnen

De meest gemaakte fout is een headline die naar binnen kijkt.

Denk aan “Welkom bij [bedrijf]” of “Dé partner in totaaloplossingen”. Dat zegt je bezoeker niets.

Vergelijk dat met een formule in de trant van “Wij helpen [doelgroep] om [resultaat] te bereiken”. Niet origineel, maar wel meteen helder.

En helderheid wint het in B2B bijna altijd van creativiteit. Die helderheid begint bij een scherpe waardepropositie.

Drie vuistregels

Een paar regels die werken:

• Wees concreet. “Meer gekwalificeerde leads uit je website” is sterker dan “Groei je business”.
• Schrap het jargon. Zou je doelgroep een woord niet hardop gebruiken? Dan hoort het niet in je headline.
• Maak het meetbaar waar het kan, maar verzin nooit cijfers. Een geloofwaardige belofte verslaat een opgeblazen claim.

De subkop is je tweede kans

Hier onderbouw je de belofte uit de headline: hoe je het doet, voor wie precies, of wat je anders maakt.

Samen vormen headline en subkop een mini-pitch die in twee zinnen het verschil maakt.

Het is dezelfde logica als bij sterke conversie-copywriting: eerst de lezer en zijn probleem, dan pas jij.

Voor de kleine teksten rond je knop helpt onze gids over microcopy en UX writing.

Welke visual hoort in je hero-sectie?

Een visual die je boodschap versterkt en houvast geeft. Geen plaatje dat alleen de ruimte opvult.

Het beste beeld laat zien wat je doet of wat de bezoeker krijgt:

• een screenshot van je product
• een herkenbaar resultaat
• een foto die past bij je doelgroep en context

Vermijd de nietszeggende stockfoto

De klassieke misser is een stockfoto van lachende mensen rond een laptop.

Dat soort beeld voegt niets toe en voelt zelfs minder geloofwaardig, omdat iedereen het doorheeft.

Een echte foto van je team, je werk of je product wekt meer vertrouwen op een B2B-website dan een generieke afbeelding.

Houd de visual licht

Let ook op de praktische kant.

Een zware hero-afbeelding of een autoplay-video die traag laadt, werkt averechts.

Je bezoeker ziet eerst een lege ruimte, precies op het moment dat de eerste indruk valt.

De hero-afbeelding is vaak het grootste element op je scherm, en dus je Largest Contentful Paint.

Volgens web.dev is een goede LCP 2,5 seconden of minder.

Zo ziet die meting eruit voor onze eigen site, op mobiel:

Onze eigen mobiele velddata in PageSpeed Insights, oktober 2026. LCP is goed (1,9 s), maar één zwak meetpunt (CLS 0,13) laat de beoordeling falen.

Laadt de hero toch traag? De LCP-opsplitsing toont waar de tijd heen gaat:

LCP-opsplitsing in PageSpeed Insights voor een van onze eigen artikels, labtest op mobiel, oktober 2026. Hoge TTFB wijst op de server, hoge render delay op CSS en scripts.

Test je eigen pagina met onze gratis website snelheidstest. Hoe je de score omhoog krijgt, staat in Core Web Vitals verbeteren.

De visual ondersteunt de boodschap. Hij mag die nooit overschreeuwen of vertragen.

Overweeg je toch video? Lees eerst wanneer video op een landingspagina helpt en wanneer niet.

Waar plaats je de primaire call-to-action?

Boven de vouw, duidelijk zichtbaar, en als enige primaire actie.

Je hero-sectie hoort precies één hoofdknop te hebben die de logische volgende stap is. Elke extra gelijkwaardige knop verdeelt de aandacht.

En verlaagt de kans dat er één geklikt wordt.

Kleur, ruimte en een concrete knoptekst

Geef die knop drie dingen mee:

• Kleur: een accentkleur die je verder nergens in de hero gebruikt.
• Ruimte: voldoende witruimte eromheen.
• Tekst: concreet over wat er gebeurt na de klik.

“Plan een vrijblijvende intake” doet het beter dan een vaag “Meer info”. Het neemt de drempel en de onzekerheid weg.

Een secundaire link mag, maar rustiger

Voor wie nog niet klaar is om te kopen, mag je een rustigere, secundaire link toevoegen.

Maak die bewust minder opvallend dan je hoofdknop.

Welke knoptekst het best werkt, hangt af van waar je bezoeker in zijn aankoopproces zit.

Dat diepen we uit in call-to-action voorbeelden per funnelfase.

Let op: één primaire CTA betekent niet één knop op je hele site. Het betekent één duidelijk hoofddoel per scherm.

Boven de vouw is dat doel het sterkst, want daar is de aandacht het grootst.

Welke fouten verpesten je above-the-fold?

De grootste fout is een hero-sectie die mooi oogt maar niets zegt.

Een sfeerbeeld met een poëtische slogan ziet er verzorgd uit, maar laat je bezoeker raden wat je doet.

In B2B is raden gelijk aan wegklikken.

De vijf vaakste valkuilen

De meest voorkomende valkuilen op een rij:

• Een vage of naar binnen gerichte headline die over jou gaat, niet over het probleem van de bezoeker.
• Te veel tekst of te veel knoppen, waardoor de aandacht versplintert.
• Een nietszeggende of trage visual die de eerste indruk verzwakt.
• Belangrijke boodschap onder de vouw, terwijl bovenaan een leeg sfeerbeeld staat.
• Geen of een dubbele primaire CTA, zodat de bezoeker de volgende stap niet kent.

Op mobiel vallen die fouten nog harder op, omdat het eerste scherm kleiner is. Meer daarover in mobiele conversie op een B2B-website.

De vijf-secondentest

Een simpele test om je hero-sectie te beoordelen:

1. Laat iemand die je bedrijf niet kent vijf seconden naar het scherm kijken.
2. Vraag daarna wat je doet, voor wie, en wat de volgende stap is.
3. Kan diegene dat navertellen? Dan klopt je above-the-fold.

Twijfelt hij, dan weet je echte bezoeker het ook niet.

Deze helderheid is het fundament onder elke B2B-website die leads genereert.

Ook in gereguleerde sectoren blijft dat tellen: zie hoe een FSMA-conforme verzekeringsmakelaarssite toch converteert.

Wat is de korte samenvatting?

Je hero-sectie is het belangrijkste stuk van je pagina.

Daar valt in een fractie van een seconde de beslissing om te blijven of weg te klikken.

Een sterke above-the-fold bestaat uit vier onderdelen die samenwerken:

• een heldere headline die het resultaat benoemt
• een subkop die de belofte onderbouwt
• een relevante visual die je boodschap versterkt
• één primaire call-to-action als logische volgende stap

Praat over het probleem en het resultaat van je bezoeker, niet over jezelf.

En durf alles weg te laten wat de aandacht van die ene actie afleidt.

Het doel is geen mooi plaatje.

Het doel is een bezoeker die binnen seconden snapt wat je doet en wat hij nu kan doen.

Wil je de aanpak voor je hele site? Dan vind je het overzicht in onze gids over een B2B-website laten maken.

Wil je een hero-sectie die in seconden duidelijk maakt wat je doet en bezoekers omzet in aanvragen?

Wij bouwen conversiegerichte B2B-websites met die logica als uitgangspunt.

Neem contact op