Landingspagina maken met AI

Een landingspagina is één losse pagina waar bezoekers op terechtkomen vanuit een advertentie, nieuwsbrief, social media of een QR-code op een folder. De pagina heeft precies één taak: de bezoeker laten aanmelden, iets laten aanvragen of iets laten downloaden.

Een gewone website heeft een menu, meerdere pagina's en veel verschillende onderwerpen. Een landingspagina heeft dat bewust niet. Elke link naar elders is een uitgang waardoor de bezoeker niet doet wat jij hoopt. Daarom laat je het menu vaak weg en blijft alles gericht op die ene knop.

Wil je een complete website met meerdere pagina's bouwen, lees dan de pagina over een website maken met AI. Hier gaat het om die ene campagnepagina: voor een evenement, een gratis download, een wachtlijst of een tijdelijke actie.

De meeste landingspagina's die goed werken volgen dezelfde volgorde van boven naar beneden:

• Een kop die in één zin zegt wat de bezoeker krijgt, in zijn eigen woorden. Niet wie jij bent, maar wat het hem oplevert.
• Een korte ondertitel die uitlegt voor wie het is en waarom nu.
• De belangrijkste knop of het formulier direct zichtbaar, zonder te scrollen.
• Drie tot vijf voordelen of onderdelen, kort en concreet.
• Een blok dat twijfels wegneemt: wat er gebeurt na aanmelden, hoe lang het duurt, wat het kost of dat het gratis is.
• Een korte lijst veelgestelde vragen.
• Onderaan nog een keer dezelfde knop, voor wie de hele pagina heeft gelezen.

Schrijf deze teksten zelf, of laat de AI een eerste versie maken en herschrijf die in jouw woorden. De AI bouwt de pagina, maar jij weet wat je bezoekers bezighoudt.

Zo pak je het aan met Claude Code. Je werkt in een lege projectmap op je eigen computer.

1. 1

   Leg het doel vast in één zin

   Bijvoorbeeld: bezoekers melden zich aan voor de workshop op 14 november. Alles op de pagina moet dat doel dienen. Schrijf deze zin bovenaan in je eerste opdracht aan de AI.

2. 2

   Beschrijf de blokken in volgorde

   Geef de AI de opbouw van boven naar beneden, met je eigen teksten of steekwoorden. Vraag om één bestand index.html met de opmaak erin, zodat het overzichtelijk blijft.

3. 3

   Bekijk de pagina en stuur bij

   Open de pagina in je browser. Vraag gericht om aanpassingen: maak de knop groter, zet het formulier naast de kop, gebruik onze huisstijlkleur. Eén wijziging per opdracht werkt het best.

4. 4

   Laat het formulier echt werken

   Vraag de AI om de aanmeldingen op te slaan. Dat kan in een online database zoals Prisma Postgres, die je al gebruikt terwijl je de pagina op je eigen computer test. Kijk daarna in de database of je testaanmelding is aangekomen.

5. 5

   Test op je telefoon

   De meeste bezoekers uit advertenties en social media komen binnen op een telefoon. Verklein je browservenster of open de pagina op je telefoon en controleer of de knop direct zichtbaar is.

6. 6

   Zet hem online

   Bewaar je project in GitHub en zet het van daaruit online. Koppel een eigen domeinnaam of een subdomein, zoals actie.jouwbedrijf.nl, zodat de link er betrouwbaar uitziet.

Het formulier is het belangrijkste onderdeel van je landingspagina. Vraag alleen wat je echt nodig hebt. Voor een nieuwsbrief is een e-mailadres genoeg, voor een workshop misschien naam en e-mailadres. Elk extra veld zorgt ervoor dat mensen afhaken.

Laat de AI controles inbouwen: is het e-mailadres goed ingevuld, zijn verplichte velden niet leeg, en krijgt de bezoeker een duidelijke melding als er iets misgaat. Laat na het versturen een bedankpagina of bedankmelding zien met wat er nu gebeurt, bijvoorbeeld dat er een bevestiging per mail komt.

Vraag de AI ook om bescherming tegen spam en tegen kwaadwillige invoer. Een formulier dat gegevens opslaat moet die gegevens netjes controleren voordat ze in de database komen. Zet er een korte zin bij over wat je met de gegevens doet, en verwijs naar je privacyverklaring.

Bezoekers uit een advertentie hebben weinig geduld. Laadt de pagina traag, dan klikken ze weg voordat ze je kop hebben gezien. Je betaalt dan wel voor de klik, maar krijgt niets terug.

Een zelfgebouwde landingspagina heeft hier een voordeel: er zit niets in wat je niet nodig hebt. Vraag de AI om afbeeldingen te verkleinen, geen zware animaties te gebruiken en geen onnodige externe scripts in te laden. Een snelle meting doe je met de gratis test in de ontwikkelaarstools van je browser.

Een landingspagina is nooit in één keer af. Kijk na de eerste week naar de cijfers en verbeter één ding tegelijk.

• meten

  Meet het aantal aanmeldingen

  Tel hoeveel bezoekers er kwamen en hoeveel zich aanmeldden. Laat de AI een eenvoudige teller bouwen of koppel een privacyvriendelijke statistiekentool.

• testen

  Probeer een andere kop

  De kop bepaalt of iemand blijft lezen. Maak een tweede versie van de pagina met een andere kop en vergelijk welke beter werkt. Dit heet een A/B-test.

• testen

  Kijk naar de knoptekst

  Een knop met 'Reserveer mijn plek' werkt vaak anders dan 'Verzenden'. Laat de knop zeggen wat de bezoeker krijgt.

• luisteren

  Lees wat mensen vragen

  Krijg je steeds dezelfde vraag per mail? Zet het antwoord op de pagina. Zo neem je twijfel weg bij de volgende bezoeker.