Skip to main content
Luister naar dit blog artikel

Werken met de Gutenberg blokeditor

Aangepast op: 6 jun, 2023

WordPress heeft in december 2018 een nieuwe editor geïntroduceerd. Als jouw WordPress website al voor die tijd al online stond heb je grote kans dat jij nog steeds in de klassieke editor werkt. Check het voor de zekerheid want de klassieke editor wordt nog maar tot 31 december 2021 ondersteund!

Korte introductie op Gutenberg

WordPress editor sinds 2019: Gutenberg  - 1

Paniek?

Nee, dat is niet nodig. De klassieke manier van werken wordt nog ondersteund doordat je de Classic Editor plugin kan installeren, wat veel mensen in 2019 hebben gedaan. Maar om mee te gaan met technologische ontwikkelingen, die een betere weergave garanderen en mooiere vormgeving is het wijs om over te stappen.

Moet ik nu alles gaan omzetten?

Nee, dat hoeft niet, alleen als je dat zelf graag wilt. Ik adviseer wel vanaf nu te starten met Gutenberg. Als de editor echt niet meer ondersteund wordt na 2022 dan zijn je huidige blogs ook al drie jaar oud en wellicht verouderd. Maak er een gewoonte van regelmatig te checken of je blogs nog ondersteunend zijn aan jouw boodschap. Kunnen ze weg kan je ze herschrijven of samenvoegen? En als je ze aanpas, vergeet dan niet om ze opnieuw te delen.

Hoe kan ik zien welke editor ik heb?

Open een bericht. Als je er een blok verschijnt met de tekst “Welkom bij de blokeditor” dan is de Gutenberg editor al actief. Je kan hem direct gaan gebruiken. Het eerste wat je doet is het blokje tekst wat nu omrand is met de de titel ‘Klassiek’, omzetten naar een Gutenbergblok.

Gebruik ik de editor ook al?

Als je deze melding krijgt, dan wel. De oude blogs kunnen nog wel in de klassieke opmaak staan ondanks deze melding. Hoe je de oude opmaak omzet laat ik onderaan in een video zien.

Wat is een editor?

De editor is het gedeelte waar je de tekst in typt en bewerkt. Als je een blog of een pagina maakt, dan ben je bezig in de editor.


De plugin check

YouTube player
plugin check, deactiveren en verwijderen.

Let op. Wat belangrijk is om dubbel te checken of je nog een plugin actief hebt staan die “Classic Editor” en/of “Disable Gutenberg” heet. Ga je naar de plugins en kijk je of je een of allebei als plugin hebt geïnstalleerd. Je kan beide deactiveren. Check of de opmaak van je pagina’s heel blijft. Verwijder de plugins pas als je alles hebt omgezet en je zeker weer dat het goed gaat.

In de overgangsperiode in 2019 hebben veel ondernemers de klassieke editor plugin geïnstalleerd. Je kon toen kiezen tussen Gutenberg en de klassieke manier van editen. Momenteel hebben we versie 5.8 en zit hij er standaard in (als je netjes je updates hebt gedaan).

Blogs handmatig overzetten

klassieke editor WordPress
herkenbaar aan dit balkje met het woord klassiek er op

Staan je blogs en pagina’s nog wel in de klassieke opmaak? Je kan ze handmatig omzetten door op de knop rechts boven te klikken. Klik op de 3 bolletjes die boven elkaar staan. En klik daarna op “Omzetten naar blokken”. In de praktijk merk ik dat niet altijd gebeurd. Is dat bij jou ook zo? Kopieer dan alles, knip het en daarna plak je alles in een paragraaf. Hij maakt in het beste geval dan automatisch de bijbehorende blokken aan.

omzetten-naar-blokken
rechterhoek, drie puntjes, omzetten-naar-blokken
Gutenberg 3 - Oude blogs omzetten

Waarom de “Gutenberg” editor gebruiken?

Er is steeds meer vraag naar een meer intuïtieve manier van vormgeven. Een platform als WIX maakt hier al gebruik van maar er zijn ook al losse add-on pagebuilders beschikbaar voor WordPress zoals Beaver Builder, ElementorDiviThemify,of  WPBakery  Zelf gebruik ik thema’s van Yootheme Pro waar een Pagebuilder in de front-end zit verwerkt.

Met deze editor voldoet WordPress aan de vraag om meer invloed te hebben om de vormgeving van je pagina. Wat voor invloed dit gaat hebben om de huidige pagebuilders is nog de vraag. Worden ze overbodig of vullen ze elkaar aan? Het thema van Yootheme Pro waar ik mee werk heeft inmiddels de Yootheme builder ook voor de berichten aangezet. Ik gebruik nu beide door elkaar omdat Gutenberg sneller werkt.

Wat kan ik met Gutenberg?

Met deze nieuwe editor kan je jouw blog mooier vormgeven. Je hebt meer opties. Je werkt niet meer met plaatjes die je tussen een tekst plakt. En waarvan je hoopt dat het een beetje mooi uitlijnt. Nee je kan blokken plaatsen en die vullen.

Ik wil graag starten met de Gutenberg editor, maar kan ik ook leren hoe ik hem moet gebruiken?

Ja dat kan, neem contact op voor een 1-op-1 sessie.

Je kan ook zelf oefenen met de editor door een blog op concept te laten staan. Dan zie je hem alleen zelf. Je kan dan alle blokken uitproberen en checken of de vormgeving samenwerkt met jouw thema!

Gutenberg in de praktijk

Welke blokken zijn er en hoe voeg ik ze toe?

WordPress editor - Hoe werkt Gutenberg

Je voegt de nieuwe blokken het makkelijkste toe via het + teken, links bovenin. Wil je een blok toevoegen tussen twee bestaande blokken, dan klik je op het + teken in het midden aan de bovenkant van je blok. Hieronder zie je een galerij met de verschillende tabjes en daarbinnen de blokken die je kan kiezen.

Algemene blokken

Als je links boven klikt op algemene blokken, vind je de blokken die je het meeste zult gebruiken. Zodra je de Gutenberg gaat gebruiken zullen de blokken die jij het meest gebruikt, komen te staan onder het tabje “Meest gebruikt.” Probeer het eens uit en voeg een blok toe en ervaar zelf hoe het werkt.

  • Kopje
  • Paragraaf
  • Lees verder
  • Lijstje
  • Afbeelding
  • Omslagafbeelding (afbeelding met tekst er over)
  • Gallerij
  • Video
  • Quote
  • Audio
  • Bestand (bijvoorbeeld een pdf)

Dit is een omslagafbeelding. Het mooie is dat je een “bedekkingskleur” kan kiezen en een transparantie

Nu heb ik hetzelfde blok maar kies ik voor uitlijning naar links. Hierdoor komt het blok wat je er onder plaatst er nu naast te staan. Opletten dus.

Overige blokken

Onder de andere tabjes (inline elementen, layout elementen, opmaak en insluitingen vind je blokken die je minder gebruikt worden. Bijvoorbeeld:

  • Kolommen
  • Knop
  • Scheidingslijn
  • Media + tekst

Media + tekst

Het blokje media en tekst gedraagt zich net wat anders. Hier blijven tekst en afbeelding wel binnen het blok staan. Alleen wordt bij mij de inhoud gecentreerd naast het blok weergegeven. En zie ik geen optie om de uitlijning bovenaan te starten. Dit kan een webbouwer aanpassen door CSS styling toe te voegen aan het thema.

Het stylen van de blokken

Het is mogelijk om wat kleine aanpassingen te doen aan de styling. Per blok verschil dit. Nadat je een blok hebt geplaatst, zie je in de rechterkolom een aantal opties. Vaak kan je tekstgrootte aanpassen, de achtergrond kleur of een initiaal kiezen. Onder geavanceerd is er de optie om een CSS class op te geven. Met een class naam wordt er styling opgeroepen vanuit de code van je template. Dit is iets waar je webdesigner je mee kan helpen.

Een button kan je aanpassen in de zijkolom. Zelf liep ik er tegen aan dat ik niet dezelfde style kan gebruiken als die uit mijn thema. Als ik een class naam opgeef dan krijgt de styling vanuit Gutenberg voorrang en zie ik mijn eigen kleur er onder vandaan komen.

Dit is een paragraaf blok maar met de instellingen aan de zijkant kan je een achtergrondkleur instellen. Ook kan je de grootte van de tekst veranderen. Een leuke optie als je een tekst wil laten opvallen.

Omdat ik met het bovenste blok aan een citaat moest denken heb ik nu het “citeren” blok er bij gezet. Deze neemt mij mijn website automatisch de styling over van mijn thema

kleine lettertjes onderaan het citaat

Voorbeeld van een gallerij

Kolommen

Dit is een linkerkolom. Je kan ze verschillende kleuren geven. De hoogte wordt bepaald door de hoeveelheid content die je er in zet.

dit is de rechterkolom. Wel leuk dat je een kleurtje kan gebruiken.

Behoefte om dit samen op te pakken?

Met regelmaat organiseer ik samen-doe-sessies maar een 1-op-1 sessie is ook mogelijk. Neem contact met me om uit te vinden hoe ik jou kan helpen.

studio@sandragortemaker.nl | 06 531 90 681


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Volg de WordPress training

online marketing studio sandra gortemaker

Wil jij je kennis over WordPress bijspijkeren? Dat kan met de online training waarin ik de meest voorkomende functies en werkwijzen bespreek.