WhatsApp
Telefoon

Gutenberg: de diepte in

door | 31 augustus 2018 | Websites | 1 reactie

Met deze blog gaan we de diepte in. Ik loop alle opties langs die mogelijk zijn met de blokken van de nieuwe WordPress editor. En dat zijn er veel, dus ga er maar eens goed voor zitten. De blokken voor pagina’s en blogs vind je rechtsboven in onder het plusje. Je kunt op de links hieronder in de lijst klikken als je snel naar een onderdeel wil gaan.

Afb 1 De verschillende blokken

Meest gebruikte blokken

We beginnen met de blokken die je vindt bij Meest gebruikt. Hier zie je blokken die je vaak nodig hebt in je pagina’s of posts. Ieder blok dat je in de pagina of post stopt, heeft zijn eigen mogelijkheden.

Afb 2 Meest gebruikt

Paragraaf is het blok waar de tekst in komt te staan. Aan de zijkant krijg je dan een blok waar je de tekstinstellingen kunt aanpassen. In de vorige blogpost heb ik al laten zien dat je een initiaal kunt toepassen, maar ook dat je de grootte van je tekst kunt aanpassen. Let wel: als je de grootte aanpast, dan geldt dat voor het hele blok. Het is niet mogelijk om stukjes tekst in een alinea aan te passen. Je past gelijk de hele alinea aan. Nieuw is dat je een blok een achtergrondkleur kan meegeven door de kleurinstellingen aan te passen. Onder de kleurinstellingen kun je zowel de tekst als achtergrond aanpassen.

Afb 3 Kleurinstellingen

Het tweede meest gebruikte blok is de afbeelding en ook die komt met mooie mogelijkheden voor het vertonen van je afbeelding. Het begint ermee dat je kunt aangeven welke alternatieve tekst je kunt weergeven voor je afbeelding. Je kunt de grootte aanpassen en je kunt een link ingeven.

Afb 4 de zijbalk

Het afbeeldingsblok in de editor zelf, geeft je nog de mogelijkheid om de afbeelding te centreren, rechts of links uit te lijnen en om het blok te bewerken.

Afb 5 De mogelijkheden van het afbeeldingsblok

De tussenkop en de lijst

Deze blokken spreken voor zich, maar ik wil ze toch even benoemen. De tussenkop geeft je namelijk de mogelijkheid om heel makkelijk een niveau aan te geven. Niet alleen in de lopende tekst van de editor, maar ook aan de zijkant die dan nog de extra mogelijkheid geeft om je koptekst uit te lijnen. De geavanceerde opties geven je de mogelijkheid om een bookmark neer te zetten. Dat is als je bijvoorbeeld bij een artikel dat zo lang wordt als dit, een soort inhoudsopgave kan neerzetten, waarmee je makkelijk naar de verschillende onderdelen kunt gaan. Je vult een naam in voor het anker en die zet je dan weer in optie waar je de link toevoegt.

De opsommingslijst is altijd een nieuw blok. Deze geeft overigens geen andere opties. Door de opties bij het blok zelf (zie afbeelding 5), kun je wel de inspringing vergroten, waardoor je een opsomming in een opsomming krijgt.

Meer en pull-quote

Met het meer blok, kun je als je de samenvatting niet gebruikt, een ‘read more’ tag invoegen. Dan wordt je blog afgekapt op je blogpagina en vervolgens krijg je een ‘Lees meer’-link naar de rest van je blog. Dit is een pull-quote, grafische weergave van de blockquote. Deze heeft verder weinig opties. Als je css kunt schrijven, kun je het lettertype aanpassen en een klasse meegeven aan het citaat.

What if I fall? Oh but, my darling, what if you fly?

Erin Hanson

Galerij, citaat en audio

Dit is een galerij. In het zijblok heb je weer verschillende mogelijkheden om je galerij vorm te geven. Het is niet meer mogelijk of nog niet mogelijk om een diashow van je galerij te maken. De diashow komt vanuit de Jetpack-plugin. Het kan dus zijn dat we daarop moeten wachten of dat Gutenberg zelf met een diashow optie komt.

Het verschil tussen een pull quote en een citaat zie je hier. Het is visueel iets minder interessant:

What if I fall? Oh but, my darling, what if you fly?

Erin Hansen

Een audio fragment invoegen kun je doen via het blok audio. Dat ziet er zo uit:

afb 6 Een audio bestand invoegen

Inline elementen

Er is op dit moment maar een inline element. Inline wil zeggen dat het in de lopende tekst wordt toegevoegd. Het enige inline element is het toevoegen van een plaatje. En dat werkt op het moment van schrijven nog niet helemaal naar behoren. Je kunt het plaatje namelijk nog niet uitlijnen terwijl de tekst ernaast blijft doorlopen. Hier is melding van gemaakt op het WordPress forum en zodra het wel kan, zullen we dit aanpassen in deze handleiding.

Algemene blokken

Veel van de algemene blokken heb ik al behandeld in het stukje over de meest gebruikte blokken. Ik zal het hier alleen over de andere vier blokken hebben, namelijk ‘omslag afbeelding’, ‘bestand’, ‘subkop’ en ‘video’.

Gedenkplaat Gutenberg

Je hebt nu al tot hier gelezen. Maar stel nu dat je weinig tijd hebt, dan kun je via onderstaande knop de pdf downloaden!

Een omslagafbeelding is een plaatje waar je een titel doorheen kan zetten. Je zou dit bijvoorbeeld kunnen gebruiken om de titel van je blog in te zetten aan het begin van je post. Of om de header van je pagina te maken. In de zijbalk kun je nog de doorzichtigheid van je plaatje aanpassen. 

Met het blok bestand, kun je op een makkelijkere manier bestanden delen in je blogs of pagina’s. Via uploaden in de mediabibliotheek werkt het nog niet, maar als je de uploadknop gebruikt in het blok zelf, dan lukt het wel. Er zit dan een mooie downloadknop bij die je overigens ook uit kunt zetten in de zijbalk.

Gutenberg is heel behulpzaam in de omschrijving van de subkop: “Wat is een subkop? Kleiner dan een kop, groter dan standaard tekst.” Zoals je hieronder ziet hebben wij dus uitgetest wat die subkop nu precies doet. 

h2 kop

Subkop

De subkop heeft een lichtere kleur dan de gewone koppen. Op een lichte achtergrond, zal de kop dus lichter worden, weergegeven omdat die lichtere kleur wordt bereikt door het aanpassen van de dekkingsgraad van de tekst (de zogenaamde opacity). Dat heeft tot gevolg dat je bij een donkere achtergrond, dus een donkerdere subkop krijgt.

Helaas kan ik dit niet laten zien, omdat de subkop maar een keer per blog gebruikt mag worden. Als de subkop wordt gezien als een ondertitel, dan is dat logisch. Een verhaal heeft namelijk een titel en een ondertitel. Ook is het niet mogelijk een achtergrond kleur toe te voegen aan een subkop blok.

De video is de laatste van de algemene blokken die ik behandel. De rest heb ik eerder al behandeld bij de meest gebruikte blokken.  De video spreekt eigenlijk voor zich. Zodra je kiest voor dit blok, kun je een url invoegen of een videobestand uploaden. Daarmee kun je dan makkelijk een video in je blog integreren. Een url van een youtube filmpje werkt hier niet. Dit gaat echt om video’s die je zelf upload.

Het onderdeel opmaak

Hier vind je een aantal blokken terug: code, vers, pull-quote, klassiek, aangepaste HTML, voorgeformatteerd en tabel.

De code is een blok dat misschien interessant kan zijn voor mensen die stukjes code delen op hun site (al vraag ik mij af of zij Gutenberg zullen gaan gebruiken). Dat ziet er zo uit:

<h2>Dit is een tussenkop</h2>
<p>Hier komt de lopende tekst</p>

Waarschijnlijk zullen de meeste bloggers dit niet nodig hebben.

Een blok dat interessant is voor dichters, is het blok Vers. Daarin kun je bijvoorbeeld een haiku plaatsen of een ander gedicht. Maar of het echt wat toevoegt aan je tekst?

Ach oude vijver
de kikkers springen erin
geluid van water.
Bashō

De pull-quote hebben we al behandeld onder de meest gebruikte blokken. Het blok ‘klassiek’ is een blok dat je de oude editor teruggeeft. Dit blok heb ik in de oude editor getypt, dit zie je natuurlijk niet terug aan de voorkant. Vandaar onderstaand screenshot hoe dat eruit ziet.

Het klassieke blok

Het blok met aangepaste html geeft je een blok waarin je zelf wat html kunt typen, als je dat kunt. Je kunt dan bijvoorbeeld een link typen:

Wil jij je producten verkopen met een webshop, maar wil je niet de romslomp van het opzetten en werkend maken? Wij helpen je verder!

Het stukje html zie je niet terug aan de voorkant, vandaar weer onderstaand plaatje:

Het html blok
Wat is een voorgeformatteerd blok? Dat is een blok dat er anders
uitziet, maar wel jouw stijl, tussenruimte en tekst behoudt, zoals
jij het hebt ingtypt. Nu heb ik bijvoorbeeld na ieder einde van de
zin een enter gemaakt, om de zin goed te kunnen afbreken. Dit bete-
kent dat je ook met afbreekstreepjes kunt werken om de tekst wat be-
ter te laten doorlopen of uit te vullen.

De tabel spreekt eigenlijk ook wel voor zich. Had je vroeger html-code nodig om een tabel te kunnen maken en voor WordPress websites de plugin TablePress, dan kan dat nu makkelijker met het ingebouwde blok van de Gutenberg editor. Geen code meer en geen externe plugins die je site zwaarder maken. Je kunt ook nog kiezen om je cellen een vaste breedte mee te geven, maar in verband met mobiel bezoek is dat misschien niet wenselijk. Als voorbeeld onze pakketten voor het onderhoud van je website (genoemde prijzen zijn ex btw).

Basis pakketUpgrade pakketPremium pakket
60,00 per kwartaal75,00 per kwartaal80,00 per kwartaal
Maandelijkse backupDagelijkse backupDagelijkse backup
Wekelijkse updatesWekelijkse updatesDagelijkse updates
Kosteloos terugplaatsen van de backup*Kosteloos terugplaatsen van de backup*Kosteloos terugplaatsen van de backup*


Prioriteit bij calamiteiten

*indien er door een update gemaakt door Focus iets fout is gegaan.

Layout elementen

Gutenberg geeft de blogger ook verschillende lay-out elementen om in zijn posts te gebruiken. Dit zijn Meer, knop, kolommen (beta), pagina-einde, scheidingslijn en vulelement. Over ‘Meer’ heb ik het bij de algemene elementen al gehad, dus daarom zal ik verder gaan met ‘knop’. 
Met de knop kun je mensen natuurlijk iets verkopen of zich laten inschrijven voor je nieuwsbrief in ruil voor een mooi cadeautje. Zoiets als deze knop hieronder.

Ja, deze knop is klikbaar. Je schrijft je dan in voor onze nieuwsbrief die zeer sporadisch uitkomt. We beloven dat we geen misbruik maken van je e-mailadres en we zullen het ook niet doorverkopen.

De knop zelf.
Kleur toevoegen aan je knop en de tekst!

Je kunt je tekst ook in kolommen indelen. Dan krijg je dus twee kolommen naast elkaar.

Dat is bijvoorbeeld handig op een pagina als je meerdere dingen naast elkaar wil zetten.

Dit zou wel eens een workaround kunnen zijn voor de inline plaatjes, voorlopig. Kijk maar. Hiermee kun je dus twee plaatjes naast elkaar zetten.

De kolommen zijn nog in beta, dat wil zeggen dat ze nog niet helemaal doorontwikkeld zijn. Dat kun je zien aan de tussenruimte die niet helemaal goed is tussen de kolommen en de tekst eronder, die begint met Dit zou wel eens… Dus nog even voorzichtig met de kolommen.


De scheidingslijn heb ik hierboven gebruikt. Helaas valt er weinig aan te stijlen binnen de Gutenberg editor. Dit zul je dan in je stylesheet moeten doen, door een class toe te kennen via het blokje Geavanceerd. Doe dit alleen als je weet wat je doet. Vraag het anders aan je webbouwer.

Een pagina-einde doet precies hetzelfde als in Word of Pages. Het leidt je naar een volgende pagina. Als een tekst te lang wordt, dan kun je ervoor kiezen om je lezer naar de volgende pagina van je blog door te laten klikken, zodat hij weer even iets te doen heeft op je site. Het is ook een manier om meer kliks op je website te krijgen (en veel ‘click-bait’ sites doen dus precies dat), want dan heb je meer paginaviews per bezoeker, wat weer goed is voor de cijfers als je adverteerders wil.

Hieronder zie je een plaatje van een vulelement:

Het vulelement

Je kunt de hoogte aanpassen in het blokje aan de linkerkant. Je kunt een vulelement gebruiken om wat extra ruimte te maken tussen twee blokken. Dat heb ik gedaan tussen de kolommen en de tekst eronder, zodat de twee blokken niet te dicht op elkaar zouden worden getoond. Het vulelement krijgt alleen een hoogte in pixels mee aan de zijkant. Aan de voorkant zie je het element niet.

Widgets

De widgets kennen we allemaal van de zijbalk. Maar met deze toevoeging in de Gutenberg editor wordt het ook makkelijker om widgets in je pagina of in je post te laten lopen. De mogelijkheden: shortcodes, archieven, categorieën, nieuwste berichten en nieuwste reacties behandelen we hieronder.

Het toevoegen van shortcode kan bijvoorbeeld interessant zijn als je e-mailadressen verzamelt via Mailchimp. Zo kun je een inschrijfformulier makkelijk in je tekst plaatsen.

Je ziet rechtsboven in de afbeelding een pop-up boven een tag met ‘Meer opties’ in het zwart. Ieder blok heeft deze mogelijkheid. Hiermee kun je bijvoorbeeld een blok verwijderen als je een verkeerd blok hebt gekozen of als je iets anders wil doen. Bovenaan het blok aan de linkerkant, kun je ook nog de opmaak van de tekst veranderen. De uitlijning geldt voor het hele blok, maar je kunt er ook voor kiezen om stukjes van je tekst vet te maken of schuin te zetten.

Archieven, nieuwste blogs en nieuwste reacties, kun je nu ook makkelijk in de tekst plaatsen, zoals hieronder kunt zien. Al vraag ik me af waarom je deze elementen in je tekst zou willen hebben. Wellicht is het mogelijk om zelf widgets te programmeren die wel wat toevoegen aan je tekst. Dit zul je echter moeten laten doen, want daar heb je meer kennis voor nodig.

Insluitingen

Bij de insluitingen tref je voor verschillende externe partijen mogelijkheden aan, die ik hier niet allemaal apart zal behandelen. Ik zal in ieder geval YouTube uitlichten, omdat we die waarschijnlijk het meeste gebruiken. Het werkt heel simpel: voeg de url toe in de balk en klik op insluiten.

Gebruik wel de youtube.com link en niet de youtu.be link.

Alle insluitingen werken eigenlijk allemaal hetzelfde. Er zijn veel insluitingen beschikbaar. Een aantal ken ik niet, maar ik zal de meest bekende noemen. 

  • Youtube
  • Instagram 
  • Twitter
  • Facebook
  • WordPress
  • Soundcloud
  • Spotify
  • Flickr
  • Vimeo
  • Collegehumor
  • Imgur
  • Issuu (voor tijdschriften)
  • Kickstarter (voor crowdfunding)
  • Photobucket
  • Slideshare
  • Ted
  • Tumblr

Bij al deze insluitingen is het de bedoeling dat je een link toevoegt. Je kunt deze insluitingen verder niet echt stijlen. 

Er is nog een insluiting die ik wil behandelen en dat is de insluiting insluiten. Dit blok geeft je de mogelijkheid om een url in te sluiten voor alle overige zaken, die niet zijn voorzien in het blok insluitingen. Als je bijvoorbeeld kiest voor een website url, dan ziet dat eruit zoals hier onder. Je krijgt de titel van de website en een screenshot van de homepage.

Omdat de preview van de website op dit moment nog over de tekst van de andere blokken heen valt, heb ik deze insluiting niet opgenomen in dit blog. Ik neem aan dat dit nog wordt opgelost.

Het einde

Heb je het hele blog helemaal doorgelezen? Dat is fantastisch. Applaus! Dan wil ik je graag de mogelijkheid geven om alle Gutenberg-blogs te downloaden in één pdf, zodat je een handig naslagwerk hebt, om met de nieuwe editor om te gaan. Daarvoor hoef je alleen maar je e-mailadres met ons te delen. Klik dus op onderstaande knop, schrijf je in en ontvang deze hele handleiding als handige pdf!

Meer weten of vragen?

Ben je geïnteresseerd geraakt door dit blog? Stuur me een berichtje en help je verder!

1 Reactie

  1. Ton Kemp

    Met Gutenberg kan ik mooie knoppen maken, maar hoe kan ik de url van een knop in een nieuw venster laten openen??
    Voor zover ik kan zien is het altijd target=_self met de knoppen!
    NIET HANDIG

    Antwoord

Een reactie versturen

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

Pin It on Pinterest