• Tel: (0596) 72 20 13
  • Mail: info@medipio.nl
  • Tel: (0596) 72 20 13
  • Mail: info@medipio.nl
Zo maak je een mooie pagina met de nieuwe editor.

Pagina maken met Gutenberg editor

Lees hier hoe je een mooie pagina maakt met de nieuwe WordPress editor Gutenberg.

Gutenberg WordPress

Zo maak je een pagina met Gutenberg voor WordPress

In de vorige blogpost over Gutenberg was het nog een aparte plugin. Nu de update naar WordPress 5.0 achter de rug is, is Gutenberg een standaard onderdeel van WordPress en ook de default editor om berichten, pagina’s en producten mee op te maken.

Liever de klassieke editor?

Als je vindt dat je hier nog niet aan toe bent, dan helpt WordPress jou een beetje. Direct na de update naar WordPress 5.0 of 5.1 zie je in het dashboard namelijk een button staan waarmee je desgewenst weer de bekende Classic Editor kun installeren en activeren. Wil je per posttype (berichten, pagina’s, producten, portfolio etc) bepalen welke editor je gebruikt? Dat kun je weer makkelijk instellen als de Gutenberg Manager plugin installeert.

Aan de slag met Gutenberg

Evengoed zijn wij van mening dat we open moeten staan voor vernieuwingen en daarom moeten leren om met Gutenberg te werken. Daarom gaan we in deze blogpost, in de vorige posts al een beetje met Gutenberg te hebben gespeeld, kijken of we een echt bruikbare pagina kunnen maken.

Twenty Nineteen theme

Wat ook met de laatste update van WordPress verscheen, is het splinternieuwe Twenty Nineteen theme, het nieuwe default theme van WordPress. Uiteraard is dit nieuwe theme helemaal compatible met Gutenberg. Omdat we voor deze serie blogposts het liefst met de meest recente versies van alles werken, hebben wij dit Twenty Nineteen theme meteen maar geactiveerd.

Homepage bouwen

De website die wij willen bouwen, moet een normale bedrijfswebsite worden. Daar hebben we een mooie homepage voor nodig. Je kunt in WordPress instellen of je op de homepage de laatste berichten wilt laten zien, of dat je daar een bepaalde pagina als homepage wilt gebruiken. Wij kiezen in verband met het doel van de website voor het laatste. Maar dan moeten we die homepagina wel eerst bouwen. Aan de slag dus!

Header

Ook in Twenty Nineteen is het zo dat de titel altijd in beeld blijft. Bovendien wordt de achtergrond van de titel gevormd door de uitgelichte afbeelding. Verder is er bij het Twenty Nineteen standaard een blauwe laag over de uitgelichte afbeeldingen. Deze kun je veranderen maar ook helemaal weglaten, wat onze voorkeur is. Dit kun je instellen in de Customizer.

Nu vullen we een tekst in de titel in, en kiezen een uitgelichte afbeelding. Bovendien kiezen we direct daaronder voor een zogenaamde omslagafbeelding. Deze nogal vreemd klinkende term is ongetwijfeld afkomstig van het Engelse woord ‘cover’. In ieder geval is dit een blok waarvan de achtergrond wordt gevormd door een foto en waar je een tekst in kunt zetten die standaard behoorlijk groot is. Zo’n blok wordt ook wel eens een ‘Hero’ blok genoemd. Mooi is dat je hierbij kunt kiezen om het blok over de volledige breedte van de pagina te doen. Dat werkt natuurlijk alleen goed als je geen sidebar hebt. Ook kiezen we voor een ‘vaste’ positie van de achtergrond, zodat bij scrollen wel de tekst maar niet de achtergrond beweegt.

Direct daaronder plaatsen we een paragraaf waarbij de tekst wat groter en wit maken, en kiezen daarbij een blauwe achtergrond. Dat zit er zo uit in de Gutenberg editor:

Screen 1

Nu gaan we naar het voorbeeld. Daar zien we een onverwachte eigenschap van het theme: de header met uitgelichte afbeelding is erg groot. Wij hadden hier een lage en brede afbeelding voor gekozen maar deze wordt veel anders weergegeven. Dat passen we later nog wel aan. Als we iets naar beneden scrollen en naar het resultaat van ons geknutsel in Gutenberg kijken, dan zien we het volgende:

Screen 2

Dat ziet er best wel netjes uit, nietwaar? Maar het is nogal summier. Ook is de uitgelichte afbeelding van het theme niet zo fraai, evenals de manier waarop het met logo’s omgaat. Wat dat betreft kijken we met weemoed terug naar het good old Twenty Twelve theme. Dit theme was wat betreft heel erg universeel in te zetten en was dan ook mateloos populair. Maar laten we daarom doorgaan en nog wat elementen aan onze pagina toevoegen. Oh, voordat we het vergeten: als je in de Gutenberg editor op een willekeurige plaats op de pagina gaat typen, dan komt daar automatisch een paragraaf. Maar je kunt in plaats van te beginnen met het typen van tekst ook een slash intypen. Dan verschijnt er ogenblikkelijk een menuutje om een blok in te voegen. Handig!

Kolommen

We gaan nu eens kijken wat we met kolommen kunnen doen en klikken op ‘/’ om een blok van het type ‘kolom’ in te voegen. Dat wordt er automatisch eentje van 2 kolommen. Aan de rechterkant kunnen we dit aantal met een schuifbalk vergroten naar in dit geval 3. Ook nu geldt: in iedere kolom kun je typen, maar ook weer een blok invoegen. We zetten wat tekst in de linker kolom, een afbeelding in de middelste en ook de rechter kolom krijgt weer tekst. Ook dit type blok kun je overigens over de gehele breedte uitlijnen.

Wat alleen niet lukt, is om de achtergrondkleur van dit blok te wijzigen te wijzigen. Wel kun je een custom CSS-class toevoegen. Dat proberen we dan ook maar eens. We kiezen voor een lichtgrijze achtergrondkleur en voeren de bijbehorende CSS in de Customizer in. Dat ziet er in het voorbeeld prima uit. Alleen is de padding nul, dus ook dat passen we meteen even aan.

Omdat we er nu meer plezier in krijgen, plaatsen we een kopje boven de afbeelding in de middelste kolom. Hier kiezen we niet voor een H2/H3 heading maar voor een paragraaf met groter font. Dan kunnen we namelijk wat met de kleuren spelen. Dat gaat niet met het blok van het type Heading zonder meteen weer een custom CSS in te moeten voeren. Ook stoeien we wat met de kleuren, lettergrootte en de grondkleuren van de andere paragrafen. Hieronder is het resultaat:

Screen 2

Resultaat

Nu vinden we het wel even genoeg. We weten nu namelijk dat we na enig proberen en oefenen heel behoorlijk een fatsoenlijke pagina of blogpost kunnen maken met Gutenberg. Maar wat ook voor de andere paginabouwer geldt: we moeten namelijk eerst een ontwerp maken en dat nabouwen. Je moet eerst een plan hebben voordat je het uit gaat voeren. Ook moeten we zorgen dat we dan de content voor de website klaar hebben. Dat zijn allemaal dingen die we in de volgende blogposts gaan behandelen. Ook hebben we nog wat dingen uit te zoeken met betrekking tot Gutenberg. Zo is het bijvoorbeeld niet mogelijk om een blok van het type Kolom naar boven en beneden te verplaatsen. Mogelijk vormen deze ook de basis zodat we daar eerst mee moeten beginnen. Ook moeten we uitzoeken hoe de elementen van Gutenberg zich in responsive modus gedragen. Bovendien zijn we niet tevreden met de uitgelichte afbeelding maar dat is gerelateerd aan het theme, niet aan Gutenberg. Mocht dit uiteindelijk niet naar onze zin lukken, gaan we misschien een ander theme uitzoeken.

Meer soorten blokken voor Gutenberg

Wat we ook gaan uitzoeken en in een volgende blogpost zullen behandelen, zijn plugins waarmee je nog veel meer soorten blokken aan Gutenberg toe kunt voegen. Wat voor onze homepage bijvoorbeeld erg interessant is, is een blok waarin we een overzichtje met blogposts kunnen tonen. Ook zijn er plugins met blokken om ikonen, producten, reviews, testimonials, prijslijsten en nog veel meer te laten zien.

Widgets

Nog even een opmerking: Dit theme heeft geen sidebar aan de linker- of rechterkant. Wel is er een footer, waar wat widgets in kunnen staan. Die widgets vinden we niet zo passen bij wat wij voor ogen hebben en halen we nu dus even weg. We kunnen ons voorstellen dat we op andere pagina’s wel widgets willen gebruiken. Dat kunnen we ongetwijfeld oplossen door middel van een plugin die met conditionele widgetarea’s werkt of waarmee je kunt kiezen welke widgets bij bepaalde pagina’s, posts en categorieën worden getoond.

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 onthuld
  • Krijg meer succes met je website
  • Voor beginners en experts
  • Helemaal gratis
  • Direct downloaden