WordPress Gutenberg | Tutorial voor beginners 2021

In deze beginner tutorial laat ik je zien hoe je kan starten met WordPress Gutenberg blokken: van de interface, instellingen tot het werken met de blokken.

De interface van WordPress Gutenberg editor

Om te beginnen zien we 4 grote stukken in de Gutenberg editor:

Basis gutenberg interface
  1. De bewerkbalk
  2. Sidebar om Gutenberg blokken toe te voegen
  3. Content of inhoud preview
  4. Instellingen voor pagina/bericht of blokken

Als laatste zien we helemaal linksboven nog een WordPress logo en wanneer je daar op klikt, keer je terug naar je WordPress dashboard/backend.

De Gutenberg bewerkbalk

Deze bewerkbalk is altijd aanwezig en geeft je het overzicht van je huidige pagina of bericht. Je vindt er de volgende knoppen:

Links:

  • + knop om Gutenberg blokken toe te voegen
  • Bewerken of Selecteren
  • Ongedaan maken en opnieuw doen
  • Pagina info: om te zien hoeveel karakters woorden, tekens, kopppenakters je pagina bevat

Rechts:

  • Bewaren, publiceren of inplannen van je pagina of bericht
  • Voorbeeld: voorvertoning in een nieuw tabblad
  • Tandwiel: pagina- of blokinstellingen
  • Thema gerelateerde instellingen
  • Opties of geavanceerde instellingen

Content of inhoud van je pagina of bericht

Dit stuk geeft je een live preview van wat je toevoegt op je pagina. Hier kun je makkelijk meevolgen hoe de blokken elkaar opvolgen.

Wil je een echte waarheidsgetrouwe weergave in je browser? Klik zeker eens op Voorbeeld / Voorvertoning in een nieuwe tab om te controleren of alles er goed uit ziet.

Blokgereedschappen

Wanneer je een blok hebt geselecteerd zie je telkens een toolbar boven je blok zweven. Dit zijn de gereedschappen, specifiek voor deze WordPress blok.

Gutenberg blokgereedschappen

🔥 TIP: deze gereedschappen kunnen soms vervelend in de weg zitten. Je kunt ze bovenaan de pagina vastplakken door bij Opties / Top toolbar aan te klikken.

Blok instellingen

Om nog meer instellingen te kunnen aanpassen voor je geselecteerd blok, klik op het tandwiel icoontje rechtsboven en kies het tabblad Blok. Hiermee krijg je ook steeds specifieke instellingen voor je geselecteerde blok.

Gutenberg blokinstellingen

Pagina/Bericht instellingen

Onder hetzelfde tandwielicoon zitten ook de Pagina- of Berichtinstellingen. Hiermee pas je de zichtbaarheid van je pagina aan, de planning, maar ook je URL, je uitgelichte afbeelding, reacties en kun je alle revisies nagaan.

Dit herken je wellicht ook vanuit de gewone WordPress blogposts!

Wordpress pagina-of berichtinstellingen

Opties of Geavanceerde instellingen

Bij de Opties (of ook geavanceerde instellingen) vind je een aantal aanpassingen terug voor de weergave van de interface, de editor en van de mogelijke plugins die je hebt geïnstalleerd.

Je kunt er ook met 1 klik alle content gaan kopiëren (om bv. een nieuwe pagina op te starten) of ook enkele voorkeuren instellen voor de verdere weergave van je editor en je blokken. Kijk het zeker eens na voor een vlottere werking!

Opties of geavanceerde instellingen

Gutenberg blokken toevoegen en bewerken

Blokken invoegen

Door bovenaan op het + icoontje te klikken krijg je een overzicht van alle Gutenberg blokken.

Gutenberg blokken toevoegen

Daarnaast zijn er nog 3 andere mogelijkheden om blokken toe te voegen:

  • In je content op de + knop klikken voor een verkorte weergave van de meest recente blokken
  • Door een slash (/) te typen en een kernwoord in te geven (zoals bij Notion)
  • Door een bestaand blok (bv. een paragraaf) om te vormen tot een ander blok (bv. Heading)
Gutenberg blok omvormen tot een ander blok

Rechts in de sidebar vind je de Blokinstellingen (onder het tandwielicoon). Deze instellingen zijn voor elke blok anders en passen zich aan naargelang de geselecteerde blok.

Een afbeelding invoegen

Met de + knop zoek je naar Afbeelding en kiest een foto uit je mediabibliotheek. Optioneel kun je ook een nieuwe foto uploaden.

Om je afbeelding uit te lijnen over de gehele content, kies je Wijde breedte. Kies je voor Volledige breedte, dan gaat je afbeelding van de linkerkant tot de rechterkant van je browser venster.

Let op: de werking van uitlijning is thema-afhankelijk! Met Kadence werkt dit prima, maar dit werkt niet met alle thema’s.

Een afbeelding uitlijnen

Tekst over een afbeelding plaatsen

Wil je graag tekst over je afbeelding? Klik dan op de A in de blokgereedschappen. Daarna kun je allerlei blokken toevoegen bovenop je afbeelding: titels, paragrafen, maar ook knoppen, lijstjes, citaten,…

Tekst over een afbeelding plaatsen

Geavanceerde lay-outs maken met Gutenberg

Kolommen toevoegen

Voeg een nieuw blok in en kies Kolommen. Kies de indeling.

Gutenberg kolommen

In beide kolommen kun je nu allerlei Gutenberg blokken toevoegen. Een klassieker is een foto met ernaast een titel en een een stukje tekst.

Uitlijnen van je content

Om de tekst verticaal uit te lijnen selecteer je de Kolommen blok (doe dit eventueel via de lijstweergave als je er niet aan uit raakt) en kies bij uitlijning Naar het midden uitlijnen.

Kolommen in het midden uitlijnen

Herbruikbare blokken

Een herbruikbare blok is een combinatie van verschillende blokken die je kan opslaan in je bibliotheek en op verschillende pagina’s van je website gaan hergebruiken. Telkens je een wijziging maakt aan de herbruikbare blok, wordt die wijziging ook doorgevoerd op alle andere instanties van deze herbruikbare blokken.

Het leent zich dus zeer goed voor call-to-actions, e-maillijst optins, sociale media knoppen of andere content dat over je gehele website consistent moet blijven.

Selecteer je gekozen blok en klik op Opties. Klik daarna op Aan herbruikbare blokken toevoegen.

Aan herbruikbare blokken toevoegen

Een herbruikbare blok invoegen kan via de + knop / tabblad Herbruikbaar. Hier krijg je ook meteen een preview te zien van je blok.

Een herbruikbaar blok invoegen

Mooiere lay-outs maken met Kadence Blocks

Kadence Blocks is een gratis plugin waarmee je meer geavanceerde en aantrekkelijkere lay-outs kan maken. Het evenaart (bijna) de pagebuilder ervaring zoals met Elementor, Divi, Beaver Builder,…

De blokken hebben een pak meer instellingen, waardoor ze een pak flexibeler zijn!

Kadence design library

Met de activatie van de Kadence Blocks plugin zie je een nieuwe knop verschijnen in de bewerkbalk: Design Library. Via deze knop heb je toegang tot de gratis Starter Packs, Sections en Wireframes.

Kadence design library

Sections

Wanneer je de Design Library opent, heb je meteen toegang tot allerlei vooringestelde secties (Sections).

Deze zijn perfect te gebruiken voor je website: je klikt op je gewenste sectie en deze sectie wordt onmiddellijk ingevoegd op je pagina.

Sommige secties hebben een rode PRO badge, deze kun je enkel invoegen wanneer je een Kadence Blocks PRO licentie hebt OF een Kadence Essential Bundle licentie.

Kadence design library - sections

Starter Packs

De starter packs zijn complete websites, waar je je eigen website op kan baseren.
Handig wanneer je snel wil opstarten!

Er zijn heel wat stijlen en er worden maandelijks enkele starter packs toegevoegd.

Klik op je gewenste website lay-out voor een preview van de pagina’s inbegrepen in de starter pack. Ook hier heb je voor sommige templates een PRO licentie nodig.

Kadence design library - starter packs

Wireframes

Nog een snelle manier om je website op te bouwen is om gebruik te maken van de wireframes. Deze wireframes zijn vooringestelde secties die de kleuren van je thema overnemen wanneer je ze invoegt.

Ze zijn enkel te gebruiken met een Kadence Blocks PRO licentie OF wanneer je je inschrijft op de nieuwsbrief van Kadence.

Kadence design library - wireframes

Kadence Cloud

Als laatste heb je de Kadence Cloud, waar op dit moment niet zo veel te beleven valt. Er wordt gevraagd naar een URL en sleutel…

Op dezelfde manier als de Sections in de Design Library, bied ik Kadence templates aan. Deze kun je vinden op mijn WordPress template shop Sunday June.

Wanneer je deze templates aankoopt, krijg je de gehele website, maar ook ALLE secties die ik daarvoor gebouwd heb. Wanneer ik updates maak aan deze secties, worden deze elke maand gesynchroniseerd met alle mensen die een sleutel hebben voor deze Cloud.

Je hebt dus ongelimiteerd toegang tot ALLE updates van deze secties en templates.

Kadence design library - kadence cloud

Kadence Blocks

Wanneer je een nieuwe blok invoegt, zie je meteen bovenaan de nieuwe Kadence blokken. Je kunt ze makkelijk herkennen aan de blauwe icoontjes.

Kadence blocks

De meest gebruike blokken voor mij zijn Row Layout, Advanced Heading, Advanced Button en Advanced Gallery.

Met Advanced Heading kun je bv. ook een paragraaf maken waarmee je een pak uitgebreidere opties hebt.

Je hebt ook een basis formulier en een basis countdown timer, perfect voor de lancering van je cursus of digitale product!

Wil je meer functionaliteit voor je formulier (een automatisch antwoord naar je bezoeker, ingave in database,…) of voor je countdown timer (elke bezoeker zijn eigen unieke countdown) ga dan voor de PRO versie van de Kadence Blocks.

De Table of Contents blok gebruik ik ook op mijn blog, kijk daarvoor hier rechts in de sidebar (op desktop). Deze is geoptimaliseerd voor SEO, dus een aanrader om te gebruiken!

De toekomst van WordPress en Gutenberg

Ik ben zelf een Elementor-fan, maar mijn liefde voor WordPress Gutenberg groeit alleen maar ❤️

Met Kadence thema en Kadence Blocks (gratis) heb je het grootste deel van alle functionaliteit van bv. een Elementor, Divi, Blocksy, Beaver Builder,…

Het nadeel van deze page builder plugins is dat ze een extra laag creëren bovenop je WordPress omgeving. Je website wordt daarmee groter en zwaarder. Dit resulteert onvermijdelijk in langere laadtijden en dat is nu net wat Google niet graag ziet.

Terwijl je met Kadence gewoon lekker comfortabel in de WordPress omgeving blijft én de impact op laadtijden drastisch lager ligt dan bij andere page builders.

WordPress zelf ziet ook de populariteit van deze page builders en biedt intussen al een (ongetwijfeld erg basic) antwoord hierop. Ik zie dit in de toekomst alleen maar uitbreiden, zodat WordPress eindelijk écht een volwaardige, visuele paginabouwer wordt!

Links:

Deze vind je misschien ook interessant