Met Gutenberg snel landingspagina’s bouwen: waarom de blokkeneditor vaak genoeg is

Een landingspagina is technisch een eenvoudige pagina. Je hebt zes soorten blokken nodig en meer eigenlijk niet: kop, alinea, knop, afbeelding, kolommen en groep. Het groepsblok geeft je de banden met een eigen achtergrondkleur, het kolommenblok zet je voordelen naast elkaar, het knopblok is je enige uitgang. Ze zitten allemaal standaard in WordPress.

Wie daar een pagebuilder voor installeert, betaalt dat niet alleen in geld. Zo’n plugin laadt eigen stijlen en scripts mee, en je opbouw zit er daarna aan vast. Eerlijk is eerlijk: Gutenberg is minder fijn in de afwerking. Uitlijnen op de pixel, hover-effecten en aparte marges per schermbreedte kosten je losse CSS of een omweg. Voor een pagina die vooral duidelijk moet zijn, weegt dat zelden op tegen het gemak van niets extra’s installeren.

Begin met de volgorde van je blokken, niet met de kleuren. Welk blok waar staat, ligt vast en verandert niet per klus: belofte, bewijs, aanbod, formulier. Die volgorde staat in het landingspagina template. Wil je eerst het hele proces zien, van sjabloonkeuze tot publiceren, kijk dan bij landingspagina maken in WordPress.

1. 1KopWaar de pagina over gaat, in gewone taal.
2. 2BelofteWat je krijgt en wat het je oplevert.
3. 3BewijsErvaringen, logo's of voorbeelden van werk.
4. 4AanbodWat er precies in zit en hoe het werkt.
5. 5FormulierDe actie zelf, kort en zichtbaar.
6. 6ContactTelefoon, mail en je bedrijfsgegevens.

Blokpatronen maken die je steeds hergebruikt

Hier zit de tijdwinst. Een blokpatroon is een stuk pagina dat je bewaart en later in één klik terugzet. Selecteer in de lijstweergave links de blokken die bij elkaar horen, klik op de drie puntjes en kies de optie om er een patroon van te maken. Geef het een naam die je over een half jaar nog snapt, zoals “Kop met knop”. Je vindt het terug onder het plusteken, in het tabblad Patronen.

Let op het schuifje voor synchroniseren. Een gesynchroniseerd patroon is één bron: pas je het ergens aan, dan verandert het overal. Dat wil je voor je contactblok en je openingstijden. Een niet-gesynchroniseerd patroon plaatst een kopie die je per pagina vrij aanpast. Dat wil je voor de opbouw zelf, want kop en tekst verschillen elke keer. Heet een menu bij jou net anders, kijk dan in de uitleg op developer.wordpress.org/block-editor.

Één opzet, tien pagina’s: zo dupliceer je slim

Met Gutenberg snel landingspagina’s bouwen is vooral een kwestie van niet opnieuw beginnen. Zet je patroon op een lege pagina en overschrijf de teksten, of kopieer via het menu rechtsboven alle inhoud van de bestaande pagina en plak die in de nieuwe. Zet in je bewaarde opzet plaatshouders in hoofdletters neer, zoals PLAATS en DIENST, dan blijft er nooit een oude plaatsnaam staan. Loop bij elke kopie dit rijtje af:

• De url. Een eigen adres met het onderwerp erin.
• Kop en eerste alinea. Die gaan echt over deze dienst of plaats.
• Het bewijs. Ander werk, andere foto’s, andere vragen.
• Het formulier. Een verborgen veld of eigen onderwerpregel, zodat je in je mail ziet welke pagina de aanvraag opleverde.
• Titel en omschrijving. Per pagina apart, anders staan er straks tien dezelfde in Google.

Regel het menu één keer goed. Bij een blokthema maak je in de sjablooneditor een sjabloon Landingspagina, zonder koptekst en zonder voet, en koppel je dat aan elke pagina. Bij een klassiek thema kies je in de zijbalk bij Sjabloon de lege variant.

Wel doen

• Eerst de volgorde, daarna pas kleur en ruimte
• Je opbouw opslaan als patroon zodra je tevreden bent
• Contactblok gesynchroniseerd, pagina-opzet niet
• Één sjabloon zonder menu voor al je pagina’s

Niet doen

• Een plugin met honderd blokken voor één blok
• Groepen in groepen nesten om iets uit te lijnen
• Elke pagina vanaf een leeg vel opbouwen
• Kopieën maken die alleen in de plaatsnaam verschillen

Waar Gutenberg traag wordt

Er zijn twee soorten traagheid. De editor zelf hapert bij zeer lange pagina’s met veel geneste groepen; werk dan via de lijstweergave en knip de pagina op in patronen. Dat raakt je bezoeker niet.

De voorkant wel. Gewicht komt daar zelden uit de blokken zelf, maar uit te grote afbeeldingen in een dekvlakblok, uit ingesloten video’s of kaarten die scripts van derden meebrengen, en uit blokkenbibliotheken die hun hele stijlbestand laden ook als je er één blok van gebruikt. En er is een grens aan wat de editor kan: A/B-testen, voorwaardelijke velden of tekst die meebeweegt met je advertentie zitten er niet in.

Snelheidscheck voordat je live gaat

Vijf minuten werk, en het scheelt de meeste ellende achteraf.

• Bekijk de pagina op je eigen telefoon, niet in de voorbeeldweergave
• Meet op mobiel, niet alleen op je bureaublad
• Verstuur het formulier één keer zelf, van begin tot eind

Kijk daarna naar je afbeeldingen: upload ze op de grootte waarop ze getoond worden en zet ze om naar een modern formaat. Dat is meestal de grootste winst. Blijft het langzaam, dan zit het niet in je blokken maar in je thema, je hosting of je plugins. Wat je dan doet, staat bij laadsnelheid van je landingspagina.

Heb je die eerste opzet niet, dan bouwen wij hem binnen 48 uur, vanaf €109 per maand. Daarna dupliceer je zelf verder in de editor die je toch al gewend bent.