Wat is Gutenberg en hoe gebruik je het?

In december 2018 lanceerde WordPress de Gutenberg blockeditor, die sindsdien de standaard contentbuilder van WordPress is geworden. Wat houdt deze Gutenberg-editor precies in? Simpel gezegd, het is de nieuwe standaard editor waarin WordPress-gebruikers hun content aanmaken. Voorheen gebruikte WordPress nog standaard de 'klassieke editor' of de 'WYSIWYG-editor', maar sinds WordPress 5.0 is Gutenberg die nieuwe standaard met een vernieuwend blokgebaseerd systeem. In dit systeem is elk stuk content, of het nu een paragraaf, een foto of een knop is, een afzonderlijk blok. Dit maakt het customisen van content stukken makkelijker.

Direct naar de uitleg? Klik dan hier.

De voor- en nadelen van Gutenberg

Voordelen van Gutenberg:

1. Geen codeer ervaring nodig: De block-based aanpak maakt het gemakkelijk om elementen toe te voegen, welke in de oude editor extra plugins of codeerkennis vereisten.
2. Responsive design: Veel van de blokken in Gutenberg zijn van nature responsief, wat helpt bij het maken van mobielvriendelijke designs, zeker voor gebruikers met weinig designervaring.
3. Integratie met plugins: Veel populaire WordPress-plugins hebben eigen blokken gemaakt voor Gutenberg. Dit betekent dat de shortcodes, zoals je die misschien kent voor het invoegen van een contactformulier, vervangen kunnen worden door standaard blokken. Je sleept gewoon het juiste blok naar je pagina en je bent klaar.
4. Nieuwe blokken van externe developers: Een groot voordeel van de blokbenadering is dat externe ontwikkelaars hun eigen unieke blokken creëren. Met deze additionele plugins is het mogelijk om complexere paginalay-outs te maken, zoals FAQ-secties, carrousels en om kant-en-klare designs in te laden.
5. Modern Interface: De interface is rustig en modern en geheel aan te passen aan de wensen van de gebruiker. In deze paragraaf lees je meer over het instellen van de interface naar jouw wensen.

Nadelen van Gutenberg:

1. Leercurve: Voor bestaande WordPress-gebruikers kan de overgang naar een blokgebaseerde editor aanvankelijk verwarrend zijn.
2. Arbeidsintensieve tekstbewerking: Het toevoegen en aanpassen van blokken kan voor sommige gebruikers/copywriters omslachtiger zijn dan de directe tekstbewerking van de klassieke editor, omdat elke paragraaf automatisch een eigen tekstblok wordt.
3. Compatibiliteitsproblemen: Sommige oudere thema's en plugins zijn mogelijk niet volledig compatibel met Gutenberg, wat kan leiden tot conflicten of problemen op de website.
4. Prestatieproblemen: Op sommige websites kan Gutenberg de site trager maken, vooral als er veel blokken op een pagina worden gebruikt.

Uitleg Gutenberg

Wil jij aan de slag in Gutenberg, bijvoorbeeld om jouw blogs een mooi design te geven of om landingspagina's conversiegerichter te maken? Onderstaande uitleg biedt jou de informatie die je nodig hebt.

2. Kolommen maken:

Voeg een kolomblok toe om content naast elkaar te plaatsen. Je kunt het aantal kolommen kiezen en hun breedte aanpassen voor een responsief ontwerp.

Om onderstaand voorbeeld te maken, kozen we 66/33 en gaven we de kolommen een achtergrondkleur.

3. Tekst centreren

Binnen tekstblokken én kolommen kun je de uitlijning kiezen (links, centrum, rechts) met behulp van de uitlijningsiconen in de werkbalk van het blok. Zo kun je zelfs kolommen boven, midden en onder uitlijnen, zoals we bij punt 1 hebben gedaan in deze blog.

4. Media & Tekst Blok

Hiermee kun je een afbeelding of video naast tekst plaatsen, ideaal voor visuele content met beschrijvingen

5. Buttons

Er is een specifiek button-blok in Gutenberg. Eenmaal toegevoegd, kun je de tekst, link en stijl van de knop aanpassen. Je kunt ook de achtergrondkleur en tekstkleur wijzigen.

Tip! Voeg in lange pagina's en blogs een anchorlink toe. Dit stelt bezoekers in staat om door te klikken naar een specifiek gedeelte van een pagina. Lees hier hoe je dat doet:

1. Ga naar het gedeelte van je blogbericht waarnaar je wilt linken. Dit kan een subkop, een afbeelding, een paragraaf, etc. zijn.
2. Voeg een HTML-anker toe:
   • Selecteer het blok waarnaar je wilt linken.
   • Ga in de rechter zijbalk naar het gedeelte 'Geavanceerd'.
   • Hier zie je een veld genaamd 'HTML Anker'. Vul een unieke ID in voor dit gedeelte, bijvoorbeeld 'sectie1'.
3. Maak de link:
   • Ga naar het gedeelte in je bericht waar je de link wilt plaatsen die naar het anker scrollt (bijv. een stuk tekst of button).
   • Selecteer de tekst die je wilt gebruiken als link en klik op het link-icoon in de werkbalk.
   • In het veld voor de URL, typ je # gevolgd door de unieke ID die je eerder hebt gemaakt (bijvoorbeeld #sectie1).
   • Druk op Enter of het 'toevoegen' icoon.
4. Nadat je het bericht hebt gepubliceerd of bijgewerkt, test je de link op de om te zorgen dat deze correct naar het gedeelte scrolt.

En dat is het! Nu heb je een functionerende ankerlink binnen je blogpost dankzij de Gutenberg-editor.

6. Tabellen maken

Hiermee kun je tabellen toevoegen en rijen of kolommen naar wens instellen. Ideaal voor gestructureerde data. Dit is één van de dingen die voorheen in de Klassieke-editor html-kennis vroegen, maar wat nu eenvoudig voor iedereen toe te passen is.

Kolom 1	Kolom 2
5	8
8	9
13	17

7. Afbeeldingen en Galerij

Voeg afzonderlijke afbeeldingen of een galerij met meerdere afbeeldingen toe. Je kunt de volgorde, uitlijning en grootte van afbeeldingen aanpassen.

8. Herbruikbare blokken maken

Een herbruikbaar blok in Gutenberg stelt je in staat om een bepaald blok op te slaan en het later opnieuw te gebruiken in andere berichten of pagina's. Zo maak je een herbruikbaar blok:

1. Selecteer het blok dat je herbruikbaar wilt maken.
2. Klik op de drie verticale puntjes in de blok-werkbalk en kies "Toevoegen aan herbruikbare blokken".
3. Benoem het blok voor toekomstig gebruik. Zorg dat de naam duidelijk is, zodat je hem later goed kan terugvinden.
4. Bij het toevoegen van een nieuw blok, zoek en selecteer je herbruikbaar blok uit de lijst.

Het is belangrijk te weten dat als je een herbruikbaar blok wijzigt, de wijzigingen worden doorgevoerd op alle plaatsen waar je dat blok hebt gebruikt (tenzij je het blok 'losmaakt' van het herbruikbare formaat).

9. Pas de interface aan, aan jouw wensen

Vind je het vervelend dat de opmaaktool boven het geselecteerde blok "drijft"? De blockeditor geeft je de mogelijkheid om deze bovenin vast te zetten.

De blockeditor heeft standaard veel blokken beschikbaar, maar vaak gebruik je ze niet allemaal. Om je scherm overzichtelijker te maken, heeft de editor een functie om onnodige blokken te verbergen. Deze vind je in de rechter-zijbalk onder de 3 puntjes > Voorkeuren > Blokken. Hiermee kun je ongebruikte blocks eenvoudig verbergen of deactiveren.

10. Voeg snel blocks toe met de / (voorwaartse slash)

In plaats van steeds de block inserter te openen, kun je met de voorwaartse slash "/" direct blocks invoegen als je hun naam kent. Na het drukken op “Enter” voor een nieuw paragraafblok, typ je simpelweg de / gevolgd door de naam van het blok. Terwijl je typt, verschijnt er een lijst van overeenkomende blocks. Navigeer met de pijltjestoetsen naar het juiste blok en bevestig met “Enter”. Dit maakt dat je nog sneller kan werken in Gutenberg.

Videouitleg Gutenberg

Toch opzoek naar meer informatie, uitleg of een visuele weergave? Bekijk dan onderstaande video:

Samenvatting Gutenberg

Wanneer je deze elementen en vaardigheden onder de knie te hebt, ben je goed voorbereid om gevarieerde en aantrekkelijke content te creëren met de Gutenberg-editor in WordPress.
Toch op zoek naar een webdesigner om jouw pagina's naar het volgende level te tillen? Team Web Wings helpt je graag.
Neem vrijblijvend contact met ons op!