Landingspagina maken in WordPress: pagina die converteert

Een landingspagina maken die converteert begint met één beslissing: de ene actie die een bezoeker moet nemen. Alles daarna, van de opbouw van de hero tot de kleur van de knop, volgt daaruit. Schets de secties in grijstinten, schrijf de kop voordat je een blok aanraakt en schrap alles wat die ene actie niet dient. De rest van dit artikel laat zien hoe je dat binnen WordPress aanpakt, met de Site Editor en met de grenzen waar je tegenaan loopt.

Waarom heeft een landingspagina een andere opdracht dan een homepage?

Een homepage dient veel bezoekers met veel doelen. Een landingspagina dient één bezoeker met één doel, meestal afkomstig van een advertentie, een nieuwsbrief of een zoekresultaat. Dat verschil verandert de hele bouw.

De navigatie krimpt of verdwijnt. Secundaire links gaan eruit. De footer verliest de sitemap. In een blocktheme betekent dat een eigen template en geen verborgen menu op een gedeeld template. Maak in de Site Editor een leeg template, verwijder het header-onderdeel en houd alleen een logo en de call-to-action over.

Hergebruik je homepage-hero niet zomaar. Bij een klantproject vorig voorjaar nam een collega het Cover-blok van de homepage over voor een webinarpagina en liet hij het volledige menu staan. Bezoekers verdwenen naar de blog. Zeven menu-items verwijderen was de goedkoopste fix van het kwartaal.

Wat schets je voordat je de editor opent?

Eerst papier. Teken vijf of zes rechthoeken onder elkaar en geef elk een naam: hero, probleem, oplossing, bewijs, aanbod en de slotcall-to-action. De meeste gepubliceerde gidsen, van HubSpot tot Unbounce, komen ongeveer op deze volgorde uit, en dat klopt, want het volgt de manier waarop een kritische lezer beslist.

Werk in grijstinten. Kleur verbergt zwakke hiërarchie, en een grijze schets legt die snel bloot. Als je in grijs niet ziet welke rechthoek het zwaarst weegt, ziet de bezoeker dat ook niet.

Schrijf daarna de tekst: de kop, één ondersteunende zin en het label van de knop. Ontwerp rond echte tekst, want een opmaak op lorem ipsum breekt zodra de echte kop over drie regels loopt. In het Arabisch of Hebreeuws, waar dezelfde zin vaak langer is, is dit geen keuze.

Hoe bouw je een hero die de lezer laat scrollen?

De hero heeft vier taken: het resultaat noemen, zeggen voor wie de pagina is, één actie aanbieden en iets tonen dat de belofte geloofwaardig maakt. Een kop die een resultaat noemt ("Lever een klantsite in één middag op") werkt beter dan een kop die een functie noemt ("Een flexibele pagebuilder").

Bouw de hero in Gutenberg met een Cover-blok dat een Group bevat. Zo beperk je de breedte van de inhoud los van de achtergrond. Stel de Group in op een inhoudsbreedte van ongeveer 640 tot 720 pixels, voeg een Heading-blok toe, een Paragraph en één Buttons-blok met één knop. Eén knop. Twee knoppen betekent twee beslissingen, en de tweede is meestal degene die wordt aangeklikt.

Houd het ondersteunende beeld eerlijk. Een echte screenshot van het product werkt beter dan een decoratieve foto. Heb je alleen abstracte beelden, gebruik ze dan met minder gewicht en laat de kop de pagina dragen. Vermijd carrousels in de hero: ze verbergen de boodschap in dia's die de meeste bezoekers nooit zien.

Kanttekening: deze opbouw werkt vanaf WordPress 6.5, waar het Cover-blok en de Group-beperkingen zich in de Site Editor voorspelbaar gedragen.

Hoeveel bewijs heeft de pagina nodig, en waar hoort het?

Bewijs beantwoordt de vraag die de hero oproept: kan ik dit geloven? Plaats het direct onder de hero, niet onderaan, want daar komt alleen de al overtuigde lezer.

Goed bewijs is specifiek. Een genoemde klant met een gemeten resultaat is meer waard dan vijf algemene sterren. Een logostrook helpt als de logo's herkenbaar zijn voor je publiek, en één getuigenis met echte naam en functie weegt zwaarder dan een slider vol anonieme citaten.

Wees voorzichtig met cijfers die je niet kunt onderbouwen. Sommige populaire gidsen noemen conversiepercentages die geen analysetool zou opleveren. Noem je een getal, zeg dan waar het vandaan komt en wanneer het is gemeten, of laat het weg. Je eigen voor-en-na, gemeten op je eigen site, is beter dan elke geleende statistiek.

Welke opmaakregels zijn op mobiel het belangrijkst?

Veel verkeer naar landingspagina's komt van advertenties en sociale media en landt op een telefoon. Ontwerp dus eerst voor dat scherm en breid daarna uit. Gebruik één kolom, houd de regels kort en zorg dat de call-to-action met een duim te bereiken is.

Drie regels voorkomen de meeste schade. Houd tikdoelen minstens 24 bij 24 CSS-pixels, het minimum van WCAG 2.2 niveau AA, en maak de hoofdknop liefst een stuk groter. Houd de lopende tekst leesbaar zonder in te zoomen. En herhaal de call-to-action na de bewijssectie, zodat niemand omhoog hoeft te scrollen om hem te vinden.

Gebruik in een blocktheme de spacing-schaal uit theme.json in plaats van eigen padding per blok. De theme.json-referentie van WordPress beschrijft de presets. Wie die gebruikt, houdt het ritme op mobiel en desktop gelijk, zonder een stylesheet vol overrides.

Wat heeft snelheid met ontwerp te maken?

Alles. Een landingspagina die er uitstekend uitziet maar traag laadt, verliest de bezoeker voordat de kop verschijnt. Google beschouwt een Largest Contentful Paint van 2.5 seconden of minder als goed, en op een landingspagina is het grootste element bijna altijd de hero-afbeelding of de kop. De uitleg van web.dev over LCP laat zien hoe dat wordt gemeten.

Daar volgen concrete gevolgen. Comprimeer de hero-afbeelding en lever hem als WebP. Lazy-load de hero niet, want dat is het element dat je als eerste wilt tonen. Beperk webfonts tot één familie, bij voorkeur een variabel lettertype dat je zelf host met een goede fallback. Haal sliders, automatisch afspelende video's en chatwidgets van derden uit het eerste scherm.

Hier verliezen WordPress-landingspagina's vaak van gehoste builders. Een pagina gebouwd op een zwaar multifunctioneel thema kan honderden kilobytes ongebruikte CSS meeleveren. Een slank blocktheme met een eigen template levert er veel minder, en dat verschil zie je direct in de LCP.

Hoe ga je om met contrast, toegankelijkheid en RTL?

Toegankelijkheid is een ontwerpbeperking, geen audit achteraf. Het WCAG 2.2-criterium voor contrast vraagt minstens 4.5 op 1 tussen normale tekst en de achtergrond. De uitleg van het W3C over het minimale contrastcriterium laat zien hoe je dat test. Een lichtgrijs bijschrift op een witte kaart faalt, en dat geldt ook voor veel pastelkleurige knoppen met witte labels.

Controleer eerst de knop. Het is het element waar de hele pagina om draait, en vaak heeft het het zwakste contrast, omdat de kleur voor de merkidentiteit is gekozen en niet voor leesbaarheid.

Bij tweetalige of Arabisch- en Hebreeuwstalige doelgroepen is spiegelen meer dan de pagina omdraaien. Richtingsiconen, zoals pijltjes op een knop, moeten mee spiegelen. Padding en marges gebruiken logische eigenschappen (inline-start en inline-end) in plaats van links en rechts. Lettertypen moeten getest worden op de koppengrootte, want veel Latijnse displayfonts hebben geen Arabische tegenhanger, en de fallback verandert het visuele gewicht.

Test de RTL-weergave op een echt apparaat met echte tekst. Een gespiegelde opmaak die er met placeholdertekst goed uitziet, kan breken zodra de echte Arabische kop anders afbreekt.

Welke tools zijn zinvol voor een WordPress-landingspagina?

Je hebt drie eerlijke opties. Bouw de pagina native in de Site Editor met patterns: dat geeft de lichtste pagina en de meeste controle, maar vraagt het meeste van jou. Gebruik een visuele builder zoals Divi, die het opmaakwerk versnelt en een deel van het paginagewicht kost. Of genereer een eerste versie met een AI-sitebouwer en bouw de onderdelen die ertoe doen met de hand opnieuw.

Wantrouw elke tool die uit één prompt een afgewerkte, converterende pagina belooft. De gegenereerde structuur is een redelijk startpunt voor de volgorde van de secties en de placeholdertekst. Zelden is het een goed eindontwerp, en de markup moet vaak worden opgeschoond voordat een klant hem kan onderhouden.

Staat de pagina buiten WordPress, dan is een gehoste builder als Framer of Webflow een legitieme keuze voor een campagne die zes weken loopt en daarna verdwijnt. Kies op basis van hoe lang de pagina moet blijven bestaan en wie hem gaat bewerken, niet op basis van de demo.

Hoe test en verbeter je de pagina na de lancering?

Lancering is het begin van de meting. Stel één conversiemeting in, koppel die aan je analyse en controleer of formulierinzendingen echt worden geregistreerd voordat je verkeer naar de pagina stuurt. Een pagina die zijn eigen resultaten niet kan rapporteren, kun je ook niet verbeteren.

Wijzig één ding tegelijk. Eerst de kop, want die heeft het grootste effect, dan het label van de knop, dan de volgorde van het bewijs. Laat elke test lang genoeg lopen om een zinvol aantal conversies te verzamelen, en stop niet bij de eerste veelbelovende dag. Bij een klein publiek kan een test weken duren. Dat is prima. Geduld verslaat een schijnwinnaar.

Twee punten worden vaak vergeten. Bestaat de pagina alleen voor betaalde campagnes, bepaal dan of hij geïndexeerd moet worden, want een dunne kopie van je aanbod kan concurreren met je hoofdpagina. En verzamelt het formulier persoonsgegevens, voeg dan vóór de lancering de toestemmingstekst toe die je regio vereist, niet pas na de eerste klacht.

Wat moet je deze week doen?

Open een leeg template in de Site Editor en bouw alleen de hero, met echte tekst en één knop. Controleer hem daarna op je telefoon en meet de LCP. Maak er een pattern van, zodat de volgende klantpagina begint met een getest blok in plaats van een leeg canvas.