# Landingspagina ontwerpen: de opbouw die converteert [Canonical HTML page](https://gradiently.design/nl/guide/landing-page-design) Een landingspagina is één betoog met één einde. Dit is de volgorde waarin je dat betoog opbouwt, een uitgewerkt voorbeeld om te kopiëren en de ontwerpkeuzes die bezoekers laten doorlezen. ## The short version - Een landingspagina is een losstaande pagina met één doel, zoals een aanmelding, een boeking of een aankoop. - Een betrouwbare opbouw is hero, probleem, werking, bewijs, aanbod, bezwaren en een afsluitende call-to-action. - De pagina sluit aan op de advertentie, post of e-mail waarvan de bezoeker komt, in woorden én in uiterlijk. - Zonder websitenavigatie en extra links blijft de aandacht bij de ene actie waarvoor de pagina bestaat. - Test wijzigingen één voor één tegen je eigen cijfers in plaats van op algemene richtwaarden te vertrouwen. Goed **landingspagina ontwerp** is één doel, in de juiste volgorde beargumenteerd. Anders dan een homepage, die iedereen bedient, bestaat een landingspagina voor één bezoeker die vanaf één plek komt om één actie uit te voeren: de proefles boeken, op de wachtlijst komen, het aanbod claimen. De opbouw die steeds werkt: een heldere hero, het probleem in de woorden van de lezer, hoe het werkt, bewijs, de details van het aanbod, antwoorden op bezwaren en onderaan dezelfde call-to-action. Het ontwerp zorgt dat die volgorde moeiteloos te volgen is. ## Eén pagina, één doel Schrijf het doel in één zin op voordat je iets ontwerpt: “Eerste keer bezoekers van onze Instagram-advertentie een gratis kennismakingsles laten boeken.” Dan krijgt elke sectie een toets. Helpt dit die persoon deze stap te zetten? Zo niet, schrap het of verplaats het naar de hoofdsite. ### Homepage - Bedient elk soort bezoeker - Volledige navigatie en veel links - Meerdere producten of diensten - Legt het hele bedrijf uit ### Landingspagina - Bedient één doelgroep uit één bron - Geen navigatie, of alleen een logo - Eén aanbod - Voert één betoog en vraagt één keer, daarna nog een keer ## Opbouw van een landingspagina, sectie voor sectie 1. **Hero** Kop met de belofte, één ondersteunende regel, één knop, één beeld. [Hero-sectie ontwerpen](https://gradiently.design/nl/guide/hero-section-design) behandelt dit scherm uitgebreid. 2. **Het probleem** Twee of drie zinnen over de situatie waarin de bezoeker zit, in zijn eigen woorden. Zo laat je zien dat je het begrijpt voordat je iets verkoopt. 3. **Hoe het werkt** Drie stappen, elk met een korte titel en een zin. Mensen besluiten makkelijker als ze zich het proces kunnen voorstellen. 4. **Bewijs** Echte getuigenissen met namen, foto’s van echt werk, logo’s van echte klanten of een korte demo. Nooit verzonnen. 5. **Het aanbod in detail** Wat ze precies krijgen, wanneer en wat het kost of juist niet. Duidelijke voorwaarden nemen twijfel weg. 6. **Bezwaren** Een korte FAQ met antwoorden op de redenen om niet te handelen: tijd, prijs, geschiktheid, opzeggen, wat er daarna gebeurt. 7. **Afsluitende call-to-action** Herhaal de belofte uit de kop en dezelfde knop. Bezoekers die tot het eind lezen zijn klaar; laat ze niet terugscrollen. Niet elke pagina heeft elke sectie nodig. Een wachtlijst voor een lancering kan bestaan uit alleen een hero, drie regels over hoe het werkt en een e-mailveld. Een aanbod met veel commitment, zoals een cursus of een consult, heeft meestal alle zeven nodig en meer bewijs. ## Een uitgewerkt voorbeeld: kennismaking bij een yogastudio | Sectie | Wat de pagina zegt | | --- | --- | | Hero | “Je eerste les is van ons.” Ondersteunende regel: “Kleine lessen voor beginners in Bristol, zes dagen per week.” Knop: “Boek je gratis les” | | Probleem | “In grote sportschoollessen gaat alles snel en let niemand op je houding. Beginnen is lastig als je niet weet wat je doet.” | | Hoe het werkt | Kies een beginnersles. Kom tien minuten eerder, matten zijn aanwezig. Blijf voor een praatje van vijf minuten over wat bij je past. | | Bewijs | Drie korte reviews van echte leden met voornaam en foto, plus foto’s van de echte studio. | | Aanbod | Eén gratis les voor nieuwe leden, elke beginnerssessie, geen pas nodig. | | Bezwaren | “Ik ben niet lenig.” “Wat trek ik aan?” “Is er parkeergelegenheid?” “Wat gebeurt er na de gratis les?” | | Afsluitende call-to-action | “Kom een les proberen.” Dezelfde knop: “Boek je gratis les” | Elke regel beantwoordt een vraag die een onzekere beginner echt heeft. Dezelfde opbouw werkt voor een controleaanbod bij de tandarts of een proefversie van software. ## Laat de pagina aansluiten op de advertentie De meeste bezoekers komen ergens vandaan: een [Instagram-advertentie](https://gradiently.design/nl/guide/instagram-ad-design), een LinkedIn-advertentie, een e-mail, een QR-code op een flyer. Zodra ze landen, controleren ze of ze op de goede plek zijn. Herhaal het exacte aanbod uit de advertentie in de kop en neem de stijl over: dezelfde achtergrond, kleuren en letter. Een pagina die niets met de advertentie te maken lijkt, voelt als lokken en verwisselen, ook als dat niet zo is. Een staande Instagram-advertentie van een yogastudio met een gratis eerste les De Instagram-advertentie op 1080×1350. Een brede hero van een landingspagina met hetzelfde gratis-eerste-les-aanbod en dezelfde achtergrond als de advertentie De hero van de landingspagina op 1920×1080: dezelfde woorden, dezelfde stijl, zodat niemand zich afvraagt of de link klopt. Als je beide uit één bron ontwerpt, gaat dit vanzelf. In Gradiently kun je met Pro één ontwerp in één stap naar alle formaten brengen, zodat post, story, e-mailheader en paginahero één Mark en één kop delen. [Eén look, elk formaat](https://gradiently.design/nl/guide/one-look-every-size) laat de werkwijze zien en [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) legt uit waarom het ook buiten één campagne telt. ## Ontwerpkeuzes die mensen laten doorscrollen - **Eén accentkleur voor alle knoppen**, nergens anders gebruikt. Het oog leert waar te klikken. [De 60-30-10-regel](https://gradiently.design/nl/guide/60-30-10-rule) helpt om de balans te bepalen. - **Ruime ruimte tussen secties**, zodat elke sectie als één idee leest. Volle pagina’s voelen als hard werken. - **Koppen die op zichzelf begrijpelijk zijn.** Veel mensen scannen alleen de koppen; die moeten het hele verhaal vertellen. - **Echte foto’s boven stockbeelden.** Je eigen ruimte, product, team of resultaten. - **Korte formulieren.** Vraag alleen wat je nu nodig hebt. Een e-mailadres geef je makkelijker dan een telefoonnummer. - **Geen navigatiemenu**, of alleen een logo, zodat er nergens iets te dwalen valt. - Paginagrond: #fbf7f2 - Sectieband: #efe6da - Tekst: #2b2a33 - Secundaire tekst: #6b6670 - Alleen voor knoppen: #c2410c Een rustig kleurenpalet voor een landingspagina: twee warme vlakken die per sectie wisselen, twee tekstkleuren en één accent dat is gereserveerd voor de call-to-action. ## Eerst mobiel, dan testen Verkeer vanuit social posts komt vooral op telefoons binnen, dus ontwerp eerst de versie van 390 pixels breed. Houd de kop en de knop op het eerste scherm, maak knoppen minstens 44 pixels hoog en gebruik alleen een plakkende knop als die geen inhoud bedekt. ### Vermijd - Vijf dingen tegelijk wijzigen en raden wat werkte - Een conversiepercentage uit een blog als doel overnemen - Pop-ups die verschijnen voordat de bezoeker iets las - Een formulier met tien velden voor het downloaden van een gids ### Doe - Eén ding wijzigen, zoals de kop, en vergelijken - Meten tegen je eigen vorige versie - Mensen het aanbod laten lezen voordat je iets vraagt - Het minimum vragen en later meer te weten komen Er bestaat geen universeel goed conversiepercentage; het hangt af van het aanbod, de prijs en het verkeer. Wat je altijd kunt doen is de volgende versie duidelijker maken dan de vorige. Voor de kleuren erachter lees je [kleurenschema’s voor websites](https://gradiently.design/nl/guide/website-color-scheme). ## FAQ ### Wat is de beste opbouw voor een landingspagina? Hero, probleem, werking, bewijs, aanbod, bezwaren en een afsluitende call-to-action. Korte aanbiedingen kunnen secties overslaan; grotere beslissingen hebben ze allemaal nodig. ### Moet een landingspagina navigatie hebben? Meestal niet. Zonder menu blijft de aandacht bij de ene actie waarvoor de pagina bestaat; een logo is genoeg. ### Hoe lang moet een landingspagina zijn? Zo lang als nodig is om de vragen van de bezoeker te beantwoorden. Een gratis wachtlijst kan één scherm zijn, terwijl een betaalde cursus vaak een lange pagina met uitgebreid bewijs en een FAQ nodig heeft. ### Wat is het verschil tussen een landingspagina en een homepage? Een homepage bedient elke bezoeker en linkt overal naartoe. Een landingspagina bedient één doelgroep uit één bron en vraagt om één actie. ### Moet mijn landingspagina eruitzien als mijn advertentie? Ja. Herhaal het aanbod van de advertentie in de kop en behoud de kleuren en achtergrond, zodat bezoekers meteen weten dat ze goed zitten.