Gutenberg en Elementor templates

Gutenberg, we hebben er allemaal een hekel aan maar de laatste tijd lijkt het voor mij toch in toenemende mate een oplossing voor een probleem waar ik vaak mee zit. Ik wil graag voor al mijn berichten de visuele teksteditor (de klassieke editor) gebruiken en de tekst inladen in een template. In mijn geval het berichten template dat ik in elementor gemaakt heb. Als ik afbeeldingen, video’s en andere zaken wil toevoegen loop ik vaak tegen het probleem aan dat er geen nette manier is om dit in de visuele WYSIWYG editor in wordpress voor elkaar te krijgen. Voor mij was de optie “editor wisselaar”

De gutenberg editor voegt weinig waarde toe voor de meeste website eigenaren. Een groot voordeel van de editor is wel dat in Elementor Pro thema’s aangemaakt kunnen worden. In het thema kun je vervolgens je gutenberg bericht inladen, de layout die je in gutenberghebt aangegeven blijft dan staan. 

Ben je benieuwd hoe we dit ingezet hebben en wat de mogelijkheden zijn dan heb je mazzel. Deze werkmethode is er een die we je van a tot z uitleggen!

Hoe laat je elementor en gutenberg samenwerken?

Elementor is briljant. De elementor front end editor werkt geweldig, we kunnen hier absoluut uren over praten en je zult geen negatief woord van ons er over horen. Wij gebruiken elementor om onze pagina’s vorm te geven, bijvoorbeeld de homepage en contactpagina. Pagina’s waarvan we veel dezelfde hebben maken we met de elementor theme builder. Deze theme builder stelt je in staat om bijvoorbeeld alle berichten op een bepaalde manier weer te geven. Omdat onze berichten voornamelijk uit tekst bestaan werkt dit voor ons erg goed. In sommige gevallen heb je echter een tussenweg nodig. Je wil dan niet in je template gaan klooien om je bericht er fatsoenlijk uit te laten zien maar een geheel losstaande pagina van een bericht maken is ook weer wat overdreven. In die gevallen kan de gutenberg editor een oplossing zijn. 

Wij hebben de klassieke editor plugin voor onze berichten ingesteld. Deze editor zorgt er voor dat je (zoals de naam al doet vermoeden) de klassieke editor terug krijgt in plaats van de gutenberg editor die standaard in de huidige wordpress installaties zit. Deze plugin heeft de optie om te switchen van klassieke editor naar gutenberg editor. Dit kan handig zijn als je bijvoorbeeld tussendoor een filmpje wil laten zien, of zelfs twee kolommen wil maken met twee verschillende filmpjes. Bijvoorbeeld een over het laten zien van de installatie van de klassieke editor en een over het gebruik van gutenberg. 

Zoals je ziet hebben wij zojuist iets voor elkaar gekregen wat met een simpele wysiwyg editor een stuk lastiger zou worden. Twee kolommen naast elkaar maken. Uiteraard is dit mogelijk met een klein beetje codeer werk maar de gutenberg editor, hoe beroerd ook is in dit geval geschikter en sneller. 

Welke extra mogelijkheden geeft gutenberg?

Toen wij de eerste pagina’s in gutenberg produceerde kwamen we nog een hoop extra functionaliteiten tegen waarvan we in eerste instantie niet wisten dat we ze gemist hadden. Een van deze mogelijkheden is het toevoegen van de YOAST FAQ. In de klassieke editor is deze niet beschikbaar, in de gutenberg editor wel. Het voordeel van de FAQ is dat deze automatisch microdata mee geeft. Hiermee kun je een uitgebreider zoekresultaat krijgen in de SERP van google. Ook how to’s van Yoast worden perfect geintegreerd. Enkele andere plugins die wij gebruiken zoals de FAQ generator waarmee we voor het heuristieken bericht een goede positie verkregen hebben hadden ook een eigen gutenberg blok waarmee de implementatie in een pagina een stuk soepeler verliep.

Welke problemen liepen we tegenaan bij het gebruik van gutenberg

Hoewel gutenberg een redelijk goed idee is werkt het verre van feilloos. Eenvoudige zaken als blokken verslepen wekt regelmatig frustraties op. Ook zaken als linkjes invoegen in de WYSIWYG editor (of klassieke wordpress editor zoals ze het zelf noemen) werkt vaak matig. Drie keer klikken om iets te selecteren, verslepen of aan te passen is vaak nodig. Uiteindelijk werkt alles wel maar echt soepel gaat het niet. 

Daarnaast krijg je tijdens het werken in de gutenberg editor in plaats van je document instellingen de blok instellingen rechts in het scherm te zien. Het probleem hiervan is dat je posts eenvoudig publiceert zonder dat je gekeken hebt of je de samenvatting, uitgelichte afbeelding en categorie wel goed hebt ingesteld. Dit probleem hebben wij al een aantal keer gehad. Hoewel een ezel zich niet snel twee keer aan dezelfde steen stoot geld bij de blok instellingen in plaats van document instelllingen toch: Uit het oog, uit het hart. 

Iets wat wij verder veel gebruiken is de word counter die standaard in de WYSIWYG klassieke editor zit. Zo heb je een aardig idee of je te lang van stof bent of dat er waarschijnlijk nog wel wat meer te vertellen valt. Met de nieuwe editor hebben we die word counter niet meer beschikbaar. 

Hoe soepel verloopt de integratie met elementor?

De gutenberg editor wordt verassend goed ingeladen door elementor. We hebben nog geen problemen voorbij zien komen. Video’s, foto’s, verschillende kolommen werken allemaal prima. Ook op mobiele apparaten lijkt alles goed te werken, het enige waar we tegenaan liepen is dat je het gebruik van twee kolommen naast elkaar niet op mobiele apparaten vast kunt zetten. Gebruik je twee kolommen naast elkaar dan zullen deze altijd onder elkaar weergegeven worden, tenzij je met de css aan de slag gaat natuurlijk.

Elementor blokken in gutenberg

Sinds eind 2018 heeft elementor ook Elementor blocks for gutenberg. De elementor blokken Op deze manier hoef je niet met shortcodes te werken wanneer je elementor blokken in je pagina wil toevoegen. Je hebt hier voor wel de meest recente versie van elementor nodig. Het voordeel is dat als je bijvoorbeeld je contactformulier halverwege een pagina wil invoeren je dit simpelweg kunt doen vanuit de editor. Ook voor bloggers kan het een goede oplossing zijn wanneer zij halverwege een post bijvoorbeeld een advertentie willen weergeven. 

Veelgestelde vragen