Blog

WordPress development: van flexibele content naar visuele editor

Geschreven door Stan

12 september 2023

Als we een nieuwe website bouwen, dan is ons vertrekpunt technisch gezien altijd hetzelfde: Onze WordPress boilerplate. Dit fundament hebben we de afgelopen jaren ontwikkeld en blijven we wekelijks vernieuwen en verbeteren. In de basis bestaat het uit een kleine selectie plugins (Advanced Custom Fields en Gravity Forms), Bootstrap 5 als framework, het globale beheer van bedrijfsgegevens (contactgegevens, openingstijden en social media) en een pagebuilder.

Om als websitebeheerder zelf pagina’s op te kunnen bouwen, maken we gebruik van template-blokken (pagebuilder). Deze blokken zijn voorgedefinieerd in de huisstijl van de website en daarmee ‘hufterproof’ inzetbaar. Met deze blokken kun je theoretisch alles maken. Maar hoe meer keuze: hoe lastiger het is om te zien welk blok je nu écht wil gebruiken. Een tarieven pagina vraagt om andere layout-keuzes dan een blog artikel.

Met twee verschillende blokken is het verschil ‘in de achterkant’ van de website nog wel duidelijk, maar worden het 15+ blokken dan verlies je al heel snel het overzicht. Als je niet live ziet wat je doet, dan ga je al snel 20x je pagina opslaan om het resultaat te kunnen bekijken. Als oplossing kwam WordPress een kleine vijf jaar geleden met Gutenberg.

Van flexibele content…..

Een pagina opbouwen kan met tekst, video, audio, shorts, quotes, galerijen, fotosliders, bulletpoints, laatste nieuwsberichten, Google Maps kaartjes, vacatures en call-to-actions. En nog veel meer wat weer website afhankelijk is. Dan zijn er ook nog combinaties en verschillende uitvoeringen per content-blok. Heb jij het overzicht nog?

In je gedachten heb je de pagina al af. Maar hoe zag het blok ‘galerij’ er ook alweer uit binnen jouw website? Precies dat was het probleem bij ‘flexibele content’. De manier hoe we eerst pagina’s lieten opbouwen. Uit een selectielijstje koos je ‘Tekst’ of ‘Tekst + afbeelding’, totaal niet visueel. Had je al de juiste keuze gemaakt, dan was de vraag of de tekstlengte wel lekker uit zou komen. Teveel tekst, te weinig? Te grote foto of juist een verkeerde verhouding. Zonder je pagina (in concept) te publiceren, zag je niet wat je had gemaakt.

naar Live Editing!

Sinds 2021 was voor ons de tijd rijp: We zijn overgeschakeld naar het gebruik van Gutenberg: De ingebouwde pagebuilder van WordPress zelf. Nadat de kinderziektes waren opgelost en we een goede oplossing hadden om bij clean coding standards te blijven (lees: 100% Bootstrap), hebben we de overstap gemaakt.

Aan de keuze van blokken verandert niets, die blijft en wordt bij elke website groter. Maar de manier van weergeven ‘in de achterkant’ is wel beter. Je ziet namelijk hetzelfde als een bezoeker van de website. Bij elke letter die je typt, zie je het ‘live’ resultaat: In de stijl van jouw website. Zo heb je een idee of je titel lekker uitkomt in de layout. Tijdens het bewerken switch je gemakkelijk van mobiele weergave, naar tablet en weer terug naar desktop.

Dus… geen wensen meer?

Dat Gutenberg sneller, simpeler en beter werkt, daar zijn we al even van overtuigd. Maar toch blijven we kritisch en willen we blijven innoveren. Het nadeel van werken met Gutenberg is dat je eigenlijk minimaal 15″ monitoren nodig hebt. Op een 13″ Apple Macbook valt het nog wel eens tegen, omdat het bewerkingsvenster bijna de helft van de pagina beslaat.

Toch ervaren we dat opdrachtgevers minder snel geneigd zijn om de telefoon te pakken voor een (kleine) aanpassing, omdat het dankzij Gutenberg gemakkelijker is om interactieve pagina’s zelf op te bouwen.
Opdrachtgever blij, wij blij!

Benieuwd naar de rest?

Support nodig?

WordPress development: van flexibele content naar visuele editor

Van flexibele content…..

naar Live Editing!

Dus… geen wensen meer?

Lees meer interessants

Content schrijven met behulp van AI

Kerstvideo