Gutenberg handleiding – Zó werkt de nieuwe WordPress editor!

Gutenberg handleiding - nieuwe WordPress editor

Gutenberg is de naam van de (nieuwe) WordPress editor. Belangrijk om weten is dat deze werkt met “blokjes”: elk element dat je toevoeg is een blokje. Standaard bestaan er een aantal verschillende soorten blokjes (titel, paragraaf, afbeelding, kolommen, video,…). Deze kunnen nog uitgebreid worden via plugins of ingebouwde blokjes in thema’s.

Ik schreef eerder al over de nieuwigheden in WordPress 5.0. In dit artikel ga ik dieper in op Gutenberg, de nieuwe WordPress editor.

Overzicht van de Gutenberg editor

Gutenberg, de nieuwe WordPress editor ziet er iets anders uit dan de vorige editor. In onderstaande screenshot zie je de verschillende onderdelen. Onder de screenshot staat telkens een korte uitleg.

Gutenberg WordPress editor - de verschillende onderdelen

1. De titel

Geef hier de titel in van je pagina of bericht.

2. De inhoud

Onder de titel kan je de inhoud invoeren.

Je kan gewoon tekst invoeren, maar je kan ook blokjes toevoegen.

3. Voorbeeld / publiceren

  • De knop “Voorbeeld”: bekijk een voorbeeld van je pagina of bericht.
  • De knop “Publiceer…” / “Bijwerken”: als je op deze knop klikt, sla je je pagina of blogartikel op en plaats je dit meteen online.
  • De knop “Instellingen” (icoontje met tandwieltje): toon / verberg de instellingen van het document en het geselecteerde blokje.
  • De knop “Toon meer gereedschap & opties” (icoontje met 3 puntjes): hier vind je bijkomende instellingen terug.

4. Document-instellingen / Blok-instellingen

Het gedeelte met de instellingen bevat standaard 2 tabbladen:

  • Document-instellingen: alle instellingen betreffende een pagina of blogbericht.
  • Blok-instellingen: instellingen van het geselecteerde blokje.

Hieronder vind je een selectie van de meest-voorkomende document-instellingen:

STATUS EN ZICHTBAARHEID

  • Zichtbaarheid: “Openbaar” (standaard), “Privé” (alleen zichtbaar voor administrators en editors) of  “Beschermd met wachtwoord” (je kan een pagina / bericht beveiligen met een zelfgekozen wachtwoord)
  • Publiceren: “Onmiddellijk” of selecteer een datum wanneer de pagina gepubliceerd moet worden.
  • Wachtend op review: de pagina is in afwachting van beoordeling door een andere beheerder en niet zichtbaar op de website.

PERMALINK (enkel zichtbaar als er reeds inhoud werd ingevoerd)

  • URL: hier kan je de URL van de pagina / het bericht aanpassen. Standaard wordt de naam van de pagina of het bericht genomen. Het is aangeraden om dit te verkorten tot enkele kernwoorden. Spaties vul je op met een liggend streepje (“-“, gebruik hiervoor géén underscore: “_”!).

CATEGORIEËN (enkel boor berichten)

Selecteer de categorie waartoe het bericht hoort (je kan er ook meerdere selecteren, de eerste die je selecteert is dan de “hoofdcategorie”). Je kan een nieuwe categorie aanmaken door op de link “Nieuwe categorie toevoegen” te klikken of via “Berichten” > “Categorieën” in het linker menu.

TAGS (enkel voor berichten)

Je kan een nieuwe tag toevoegen via het tekstvak. Voor meerdere tags plaats je een komma (“,”) na iedere tag.

Je kan ook een nieuwe tag invoegen via “Berichten” > “Tags” in het linker menu.

UITGELICHTE AFBEELDING

Belangrijk, de locatie waar de uitgelichte afbeelding getoond zal worden is afhankelijk van het thema dat actief is. Veelgebruikte plaatsen zijn:

  • In de hoofding (header) van een pagina (voor zowel pagina’s als boogberichten)
  • In het blogoverzicht (voor boogberichten / artikels)

SAMENVATTING (enkel voor berichten)

Hier kan je een samenvatting ingeven van je bericht. Dit is optioneel, deze samenvatting wordt enkel weergegeven in RSS-readers en in het blog-overzicht (enkel van sommige thema’s, maar in de praktijk wordt het momenteel niet vaak gebruikt).

DISCUSSIE

  • Sta reacties toe: dit is vooral interessant bij blogberichten, waar je bezoekers de mogelijkheid wil geven om een reactie te geven op de pagina of het blogartikel.

PAGINA-ATTRIBUTEN (enkel voor pagina’s)

  • Hoofdpagina: selecteer de bovenliggende pagina. Dit zal zichtbaar zijn in de url en zorgt voor een mooie wegsite-structuur, wat een voordeel is voor vindbaarheid via zoekmachines zoals Google.
    Voorbeeld: de pagina “Webdesign” zou een onderliggende pagina kunnen zijn van “Diensten”. In de url-structuur wordt dit dan:
    https://www.digitaalgroeien.be/diensten/webdesign
  • Volgorde: bepaal de volgorde van de pagina, dit is enkel interessant in specifieke situaties

5. Blok toevoegen / ongedaan maken

Gutenberug WordPress editor - ongedaan maken

  1. Klik op het icoontje met het plusje om een nieuw blokje toe te voegen. Het nieuw blokje wordt toegevoegd onder het actieve blokje.
  2. Klik op op de knoppen met de pijltjes om een bewerking ongedaan te maken of opnieuw uit te voeren.
  3. De knop met de inhoudstructuur geeft je informatie over je inhoud weer, bijvoorbeeld het aantal gebruikte woorden.
  4. De knop Bloknavigatie geeft je een overzicht van alle gebruikte blokjes weer. Klik op een blokje in deze lijst om het blokje te selecteren en te bewerken.

Blokken toevoegen

In de nieuwe Gutenberg, de nieuwe WordPress editor, zijn verschillende manieren om een blokje toe te voegen:

  • Nieuwe alinea: wanneer je een nieuwe alinea start (dus na een klik op de “Enter”-knop als je tekst aan het invoeren bent) wordt er automatisch een nieuw tekst-blokje toegevoegd. Iedere alinea verschijnt dus in een apart blokje!
  • Klik op het knopje met een plusje (dit knopje komt op verschillende plaatsen terug): klik op het plusje en selecteer het soort blokje dat je wil toevoegen.
  • Via de knop “Meer opties” (meest rechtse knopje, met 3 puntjes, net boven het geselecteerde blokje): klik op “Invoegen voor” (om een blokje voor het geselecteerde blokje toe te voegen) of op “Invoegen na” (om een blokje toe te voegen na het geselecteerde blokje). Hiermee voeg je standaard een tekstblokje in.

Een blokje bewerken – verwijderen

De blok-instellingen aanpassen

  • Selecteer een blokje door er op te klikken
  • Rechts in de zijbalk wordt het tabblad “Blok” actief, hier kan je de instellingen aanpassen
  • Afhankelijk van het soort blokje zijn ver verschillende instellingen

Soort blokje wijzigen

  • Selecteer een blokje door er op te klikken
  • Klik op de eerste knop “Verander bloktype” (1) in de werkbalk boven het geselecteerde blokje en wijzig dan het type blokje (2):

Gutenberg WordPress editor - blokje wijzigen

De volgorde van de blokjes wijzigen

  • Ga met de muiscursor op het blokje staan waarvan je de volgorde wil wijzigen
  • Bovenaan, links van het blokje, verschijnen nu 2 pijltjes, 1 naar boven en 1 naar beneden.
  • Klik op 1 van de pijltjes om de volgorde te wijzigen.

Een blokje verwijderen

  • Selecteer een blokje door er op te klikken
  • Klik op de laatste knop “Meer opties” (1) in de werkbalk boven het geselecteerde blokje en klik op “Verwijder blok” in het menu dat verschijnt (2):

Gutenberug WordPress editor - blokje verwijderen

Gedeelde blokjes (shared blocks) – blokjes hergebruiken

Gutenberg, de nieuwe WordPress editor, laat toe om bepaalde blokjes te herbruiken. Herbruikbare blokjes kunnen bovendien opnieuw aangepast worden, zodat je ze slechts 1x moet wijzigen waardoor ze overal gewijzigd worden. Dit kan interessant zijn voor een stukje tekst die je op iedere pagina wil tonen.

Persoonlijk vind ik dit een zéér interessante feature en 1 van de beste verbeteringen (ookal is het geen opvallende). Het zorgt ervoor dat je op een eenvoudige manier content kan hergebruiken waar je maar wil, zonder dat je gebruik moet maken van plugins of widgets.

Een blokje herbruikbaar maken

  • Selecteer een blokje door er op te klikken
  • Klik op de laatste knop “Meer opties” (1) in de werkbalk boven het geselecteerde blokje en klik op “Voeg toe aan herbruikbare blokken (2):

Gutenberug WordPress editor - gedeeld blokje maken

  • Kies vervolgens een naam en klik op de knop “Opslaan”
  • Je vindt dit blokje nu terug onder het “Herbruikbaar” wanneer je een nieuw blokje toevoegt

Een herbruikbaar blokje wijzigen

Eén van de interessantste nieuwe features in Gutenberg is dat je blokjes opnieuw kan gebruiken

Uiteraard is het tof dat je zelf kan kiezen welk blokje je herbruikbaar wil maken. Maar de echte kracht van deze feature zit in het feit dat je een herbruikbaar blokje ook kan wijzigen. Zo hoef je een blokje maar 1x aan te passen en worden de wijzigingen overal doorgevoerd waar je dat herbruikbaar blokje hebt gebruikt.

  • Selecteer een blokje door er op te klikken
  • Klik op de knop “Bewerken” die verschenen is
  • Maak de gewenste wijzigingen
  • Klik nadien op de knop “Opslaan”
  • Je kan ook een variatie maken door de naam van het herbruikbaar blokje te wijzigen en pas dan op “Opslaan” te klikken

Veelgebruikte blokken in de Gutenberg WordPress editor

Paragraaf

Een paragraaf is een “gewoon” stukje tekst. Toch zijn er een aantal extra opties. Deze kan je terugvinden bij de blok-instellingen aan de rechter-zijde van je scherm:

  • Grootte lettertype: hier kan je de grootte van het lettertype kiezen voor deze paragraaf
  • Kleurinstellingen: hier kan je zowel een achtergrondkleur als een tekstkleur kiezen, dit is ideaal om een bepaalde paragraaf extra in de kijker te zetten!

Klik op Enter en je start een nieuw blokje van het type “Paragraaf”.

Afbeelding

Een afbeelding plaats je nu in een afzonderlijk blokje. Je hebt volgende mogelijkheden:

  • Uploaden: selecteer een afbeelding op je pc
  • Mediabibliotheek: selecteer een afbeelding uit je mediabibliotheek (= een afbeelding die je eerder reeds hebt opgeladen)
  • Invoegen via URL: je kan ook de  url van een afbeelding invoeren, deze keuze vermijd je beter

Nadien kan je de grootte van de afbeelding gemakkelijk aanpassen:

  • Klik op de afbeelding
  • Links en onderaan van de afbeelding verschijnt er een blauw bolletje, als je hierop klikt en sleept, kan je de afmetingen van de afbeelding wijzigen

Kolommen

Eindelijk kan je in de standaard WordPress editor Gutenberg ook kolommen maken. Dit was zowat het grootste gemis in de vorige WordPress editor en in mijn ogen de meest belangrijke (gevraagde) verbetering. Deze functionaliteit zorgt ervoor dat je voor het opmaken van een pagina of nieuwsbericht vanaf nu veel meer mogelijkheden hebt.

Het aantal kolommen kan je bepalen in de “Blok-instellingen”, in de rechter balk van je scherm.

In iedere kolom kan je via de “Plus”-icoontjes weer andere blokjes toevoegen.

Kop

Een blokje van het type “Kop” is ideaal om te gebruiken voor tussentitels.

Bedekking

Dit type blokje laat je toe een afbeelding te selecteren. Deze afbeelding wordt dan op de achtergrond geplaatst, achter een stukje tekst. Dit is ideaal om een bepaald stukje tekst extra te doen opvallen.

Media en tekst

Dit type blokje laat je toe om een afbeelding te selecteren. Deze afbeelding wordt dan links geplaatst. Rechts is er ruimte voor tekst.

Persoonlijk vind ik het werken met kolommen iets meer flexibiliteit geven. Zelf geef ik dus de voorkeur aan het blokje “Kolommen” en dan kan ik zelf kiezen welke andere blokjes ik waar in welke kolom plaats.

Een blokje uitlijnen

Sommige soorten blokjes bieden ook verschillende mogelijkheden naar lay-out toe. Een typisch voorbeeld is het blokje “Afbeelding”:

  • Klik op een blokje van het type afbeelding (of voeg een nieuw blokje van het type afbeelding in)
  • Bovenaan links van dit blokje verschijnen een aantal icoontjes:

Guttenberg WordPress editor - een afbeelding uitlijnen

  1. Als je op dit icoontje klikt, dan krijgt de afbeelding de volledige breedte binnen de grenzen van de content.
  2. Als je op dit icoontje klikt, krijgt de afbeelding de maximale breedte binnen het browservenster.

Merk wel op dat deze mogelijkheden ook afhankelijk zijn van het gebruikte thema.

Hoe kopieer je een tekst uit MS Word en plak je deze in een pagina of bericht?

Je kan nog steeds een tekst uit MS Word in een pagina of een bericht plakken. WordPress zal dan van elke alinea en elke titel een apart blokje maken.

Werk je toch liever verder met de klassieke WordPress editor?

Zie je de nieuwe WordPress editor Gutenberg nog niet zitten, dan kan je nog steeds de klassieke WordPress editor gebruiken. Deze is beschikbaar als plugin:

https://nl.wordpress.org/plugins/classic-editor/

Klik hier om hieronder een reactie achter te laten

Laat een reactie achter: