Above the fold
Ook wel below the fold
Wat betekent above the fold?
Above the fold (ook wel boven de vouw) is het deel dat je direct ziet als je een webpagina opent, zonder te scrollen. Alles wat pas na scrollen verschijnt, heet below the fold.
Veelgestelde vragen over above the fold
Wat zet ik boven de vouw op mijn homepage?
Zet daar alles wat een bezoeker nodig heeft om binnen een paar seconden te beslissen of hij verder kijkt:
- Een duidelijke kop die zegt wat je doet en voor wie.
- Een korte zin met het belangrijkste voordeel voor je klant.
- Eén opvallende knop, je call-to-action, zoals 'Offerte aanvragen'.
- Een herkenbaar beeld van je product of dienst.
- Eventueel een vertrouwenssignaal, zoals reviews of keurmerken.
Houd het rustig. Te veel elementen tegelijk maken het juist lastiger om te kiezen.
Moet echt alles belangrijks boven de vouw staan?
Nee, dat is een hardnekkig misverstand. Bezoekers scrollen prima, zolang het bovenste deel hen nieuwsgierig maakt. Als je alles boven de vouw propt, krijg je een rommelig geheel waarin niets meer opvalt. Gebruik de bovenkant om aandacht te trekken en duidelijk te maken wat je biedt. Uitleg, voorbeelden, prijzen en veelgestelde vragen mogen gerust lager staan. Herhaal je belangrijkste knop wel verderop op de pagina, zodat mensen die doorlezen niet terug hoeven te scrollen om contact op te nemen of te bestellen.
Hoe zie ik wat mobiele bezoekers boven de vouw zien?
Gebruik de ontwikkelaarstools van je browser. In Chrome doe je dat zo:
- Open je pagina, klik met rechts en kies Inspecteren.
- Klik op het icoontje van telefoon en tablet om de apparaatweergave aan te zetten.
- Kies bovenin een toestel of vul zelf een schermformaat in.
Je ziet nu ongeveer wat een bezoeker op dat toestel ziet zonder te scrollen. Bekijk meerdere formaten, want de vouw ligt op elk scherm anders. Controleer het daarna ook even op je eigen telefoon.
Hoe pas ik above the fold aan voor mobiel in WordPress?
Dat doe je in de editor van je pagina. Met een paginabouwer zoals Elementor kun je per apparaat instellen hoe het bovenste deel eruitziet:
- Open de pagina in Elementor.
- Schakel via de knop voor de responsive modus naar de mobiele weergave.
- Maak de kop korter, verklein de afbeelding of verberg onderdelen alleen op mobiel.
- Zorg dat je belangrijkste knop zichtbaar blijft zonder scrollen.
Werk je met de standaard blokeditor, kort dan je teksten in en kies een lagere afbeelding. Sla op en controleer het resultaat op je telefoon.
Waarom laadt mijn bovenste afbeelding zo traag?
Vaak komt dat door een te zwaar bestand of doordat lazy load aan staat voor die afbeelding. Lazy load laadt plaatjes pas als ze in beeld komen, maar boven de vouw zorgt dat juist voor vertraging. Zo los je het op:
- Verklein en comprimeer de afbeelding met ShortPixel.
- Sluit de bovenste afbeelding uit van lazy load in WP Rocket of LiteSpeed Cache.
- Vermijd een zware slider of video bovenaan als die niet echt nodig is.
Test daarna je pagina met PageSpeed Insights van Google en kijk of de laadtijd beter is.
