Wat is een landingspagina eigenlijk?
Het feit dat je hier bent, betekent waarschijnlijk dat je al een idee hebt wat een landingspagina is. Toch is het de moeite waard om het te verduidelijken, gewoon zodat we op dezelfde golflengte zitten. Ten eerste, een landingspagina is geen homepage. Een homepage is waar bezoekers aankomen als ze je website bezoeken – het is de startpagina van je site. Homepages hebben vele doelen, zoals: bezoekers naar andere pagina’s van je site leiden, hen een vertrouwde plek geven om binnen te komen, een centraal punt bieden om je merk te promoten en nog veel meer. Een landingspagina is één enkele pagina die is ontworpen voor een zeer specifiek doel: bezoekers overtuigen om een bepaalde actie te ondernemen. Dit kan zijn om toegang te krijgen tot meer informatie, een product of dienst te kopen, of je hoofdsite te bezoeken. Het wordt een landingspagina genoemd omdat het de plek is waar je wilt dat je bezoekers “landen”, nadat ze op een link of advertentie hebben geklikt.Wat maakt een landingspagina effectief?
Laten we eens wat dieper ingaan op wat een landingspagina effectief maakt. Als je landingspagina bezoekers moet gaan converteren, zal deze ten minste deze drie elementen moeten bevatten:- Een header. Dit zal de aandacht van je bezoekers trekken. Het moet kort en bondig zijn.
- Een subheader. Dit is een stukje tekst waarin jij je bezoekers uitlegt hoe je hen kunt helpen. Hoewel je hier wat meer ruimte hebt om je header uit te werken, moet je subheader ook kort en krachtig zijn.
- Een CTA. Dat is een afkorting voor “Call To Action” (ofwel oproep tot actie). Het is de knop waarop je wilt dat je bezoekers drukken. Zo simpel is het.
- Er moet weinig tot geen navigatie mogelijk zijn. Een effectieve landingspagina moet er alles aan doen om de aandacht op jouw CTA te vestigen. Andere navigatie-elementen kunnen afleiden van je CTA, waardoor je uiteindelijk leads verliest. Hoewel er effectieve landingspagina’s zijn die navigatie-elementen bevatten (ik denk hierbij even aan DoorDash), probeer je het beste deze tot een minimum te beperken.
- Voeg interessante visuals toe. Je wilt je pagina niet overvol zetten met tekst, maar je moet hem op de één of andere manier aantrekkelijk maken. Afbeeldingen van hoge kwaliteit zijn een geweldige manier om de belangstelling voor je dienst te vergroten. Bonuspunten als je een video erin kunt opnemen.
- Voeg sociaal bewijs toe. Heb je al positieve feedback gekregen? Wees niet verlegen om deze te delen op je landingspagina. Mensen zijn sociale wezens. Als je bezoekers zien dat anderen aanbevelen wat jij aanbiedt, is de kans groter dat ze geïnteresseerd zijn.
- Maak het interactief (indien van toepassing). Zorgen dat je bezoekers interactie kunnen hebben met je site kan een effectieve manier zijn om hun belangstelling te vergroten. Quizzen, bewegende balken en minigames zijn allemaal goede manieren om bezoekers aan te moedigen om te klikken. Zorg er wel voor dat alle interactieve elementen verband houden met wat je aanbiedt. Anders loop je het risico je bezoekers te irriteren.
- Ken je publiek. Wat bied je aan? Is het elegant? Energiek? Trendy? Een tijdschrift over gamen kan baat hebben bij een in-browser mini-game. Een kaarsenwinkel kan een vragenlijstje hebben dat bezoekers helpt de ideale kaars te vinden. Alles, van lettertypes tot achtergrondkleuren, moet je doelgroep aanspreken.
Methode 1: gebruik een WP pagebuilder
Voor we beginnen, moeten we duidelijk zijn over het verschil tussen WordPress.com en WordPress.org. WordPress.org is een open-source platform voor het maken en beheren van websites. Je hebt misschien gehoord dat ongeveer een derde van alle websites op WordPress draait. Dat klopt helemaal. Om WordPress.org te gebruiken, heb je een webhosting-provider nodig, evenals een domeinnaam. Maar maak je geen zorgen. Dit klinkt ingewikkelder dan het is. WordPress.com is de versie van WordPress die met eigen hosting is uitgerust. Vergeleken met WordPress.org, lijkt het veel meer op een traditionele websitemaker. Dit betekent dat het gemakkelijker te beheren is, maar het is ook beperkter. Merk op dat beide editors beschikbaar zijn in het Nederlands. Laten we beginnen met het maken van een landingspagina met WordPress.org. Als je alleen geïnteresseerd bent in het gebruik van WordPress.com, kun je hier verder gaan.Stap 1: Zorg voor hosting
Voordat je begint, heb je een hostingprovider nodig waar je WordPress en een pagebuilder kunt installeren. Als je er al één gebruikt voor je hoofdsite of online winkel, blijf er dan bij; er is geen reden om dingen ingewikkelder te maken. Als je nog geen hostingprovider hebt, raad ik je aan eens te kijken naar ons overzicht van de beste hostingproviders voor 2024
Het proces van het installeren van WordPress zal variëren afhankelijk van je provider, maar het zou bij geen enkele provider te ingewikkeld moeten zijn. Ik ging voor Hostinger om mijn pagina te maken. Hostinger biedt gespecialiseerde abonnementen voor WordPress-hosting. Het enige dat ik moest doen was een account aanmaken en de instructies van het automatische installatieprogramma volgen.
Bespaar tot 75 % op je Hostinger-abonnement!
Tijdelijke aanbieding - Mis het niet!
Stap 2: Installeer je pagebuilder
Nu je de juiste hostingprovider hebt, is het tijd om je pagebuilder te installeren. Het enige dat je hoeft te doen is naar je WordPress-dashboard gaan, naar Plugins navigeren, en op “Nieuwe toevoegen” klikken. Als je al een .zip-bestand hebt gedownload voor je pagebuilder, hoef je deze alleen maar te uploaden. Anders kun je zoeken naar de pagebuilder van je voorkeur in de “zoek plugins”-balk en vervolgens klikken op de knop “Nu Installeren”. Ik heb Elementor gebruikt voor mijn landingspagina, maar de stappen zullen zeer vergelijkbaar zijn, ongeacht je pagebuilder. Als je niet weet welke pagebuilder je moet gebruiken, kun je een kijkje nemen bij enkele van mijn favorieten hieronder. Welke bouwer je ook kiest, speel er een beetje mee voor je begint. Kijk naar instructievideo’s op YouTube, creëer mock-up-pagina’s, enz. Je wilt vertrouwd raken met de interface en functies van je pagebuilder voordat je er in duikt.Stap 3: Schets je pagina
Als je geen duidelijk beeld hebt van wat je wilt, kun je gemakkelijk eindigen met een rommelige landingspagina en geen idee hoe je het moet oplossen. Daarom is het belangrijk om een plan te hebben.
Begin met het maken van een mock-up (model) van je landingspagina. Er zijn geen regels voor dit onderdeel. Je kunt het ontwerpen in Photoshop, MS Paint, of tekenen op een servet. Het enige dat telt is dat het duidelijk genoeg moet zijn om mee te werken.
Als je niet weet waar je moet beginnen, kun je altijd kijken naar voorbeelden van geweldige landingspagina’s in jouw niche. Denk aan je merk, stijl en wie je aanspreekt.
Voor dit voorbeeld besloot ik een landingspagina te ontwerpen voor een boekenwinkel, die abonnementen verkoopt en elke maand gepersonaliseerde suggesties verstuurt. Naast de basisbeginselen heb ik ervoor gekozen een quiz op te nemen, die de gebruiker nieuwe boeken aanbeveelt.
Stap 4: Kies het perfecte sjabloon
Dus, je hebt gekozen voor een hostingprovider, je hebt WordPress geïnstalleerd, en je pagebuilder werkt. Je bent klaar om verder te gaan met het leuke gedeelte, toch? Bijna. Je moet eerst nog een sjabloon kiezen. Natuurlijk kun je beginnen met een lege pagina en van daaruit starten met bouwen. De hoeveelheid kleine ontwerpbeslissingen die je zult moeten nemen – zaken als lettertypen, kleuren, animaties en achtergrondontwerpen – zal je echter misschien verbazen. Hoe meer een bestaand sjabloon overeenkomt met je ideale ontwerp, hoe minder werk je hoeft te verrichten om je visie tot leven te brengen. WordPress.org biedt een enorme galerij van sjablonen om uit te kiezen. Jouw pagebuilder kan ook een aantal ingebouwde opties hebben. Als je overweldigd raakt, onze lijst van de beste landingspagina-sjablonen in 2024 kan helpen. Ik ben begonnen met het Online Life Coach-thema van Elementor. Ook al heb ik het aangepast voor een ander doel (vraag het wie dan ook, ik ben niet in de positie om jou te vertellen hoe je je leven moet leiden), de elegante lettertypes en netjes gerangschikte elementen gaven me een geweldig uitgangspunt.Stap 5: Personaliseer je pagina
Het precieze proces om een landingspagina te personaliseren zal voor iedereen anders zijn. Persoonlijk begin ik graag met de algemene aspecten en werk dan verder aan de details. Om te bewerken met Elementor, ga je naar je WordPress-dashboard, maak je een nieuwe pagina aan en kies je “bewerken met Elementor”. Je ziet nu een menu met verschillende widget-opties. Klik op het hamburgermenu links bovenin (dat zijn de drie horizontale lijnen) en dan op “Site instellingen”. Hier kun je de algemenere aspecten van je pagina aanpassen, zoals globale lettertypes, achtergrondkleur en meer. Als je klaar bent, klik dan op de kleine vierkantjes rechtsboven in het menu. Je zult een reeks widgets zien die je aan je site kunt toevoegen. Basis-widgets bevatten dingen als tekst, afbeeldingen en video’s. Ik besloot mijn abonnement te upgraden naar Elementor Pro om meer interessante widgets te ontgrendelen, zoals geanimeerde koppen en mediacarrousels. Hoe dan ook, je kunt elke widget simpelweg slepen en op de plek neerzetten waar je hem op je pagina wilt hebben. Je kunt dan op je widget klikken om het widget-menu op te roepen. Afhankelijk van de widget, kun je dingen aanpassen zoals kleur, randen en zelfs animaties. Voor mijn eigen pagina ben ik begonnen met het veranderen van achtergrondkleuren en het verwijderen van overbodige elementen uit mijn sjabloon. Ik heb toen mijn header en subheader bewerkt, en ruimte gemaakt waar ik een quiz kon toevoegen. Ik wilde dat mijn landingspagina zo eenvoudig mogelijk zou zijn, dus heb ik de meeste items met scrolmogelijkheden op de pagina verwijderd. Ik behield alleen de kant-en-klare elementen voor sociaal bewijs en een kleine “Over ons”-sectie, die ik aanpaste aan de stijl die ik wilde. De quiz duurde wat langer. Gelukkig is Elementor uitgerust met een ingebouwde formulier-widget, dus het was nog vrij eenvoudig. Als je een andere pagebuilder gebruikt, vind je genoeg formulier-plugins die je op je pagina kunt installeren.De beste pagebuilders voor landingspagina’s
Er zijn heel veel (en ik bedoel heel veel) pagebuilders voor WordPress. Zelfs een lijst van de beste zou te veel plaats innemen. Wat ik wel kan doen is je een snelle blik geven op mijn absolute favorieten.
Elementor
Elementor is één van de populairste pagebuilders voor WordPress, en dat is niet voor niets. Elementor biedt krachtige, gratis drag-and-drop bewerking . Het duurt even om de interessantere functies onder de knie te krijgen, maar Elementor is bijzonder krachtig als je er eenmaal aan gewend bent. Enkele van de beste functies voor landingspagina’s zijn:- Een heleboel thema’s van derden. Er zijn duizenden Elementor-compatibele thema’s op het web te vinden. Dit omvat meer dan genoeg grote landingspaginathema’s voor elk budget.
- Schaalbare functionaliteit. Het gratis abonnement van Elementor is niets om grappen over te maken. Als je echter op zoek bent naar nog meer functionaliteit, dan zijn de Pro en Expert-abonnementen redelijk geprijsd. Ook bieden ze fantastische functies zoals de Theme Builder en een geavanceerde Popup Builder.
- Aangepaste CSS bewerken. Vanaf het Pro-abonnement kun je ongeveer elk onderdeel van je website met aangepaste code bewerken. Je hebt een beetje technische kennis nodig, maar de mogelijkheden zijn eindeloos.
Divi
Divi van Elegant Themes is een flexibele optie voor het bouwen van allerlei soorten sites. De Module Editor is ongelooflijk eenvoudig te gebruiken, ondanks de enorme verscheidenheid aan aanpassingsmogelijkheden die het je biedt. En als je de voorkeur geeft aan backend editing, dan ondersteunt Divi dit ook.
Enkele van Divi’s beste functies zijn:- De Module Editor. Als je een element wilt bewerken, hoef je er alleen maar op te klikken. De verschillende mogelijkheden voor personalisatie verschijnen dan direct boven het element.
- Fantastische lay-out pakketten. Divi biedt meer dan 250 pakketten sjablonen (lay-out pakketten genoemd) om je te helpen elk soort pagina te bouwen.
- Ongelooflijk gebruiksgemak. Er zijn maar weinig pagebuilders die zo gemakkelijk te gebruiken zijn als Divi.
SeedProd
SeedProd is de enige pagebuilder in deze lijst die speciaal ontworpen is voor landingspagina’s. Je hebt het snel door en de resultaten zijn verbluffend. Het is vooral geweldig als je op zoek bent naar een meer landingspagina-gerichte versie van Elementor, aangezien de interfaces van beide pagebuilders vrij gelijkaardig zijn. SeedProd biedt geweldige functies zoals:- Bliksemsnelle bewerking. Dankzij de eenvoudige lay-out en de responsieve widgets, duurt het slechts een paar minuten om een geweldige landingspagina te maken met SeedProd.
- Sjablonen van hoge kwaliteit. SeedProd biedt tot meer dan 180 hoogwaardige en te personaliseren sjablonen, afhankelijk van je abonnement.
- Beheer van abonnees. Met SeedProd’s tools voor abonneebeheer kun je de abonneegroei bijhouden en krijg je visuele gegevens over je abonneecijfers.
Beaver Builder
Beaver Builder is een eenvoudige, module-gebaseerde pagebuilder. Hoewel de focus ligt op het bouwen van pagina’s voor websites van bureaus, maken de gebruiksvriendelijke interface en de grote verscheidenheid aan sjablonen het voor iedereen aangenaam om te gebruiken. Beaver Builder biedt:- Ongelooflijk responsief bewerken. Wanneer je wijzigingen aanbrengt op je website, is er vrijwel geen vertraging in de editor.
- Gemakkelijk knoppen bewerken. Beaver Builder biedt elke tool die je maar nodig hebt om een klikbare knop (een bijzonder belangrijk element op de meeste landingspagina’s) fijn af te stellen.
- Enorm ondersteuningscentrum. Als je ooit de weg kwijt bent, biedt Beaver Builder honderden instructievideo’s om je weer op weg te helpen.
Methode 2: gebruik de WordPress Gutenberg-editor
Als je WordPress.com gebruikt, moet je een Pro-abonnement hebben om een pagebuilder (of andere plugins) te kunnen installeren. Bovendien verbergen de meeste pagebuilders hun beste functies achter een betaalmuur, dus de kosten kunnen snel oplopen. Het goede nieuws is dat elk WordPress-abonnement is uitgerust met de Gutenberg-editor, een eenvoudige blok editor voor het eenvoudig maken van websites. Hoewel deze beperkter is dan veel andere pagebuilders, kun je het nog steeds gebruiken om een effectieve landingspagina te maken, en voor weinig tot geen geld. En zo doe je het:Stap 1: Maak een WordPress.com-account aan
Om te beginnen hoef je alleen maar naar WordPress.com te gaan en op “aan de slag” te klikken. Je moet je naam en e-mail invoeren en een wachtwoord aanmaken.Bespaar tot 55 % op je WordPress.com-abonnement!
Tijdelijke aanbieding - Mis het niet!
Stap 2: Plan het ontwerp van je landingspagina
Dit is vrijwel hetzelfde advies als voorheen, behalve dat je nu rekening moet houden met de beperkingen van de Gutenberg-editor bij het plannen van je ontwerp. Plan geen pagina met complexe animaties, dynamische achtergronden en… ik weet het niet, deeltjeseffecten? Met Gutenberg zul je het moeten doen met de basis. Maar laat dit je niet afschrikken. Een goede landingspagina heeft niet veel mooie elementen nodig. Het enige dat je nodig hebt is een sterke CTA en een onderscheidende identiteit.Stap 3: Kies je thema
Nu je een stappenplan hebt voor je pagina, is het tijd om een thema te kiezen. Ga naar je WordPress.com-dashboard, klik op Uiterlijk, en dan Thema’s. Kies degene die het beste past bij het ontwerp dat je in gedachten hebt. Thema’s in WordPress.com zijn ontworpen voor verschillende doeleinden. In plaats van je te concentreren op kleuren en tekststijlen (die kun je later altijd nog wijzigen), zoek je een thema dat is geoptimaliseerd voor jouw ideale structuur.Stap 4: Leer Gutenberg kennen
Wanneer je voor het eerst je site bewerkt, biedt WordPress.com je een snelle rondleiding door de Gutenberg-editor. Dit is een mooie kans om je kennis over de grondbeginselen bij te schaven. Ik raad ook sterk aan om eerst een beetje te spelen voordat je je pagina gaat maken. Probeer blokken toe te voegen en te verwijderen, gewoon om te zien wat ze doen. Om je pagina te personaliseren, ga je naar je dashboard, Uiterlijk en dan Editor. Daar kun je beginnen met het toevoegen en wijzigen van verschillende blokken om aan je behoeften te voldoen. Om meer algemene aspecten van het uiterlijk van je site te wijzigen, zoals achtergrondkleur, ontwerp van de header en lettertypen, klik je op de knop “stijlen” in de rechterbovenhoek. Wat je wel en niet kunt aanpassen, hangt af van het gekozen thema.Stap 5: Bewerk je pagina
WordPress.com verdeelt blokken in verschillende categorieën, zoals media, tekst en ontwerp. De ontwerpblokken zijn vooral nuttig omdat je daarmee de basis lay-out van je site kunt bewerken. Door je site te verdelen in kolommen, groepen en aangepaste ruimtes kun je een samenhangend ontwerp creëren. Als je een element wilt toevoegen, ga dan simpelweg naar de linkerbovenhoek en klik op het plusteken. WordPress.com biedt veel basisblokken, maar je beste tools zullen diegene zijn voor het toevoegen en aanpassen van headers, afbeeldingen en paragrafen. Als je een blok wilt aanpassen, klik dan op de “Opties”-knop (weergegeven als drie puntjes) die rechts bovenin verschijnt en klik op “Toon meer instellingen”. Afhankelijk van het blok, zal dit je verschillende aanpassingsmogelijkheden bieden die je kunt gebruiken om het ontwerp te personaliseren. Je kunt ook gebruik maken van wat WordPress.com “patronen” noemt. Patronen zijn vooraf gebouwde verzamelingen blokken die je kunt gebruiken om veelvoorkomende functies aan je pagina toe te voegen. Er zijn patronen voor het invoegen van CTA’s, “contact”-blokken, “over ons”-secties, en nog veel meer.Methode 3 (Bonus): dump WordPress voor een gemakkelijkere oplossing
Hey, snelle vraag. Waarom wil je precies WordPress gebruiken? Begrijp me niet verkeerd, WordPress is een fantastisch platform dat veel te bieden heeft, maar het is niet de enige manier om een landingspagina te maken. Er zijn genoeg websitemakers waarmee je in de helft van de tijd een effectieve landingspagina kunt maken. En hoewel het klopt dat ze qua schaalbaarheid niet kunnen tippen aan WordPress, hoeft dat voor een landingspagina ook niet. Dus, als bonus, volgt hier een snelle gids voor het maken van een landingspagina met behulp van een websitemaker.Stap 1: Kies een websitemaker
Wat de beste websitemaker is voor jou, zal afhangen van wat je nodig hebt qua functies, gebruiksgemak en ontwerpflexibiliteit.
Voor landingspagina’s zijn dit mijn top aanbevelingen:- Wix. Wix biedt ongelooflijke ontwerpflexibiliteit dankzij de gratis drag-and-drop editor. Het is echt gebruiksvriendelijk, dus het duurt maar een paar minuten om ermee te leren werken. Het bevat ook talrijke cool uitziende geanimeerde functies en vooraf gemaakte elementen die je kunt gebruiken om je pagina mooier te maken.
- SITE123. SITE123 is één van de makkelijkste websitemakers die er zijn. Met SITE123 kan iedereen binnen enkele minuten een landingspagina maken, ongeacht ervaring. Het is ook mobiel-responsief, dus je kunt er zeker van zijn dat je pagina er op mobiel net zo goed uitziet als op desktop.
- Squarespace Squarespace is een fantastische optie voor pagina’s die visuals benadrukken, de aandacht vestigen op specifieke elementen, en interacties opwekken. Ik had ook gewoon landingspagina’s kunnen zeggen. Ik raad Squarespace aan als je een elegant maar dynamisch ontwerp wilt dat het meeste moeilijke werk uit handen neemt.
Stap 2: Plan je ontwerp en kies een sjabloon
Ja, deze weer. Ik zal niet te veel in detail treden want de stappen zijn dezelfde zijn als voorheen. Plan vooraf de structuur van je pagina en kies dan een sjabloon dat daar dicht bij ligt. Wix heeft een bibliotheek van meer dan 800 hoogwaardige sjablonen (waarvan er 35 speciaal voor landingspagina’s zijn gemaakt), dus het zou niet al te moeilijk moeten zijn om de perfecte basis voor je ontwerp te vinden. Websitemakers bieden veel meer ontwerpvrijheid dan de Gutenberg-editor. Sommige bieden zelfs speciale pagebuilders voor landingspagina’s. Ze zijn ook veel gebruiksvriendelijker. Wix’s drag-and-drop editor, bijvoorbeeld, maakt het gemakkelijk om het uiterlijk en de functionaliteit van je sjabloon zo veel als je wilt te veranderen.Stap 3: Aan de slag met bewerken
Begin met het veranderen van de kleuren en typografie van je thema naar de stijl die het beste bij je past. Om dit te doen, ga naar het menu aan de linkerkant en klik op “site design”. Hier kun je beginnen met het verwijderen van elementen die je niet nodig hebt en het toevoegen van nieuwe. Om door elementen te bladeren, hoef je alleen maar op het plusteken links bovenin te klikken. Wix biedt meer dan 20 elementcategorieën, variërend van tekst en decoratieve elementen tot winkelfuncties en een tool voor bloggen. Om een element toe te voegen, klik je er simpelweg op en zet je het neer waar je maar wilt op de pagina. Ik stel voor dat je ten volste gebruik maakt van de grote verscheidenheid aan dynamische effecten die Wix biedt, zoals animaties en overgangen. Ze zijn een geweldige manier om je pagina visueel interessanter te maken en bezoekers betrokken te houden. Om de eigenschappen van een element te bewerken, hoeft u er alleen maar op te klikken. Afhankelijk van het element, zie je knoppen voor verschillende menu’s verschijnen. In deze menu’s kun je acties uitvoeren zoals content bewerken, aangepaste animaties toevoegen en nog veel meer. Vergeet niet een voorbeeld te bekijken van de verschillende versies van je site om ervoor te zorgen dat deze goed werkt op zowel mobiel als desktop. Met een beetje aanpassen hier en daar, heb je in een mum van tijd een geweldige landingspagina.Stap 4: Publiceer je pagina
Om je pagina te publiceren, moet je er een domein voor registreren, zelfs al is het maar de gratis versie van Wix. Maar maak je geen zorgen, de meeste websitemakers zijn uitgerust met een geïntegreerd domeinregister dat het makkelijk maakt om je site online te krijgen.Wix kost nu slechts $17.00 per maand!
Mis deze geweldige deal niet!