WordPress Woordenboek

WordPress Gutenberg Editor

WordPress Gutenberg Editor

Johannes Gutenberg

Met de introductie van de Gutenberg editor nemen de makers van WordPress afscheid van de Classic Editor TinyMCE en betreden ze de wereld van Page Builders. Pagina’s en berichten worden opgebouwd uit blokken. Ieder blok is een stukje content welke in de editor te plaatsen zijn. De blokken kunnen onafhankelijk van elkaar bewerkt en geplaatst worden.

De Gutenberg -blokken zorgen ervoor dat u als gebruiker sneller, zonder enige kennis van HTML of CSS pagina’s kunt opmaken.

Met de benaming van deze editor wijkt WordPress een beetje af van haar traditie om belangrijke updates te vernoemen naar een Jazz Muzikant (of band). Gutenberg was een Duits drukker en geldt als de uitvinder van de boekdrukkunst in Europa.

De gekozen benaming door de makers van WordPress is ook wel een beetje grappig gekozen. Met de WordPress Gutenberg editor wordt er een blokken-content-editor geïntroduceerd.

Johannes Gutenberg introduceerde het gebruik van losse letters voor het boekdrukken. Vergelijkbaar met de Classic Editor, niet waar…. De blokdruk, waarbij een hele bladzijde uit één blok werd vervaardigd, bestond al langer en is niet door Gutenberg uitgevonden.

Content Blokken

De Gutenberg editor werkt dus met blokken, in tegenstelling tot de Classic Editor waar er één groot tekstveld is om de content in op te maken. Voor ieder type content (tekst, afbeelding, video,etc.) is er een blok beschikbaar welke op de pagina te plaatsen is. De diverse blokken zijn onderverdeeld in categorieën.

WordPress Gutenberg Blokken

Gutenberg Blokken

Een gekozen blok wordt op de pagina geplaatst en kunnen eenvoudig gesorteerd en opgemaakt worden. De opmaak van een blok kan opgeslagen worden en herbruikt worden. Daarmee is het mogelijk om bijvoorbeeld een standaard opmaak te creëren voor een afbeelding-blok en deze dan te gebruiken voor andere afbeeldingen zonder dat de opmaak weer gedaan behoeft te worden. Herbruikbare blokken kunnen dus veel tijd besparen.

Bij het werken met Gutenberg moet u in rijen denken. Een pagina is dan van boven naar beneden opgebouwd uit rijen. Zo’n rij kan dan verschillende kolommen hebben, waar dan een content-blok in geplaatst wordt.

WordPress Gutenberg Kolommen

Rij & Kolommen

Eenmaal een pagina ingedeeld is het ook mogelijk om de gemaakte layout als template op te slaan. Die template kan dan weer herbruikt worden voor overige pagina’s waarna alleen de blokken nog gevuld dienen te worden.

Gutenberg Editor

Bij het aanmaken van een nieuwe pagina, ziet de Gutenberg editor er als volgt uit:

WordPress Gutenberg editor overzicht

De Gutenberg editor

1 – De Titel

Hier dient de pagina-titel opgegeven te worden en net als bij het onderwerp “Classic Editor“, willen we hier ook het belang van de SEO-regels benadrukken.

De permalink wordt automatisch aangemaakt en bevat de titel. De permalink is niet direct zichtbaar, maar door het blok onder de titel aan te klikken en dan weer terug in de titel te klikken wordt de permalink zichtbaar en is deze eventueel aan te passen door op de knop Bewerk te klikken:

WordPress Gutenberg editor permalink aanpassen

Permalink bewerken

2 – Content

Hier begint het toevoegen van de daadwerkelijk content van de pagina. Klikken we in de regel “Schrijf je verhaal”, wordt de tekst-bewerker actief en kunnen we de eerste alinea aan de pagina toevoegen en bewerken:

WordPress Gutenberg paragraaf bewerken

Paragraaf editor

Hier hebben we bij:

(a) – van links naar rechts

  • Een blok toevoegen;
  • Ongedaan maken;
  • Opnieuw (wanneer het Ongedaan maken weer hersteld moet worden);
  • Informatie als het aantal woorden, etc. wat aan de pagina is toegevoegd;
  • De mogelijkheid om het bloktype te wijzigen;
  • Tekst uitlijn opties;
  • Vet, Cursief, Link toevoegen en doorhalen;
  • Blok opties (deze worden later tijdens dit onderwerp besproken).

 

(b) – de mogelijkheid om een blok toe te voegen.

(c) – Een afbeelding, koptekst of kolommen aan het blok toe te voegen.

(d) – instellingen voor het lettertype als grootte voor het hele blok, de eerste letter groot en kleurinstellingen voor de tekst en voor de achtergrond van het blok.

De optie “Geavanceerd” komt bij ieder type blok terug en is bedoeld om extra styling toe te voegen via CSS. De verschillende type blokken komen hierna aan bod.

3 – Publiceren

Eenmaal een blok toegevoegd zullen hier de opties geactiveerd worden om de pagina als concept op te slaan (“Bewaar concept”), een Voorbeeld te bekijken en de pagina te publiceren (Publiceer…).

Is de pagina gepubliceerd kan deze aan een menu toegevoegd worden.

Via het radartje worden de document/blok -instellingen verborgen en zichtbaar gemaakt en als laatste hebben we hier “Meer” (de drie puntjes onder elkaar). Deze bespreken we later tijdens dit onderwerp.

4 – Status & Zichtbaarheid

Door op Openbaar te klikken kunnen we de pagina op de website :

  • voor iedereen zichtbaar laten zijn (Openbaar);
  • de pagina “Privé” maken, zodat alleen beheerders en editors (onder gebruikers is de benaming “Redacteur”) de pagina kunnen zien;
  • en “Bescherm met een wachtwoord”, zodat alleen bezoekers die het wachtwoord weten de pagina kunnen bekijken.

Via Onmiddellijk kunnen we een datum en tijd kiezen wanneer de pagina gepubliceerd dient te worden.

5 – Overige instellingen

Uitgelichte afbeelding

Hier kan een uitgelichte afbeelding toegevoegd worden aan de pagina. Deze wordt door de meeste thema’s niet benut bij een pagina maar zou voor SEO-doelstellingen ingezet kunnen worden. Lees hier alles over de: Uitgelichte afbeelding.

Discussie

Door een vinkje te zetten bij “Sta reacties toe” wordt het voor bezoekers mogelijk een een reactie achter te laten bij de pagina. Lees hier alles over: Reacties.

Pagina-attributen

Indien het thema meerdere templates ondersteund, als bijvoorbeeld een pagina met Sidebars, een volledige breedte (full width) pagina, etc.; dan is hier de mogelijkheid om een pagina-template te kiezen.

Via “Hoofdpagina” is het mogelijk om de pagina als sub-pagina aan een andere pagina toe te wijzen. Hiermee is niet automatisch de link naar die pagina gemaakt, maar zal alleen in de permalink-structuur de hoofdpagina opgenomen worden. De permalink ziet er dan zo uit:

https://www.uw-website.nl/hoofdpagina/subpagina/

Door bij “Volgorde” een nummer op te geven kunnen de pagina’s op nummer gesorteerd worden in het pagina-overzichtsscherm.

Gutenberg & Blokken

Er zijn standaard veel blokken beschikbaar in de Gutenberg editor. De meeste blokken spreken voor zich en hier zullen we dan ook de meeste belangrijke behandelen.

We hebben hierna de toolbar welke standaard bij Gutenberg bovenin het scherm getoond wordt uitgeschakeld zodat de toolbar bij het geselecteerde blok getoond wordt. Die optie bevindt zich bij “Meer” instellingen:

Gutenberg Uniforme Toolbar

Uniforme toolbar uitschakelen

Blokken toevoegen

Een blok toevoegen kan op diverse manieren:

Gutenberg blok toevoegen

Blok toevoegen

  • door met de muis-cursor over een bestaand blok heen te gaan verschijnt er een plus-teken boven het blok en door daarop te klikken verschijnt er een paragraaf-blok voor het gekozen blok. Het blok-type is dan te wijzigen door op het plus-teken te klikken, welke links van het blok verschijnt als u met de muis-cursor over het lege paragraaf-blok gaat. Deze methode wordt gebruikt om aan een bestaande pagina een extra rij ergens tussen te voegen;
  • via het plus-teken links boven in het scherm heeft u de keuze uit alle beschikbare blokken en wordt het gekozen blok onderaan de pagina toegevoegd.

Blok Instellingen & Meer Opties

Ieder toegevoegd blok heeft zijn eigen instellingen welke verschijnen door het blok te selecteren. De blok-specifieke instellingen verschijnen dan rechts in het scherm en kunnen dan naar wens aangepast worden.

Meer opties

Ieder blok een aantal standaard opties, welke via de knop “Meer opties” te benaderen zijn:

Gutenberg blok meer opties

Meer opties

Via de keuze “Bewerk als HTML” wordt de kale-tekst-editor actief en kunnen de html-codes van het blok aangepast worden. Hiervoor is wel kennis van de programmeertaal HTML nodig.

Heeft u veel instellingen gedaan aan een bepaald blok en wilt u hetzelfde blok ook op andere pagina’s of berichten gebruiken, kunt u hier het blok toevoegen aan “herbruikbare blokken”.

De overige opties spreken voor zich.

Herbruikbare blokken

Hiervoor zagen we al dat we bij “Meer opties” een blok kunnen toevoegen aan “Herbruikbare blokken”. Kiezen we voor die optie, moeten we een naam opgeven voor het blok en zal die toegevoegd worden.

Om dat blok dan weer te kunnen gebruiken klikken we links bovenin op het plus-teken en kiezen voor de categorie “Herbruikbaar”:

Gutenberg herbruikbare blokken

Herbruikbaar blok kiezen

Door met de muis-cursor dan over een herbruikbaar-blok te gaan zal er een voorbeeld gegeven worden van hoe dan blok er uit ziet. Door dan op het blok te klikken zal het onderaan de pagina ingevoegd worden.

Via de optie Beheer alle herbruikbare blokken is er de mogelijkheid om blokken te exporteren (downloaden naar uw pc) en deze dan te importeren op een andere website met een Gutenberg editor.

Herbruikbaar blok aanpassen

Om de instellingen van een herbruikbaar blok aan te passen kiest u het blok door het aan te klikken en dan voor Bewerk te kiezen:

Herbruikbaar blok aanpassen

Herbruikbaar blok aanpassen

Alle aanpassingen die u dan verricht aan dat blok zullen na opslaan op de gehele website voor dat blok doorgevoerd worden.

Meest gebruikte blokken

Tekst

Zoals we hiervoor al zagen wordt het Tekst-blok automatisch aan de editor toegevoegd, zodat u direct kunt beginnen met het schrijven van de eerste alinea. Zodra u een “Enter” geeft zal de editor een nieuw Tekst-blok toevoegen. Iedere alinea is dus een apart Tekst-blok. De mogelijkheden van dit blok hadden we hiervoor al besproken.

Kop

Via het kop-blok is een subtitel toe te voegen. Kopteksten zijn onderverdeeld van H1 t/m H6 (H = Header). Van H1 groot tot H6, klein. Het gebruik van kopteksten in content is aan te raden ter introductie van het onderwerp wat volgt. Dat maakt het leesbaar voor zowel de bezoeker als voor zoekmachines.

Beschikt het thema over instellingen voor de kopteksten zullen ze bij wijziging, consequent over heel de website aangepast worden.

Rechts in het scherm bij de blok-instellingen kunnen we de verschillende niveaus kiezen en de uitlijning bepalen:

Kop-blok instellingen

Kop-blok instellingen

Citaat

Het citaat-blok kent verder geen instellingen en de opmaak wordt bepaald door het thema. Hoe het citaat er dus daadwerkelijk uit zal zien is alleen te bekijken via de optie Voorbeeld, rechts bovenin het scherm.

Een citaat bestaat doorgaans uit twee regels. De eerste het citaat zelf met daaronder de oorsprong (bijv. de schrijver):

Citaat-blok

Citaat-blok

Tabellen

Het tabel-blok in de categorie “Opmaak”. Na het kiezen van dit blok dient er het aantal te gebruiken kolommen en rijen opgegeven te worden:

Tabel kolommen en rijen kiezen

Tabel invoegen

Heeft u die ingesteld klik dan op Maak en de tabel wordt ingevoegd:

Gutenberg tabel

Tabel cellen

Via de toolbar is het mogelijk om rijen en/of kolommen toe te voegen en/of te verwijderen. De enige instelling die het tabel-blok heeft is het vastzetten van de breedte van de cellen.

Verdere opmaak-mogelijkheden kent dit blok niet. Om de opmaak aan te passen moet u kennis hebben van CSS.

Afbeelding

Een toevoegen kan eenvoudig door een afbeelding in het vlak te slepen, een Upload te doen of via de Mediabibliotheek te selecteren:

Gutenberg Afbeelding-blok

Afbeelding toevoegen

Hebben we een afbeelding gekozen dan verschijnen de instellingen specifiek voor het afbeeldings-blok:

Gutenberg Afbeelding instellingen

Afbeelding Instellingen

Links boven het blok hebben we de mogelijkheid om de afbeelding links uit te lijnen, te centreren of rechts uit te lijnen. Via het potloodje kunnen we basis-bewerkingen doen (zie hiervoor het onderwerp: Media bewerken).

Via de blauwe bolletjes rechts en onder de afbeelding is het mogelijk om de afbeelding proportioneel te verkleinen en weer te vergroten tot maximaal het originele formaat. Onder de afbeelding is een verklarende tekst (onderschrift) op te nemen.

Rechts in de editor hebben we de overige instellingen als Alt tekst, grootte en de mogelijkheid om een link aan de afbeelding toe te voegen. Het toevoegen van een Alt-tekst is altijd aan te raden, daar dit bevorderlijk is voor de SEO.

Galerij

Via dit blok kunnen meerdere afbeelding ingevoegd worden. Het toevoegen van de afbeeldingen werkt hetzelfde als een enkele afbeelding, met als onderscheid dat er hier meerdere geselecteerd kunnen worden. Hebben we bijvoorbeeld 4 afbeeldingen toegevoegd zullen ze als enkele rij verdeeld over meerdere kolommen getoond worden:

Gutenberg Gallerij-blok

Gallerij-blok

Via de Gallerij-instellingen is het dan mogelijk om het aantal kolommen in te stellen en is er de mogelijkheid om de afbeeldingen te laten bijsnijden zodat de afbeeldingen in dezelfde rij gelijke afmetingen krijgen.

Insluitingen

Via de categorie “Insluitingen” is het mogelijk om bijvoorbeeld een YouTube -video op te nemen in de pagina:

Gutenberg Insluitingen

YouTube Video invoegen

De YouTube-url dient dan in het blok gekopieerd te worden. Het blok kent verder ook geen instellingen.

Widgets

Het is tevens mogelijk om Widgets in de content van de pagina op te nemen:

Gutenberg widgets opnemen in pagina

Widgets

Hiermee wordt het eenvoudige gemaakt om een bijvoorbeeld een lijst van recente berichten op te nemen in de pagina.

Vragen & Info

Heeft u vragen naar aanleiding van deze uitleg, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Ondersteuning staat bij ons op nummer 1, wij zijn u graag van dienst !

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

 

Bijbehorende onderwerpen