• Tel: 0596 23 44 12
  • Mail: info@medipio.nl
  • Tel: 0596 23 44 12
  • Mail: info@medipio.nl
Eerste bevindingen bij het bouwen van een pagina met de nieuwe editor

Een pagina in WordPress bouwen met de Gutenberg editor

Hoe is de nieuwe blokkendoos editor van Gutenberg in gebruik. Lees het hier!

Gutenberg

Pagina bouwen met Gutenberg

In een van onze vorige blogposts hebben we al verteld dat er het nodige gaat veranderen in WordPress. Dit CMS krijgt sowieso regelmatig updates maar de komende update, die overigens weer iets vertraagd is, krijgt ook een geheel nieuwe paginabouwer genaamd Gutenberg. Deze gaat de normale WYSIWYG-editor van WordPress vervangen. We hebben je in de vorige blogpost over Gutenberg ook al het een en andere verteld van het hoe en waarom van deze editor dus nu is het tijd om eens te kijken wat je er daadwerkelijk mee kunt doen. We gaan er daarom eens een pagina mee bouwen. Omdat WordPress 5.0 op het moment van schrijven nog net niet uit is, hebben we Gutenberg nog even als plugin geïnstalleerd. Vooralsnog zonder dat we nog meer soorten blokken toevoegen via extra plug-ins. Laten we eerst maar eens kijken wat Gutenberg zelf in huis heeft en loggen dus eerst maar eens in op onze testwebsite. Als materiaal beschikken we over wat dummytekst enkele stockfoto’s alsmede een paar logo’s met een transparante achtergrond.

Blok “bedekking”

Zodra we op “nieuwe pagina” klikken dan komt de Gutenberg-editor meteen in beeld. Hij laadt, in tegenstelling tot veel andere paginabouwers, lekker vlot. De interface is verbluffend eenvoudig. Zo eenvoudig, dat het in het begin echt even zoeken is. De titel hebben we zo ingevuld. Daaronder staat een knopje “Bedekking toevoegen”. Laten we die eerst maar eens proberen. Nadat we daarop klikken kunnen we een afbeelding selecteren uit de mediabibliotheek en op de pagina plaatsen. Hoewel we een afbeelding op Full-HD formaat hebben, blijft het een blokje van bescheiden breedte. We kunnen er een tekst overheen zetten en ook een gekleurde transparante laag over de afbeelding heen zetten. Je kunt zowel de tekst als het blok centreren en links of rechts uitlijnen, maar hoe krijgen we deze afbeelding nou op een wat grotere breedte?

Blok bedekking

TwentySeventeen

Dat schijnt dus niet te kunnen. Als we op “Voorbeeld” klikken dan zien we dat dit blok naast de titel komt te staan. Dan ligt het misschien aan het TwentySeventeen theme. Inderdaad, in de Customizer kun je kiezen of de content en de titel naast of boven elkaar komen. Een vrij zinloze optie, waarvan we ons vooral afvragen waarom er voor deze default instelling is gekozen. Maar nu is het blok wel een stuk breder, net zo breedte als het overigens vrij smalle content gedeelte in dit theme.

Niet echt ideaal

Maar als we de HTML-code van dit blok bekijken, dan zien we dat de volledige afbeelding is gebruikt voor een blok van een paar honderd pixels breed. Er wordt bij het bloktype “Bedekking” gewoon dus de volledige afbeelding gekozen. Dat is dus niet ideaal. Ook proberen we om wat tekst toe te voegen. Maar of we het nu onder of naast het blok toevoegen, we krijgen meteen een horizontale scrollbar zodra de tekst meer dan een regel beslaat. Kennelijk is dit alleen geschikt voor een kort onderschrift. Ons enthousiasme is toch wat getemperd.

Blok “Afbeelding”

Daarom proberen we eronder nog een ander soort blok, gewoon een afbeelding. Dit gaat beter. Je vindt hier eigenlijk de mogelijkheden zoals we al jaren van WordPress gewend zijn, maar dan in een andere interface. Bovendien kun je de afmeting van de afbeelding ook veranderen door de blauwe cirkel aan de rechterzijde of onderzijde van de afbeelding te verplaatsen. Dat zou handig kunnen zijn als je iets meer de illusie van WYSIWYG zou hebben. Dat is wat ons betreft niet het geval.

Blok afbeelding

Blok “Titel”

Ook dit blok werkt lekker intuïtief. Je kunt kiezen uit verschillende soorten headings. Maar ook missen we iets, namelijk de mogelijkheid om de kleur te veranderen. Je kunt wel een CSS-klasse toevoegen en zo de kleur veranderen. In technisch opzicht natuurlijk prima, maar minder handig voor minder technisch begaafde redacteuren.

Blok “Insluiten”

Je kunt in WordPress een Youtube video embedden door simpelweg de URL in de editor te plakken en op enter te duwen. In Gutenberg kun je voor een blok “Insluiten” kiezen. Hier kun je kiezen voor Youtube, Vimeo en vele andere soorten social media zoals Instagram en webservices zoals Slideshare. Handig!

Blok “Paragraaf”

Nu is het tijd voor wat tekst. We kiezen voor een blok van het soort “paragraaf” en plakken hier wat dummytekst in. Dat gaat prima. Je hoeft hiervoor trouwens niet per se een nieuw blok te kiezen, je kunt ook gewoon gaan typen. Je moet hier wel in de gaten houden dat het om echt één tekstblok gaat, in tegenstelling tot de hele lappen tekst met afbeeldingen en headings die je in de oude editor van WordPress kon zetten. Hier kunnen we in de rechterkolom trouwens wel gewoon de kleur van de tekst veranderen, evenals de grootte. Als we er een stuk tekst uit willen knippen, zien we dat Gutenberg er automatisch twee blokken van heeft gemaakt. De praktijk zal uitwijzen of dit handig is.

Afbeelding aan paragraaf toevoegen

Je wilt natuurlijk ook wel een afbeelding toe kunnen voegen aan je paragraaf. Dat gaan wij ook proberen. We uploaden een kleinere afbeelding, zetten deze in een blok en gaan kijken hoe we die in de tekst kunnen zetten. We proberen eerst om deze in de paragraaf te slepen. Dat gaat dus niet. Na wat zoeken op Google komen we op de blog van Matt Mullenweg en die legt het gelukkig haarfijn uit. Je ziet naast ieder blok een pijltje staan om het blok een rij naar boven of beneden te verplaatsen. Hiermee zet je de afbeelding boven de paragraaf waar hij in/naast moet komen. Daarna kies je aan welke kant de afbeelding uit moet lijnen. Daarna kruipt de paragraaf er vanzelf naast. Slim!

Video aan paragraaf toevoegen

Omdat we erboven nog een paragraaf tekst hebben staan, met daarboven een Youtube video, gaan we eens kijken of deze truuk ook met een Embed-blok werkt. En jazeker, ook dat werkt, maar dan wel anders dan we hadden verwacht, de video komt namelijk naast alle twee de paragrafen te staan. Dat herstellen we dus maar even. Maar we willen natuurlijk toch proberen of het niet op een andere manier lukt. We zetten even een titel tussen de 2 paragrafen in en lijnen de video nogmaals rechts uit. Dat werkt wel. Helaas kun je de afmetingen van de video niet veranderen waardoor deze wel een stuk hoger dan de tekst is.

Samenvattend

De nieuwe Gutenberg-editor voor WordPress lijkt zo eenvoudig te werken door de eenvoudige, minimalistische vormgeving. Er blijkt in de praktijk toch een flinke leercurve te zijn. Volgende keer gaan we er wat dieper op in en proberen we daadwerkelijk iets te maken wat op een opgemaakte pagina lijkt. Daar is nu nog geen sprake van.

Resultaat

Laat een bericht achter

Je email adres word niet gepubliceerd. Required fields are marked *

Je kunt de volgende HTML tags en attributen gebruiken: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Ebook 27 website geheimen
  • 27 toffe geheimen onthult
  • Krijg meer succes met je website
  • Voor beginners en experts
  • Helemaal gratis
  • Direct downloaden