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.

• Meest gebruikte blokken
• Inline elementen
• Algemene blokken
• Opmaak
• Layout elementen
• Widgets
• Insluitingen

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.

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.

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.

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.

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:

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’.

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 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:

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

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).

*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.

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:

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.

• oktober 2024
• april 2024
• december 2023
• november 2023
• september 2023
• juli 2023
• juni 2023
• april 2023
• maart 2023
• januari 2023
• december 2022
• november 2022
• september 2022
• augustus 2022
• juli 2022
• mei 2022
• februari 2022
• december 2021
• september 2021
• augustus 2021
• juni 2021
• april 2021
• januari 2021
• december 2020
• november 2020
• oktober 2020
• september 2020
• augustus 2020
• juli 2020
• juni 2020
• mei 2020
• april 2020
• maart 2020
• februari 2020
• januari 2020
• december 2019
• november 2019
• oktober 2019
• september 2019
• augustus 2019
• juli 2019
• juni 2019
• mei 2019
• april 2019
• maart 2019
• februari 2019
• januari 2019
• december 2018
• november 2018
• oktober 2018
• september 2018
• augustus 2018
• juli 2018
• juni 2018
• mei 2018
• april 2018
• maart 2018
• februari 2018
• januari 2018
• december 2017
• november 2017
• oktober 2017
• september 2017
• augustus 2017
• juli 2017
• juni 2017
• mei 2017
• april 2017
• maart 2017
• februari 2017
• januari 2017
• december 2016
• november 2016
• oktober 2016
• september 2016
• augustus 2016
• juli 2016
• juni 2016
• mei 2016
• april 2016
• maart 2016
• februari 2016
• januari 2016
• december 2015
• november 2015
• oktober 2015
• september 2015
• augustus 2015
• juli 2015
• juni 2015
• mei 2015
• april 2015
• maart 2015
• februari 2015
• januari 2015
• december 2014
• november 2014
• oktober 2014
• september 2014
• augustus 2014
• juli 2014
• juni 2014
• mei 2014
• april 2014
• maart 2014
• februari 2014
• januari 2014
• december 2013
• november 2013
• oktober 2013
• september 2013
• augustus 2013
• juli 2013
• juni 2013
• mei 2013
• april 2013
• maart 2013
• februari 2013
• januari 2013
• december 2012
• november 2012
• oktober 2012
• september 2012
• augustus 2012
• februari 2012
• januari 2012
• oktober 2011
• september 2011
• juni 2011
• mei 2011
• april 2011
• maart 2011
• februari 2011

• 50books 2016
• 50books 2017
• Bloggen
• Boeken
• Fietsavonturen
• Gastric Bypass
• Gedichten
• Inzichten
• Mensen kijken
• Overige
• Persoonlijk
• Podcast
• Quotes
• School
• Spreekwoorden 2016
• Spreekwoorden 2017
• Spreekwoorden 2018
• Taal
• Uitgelicht
• Verhalen
• Websites
• WOT

1. 

   Ik ben sinds kort geïnteresseerd geraakt in puntdichten m.n. limericks

2. 

   Ik heb het op een vrijmarkt gekocht voor 50 euro cent voor mijn kleindochters. Met de herinnering van vroeger

3. 

   Beste Martha. Als 76-jarige vader van drie generaties kinderen erger😉 ik mij ook aan het taalkundig gebruik van wou als…

4. 

   haai, psyche gaat toch ook nog naar persephone toe om schoonheidszalf te halen als vierde taak? dat staat in ieder…

5. 

   Dank je wel 😊

• 7 Redenen waarom jouw bedrijf niet zonder website kan
• Heb jij een sleutelplan voor je website?
• Filosoferen over Kerst
• Het belang van onderhoud van je WordPress website
• De meest voorkomende foutcodes op websites en hoe je ze kunt oplossen

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.

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!