Ondersteunt mijn thema de Gutenberg blokken?

In dit blog probeer ik een aantal blokken uit van de nieuwe Gutenberg editor om te kijken of mijn Yootheme thema de styling automatisch oppakt. Waarschijnlijk heb jij een ander thema maar dan is dit blog ook zeker interessant.

Voor het grootste gedeelte zullen de nieuwe blokken goed werken met je eigen thema en in enkele gevallen is het nodig om contact op te nemen met de bouwer van je template.

Plugins kunnen ook problemen veroorzaken

Het kan ook zijn dat een van je plugins niet goed samen gaat met de nieuwe editor. Gaat er iets mis dan is het verstandig om je plugins een voor een te deactiveren. Alleen dan kan je testen aan welke plugin het ligt. Ligt het niet aan je plugins en heb je geen eigen code toegevoegd aan je website. Dan blijft het thema over.

Maar zoals ik al schreef, over het algemeen zullen de meeste blokken goed werken. Ik zal hieronder een paar van de blokken gebruiken.

Welke blokken zijn er en hoe voeg ik ze toe?

Je voegt de nieuwe blokken het makkelijkste toe via het + teken, links bovenin. Wil je een blok toevoegen tussen twee bestaande blokken, dan klik je op het + teken in het midden aan de bovenkant van je blok. Hieronder zie je een galerij met de verschillende tabjes en daarbinnen de blokken die je kan kiezen. Bij mij komen alle plaatjes tegen elkaar aan te staan. Niet zo mooi. Dat is dus iets wat ik met extra CSS ga aanpassen.

Algemene blokken

Als je links boven klikt op algemene blokken, vind je de blokken die je het meeste zult gebruiken. Zodra je de Gutenberg gaat gebruiken zullen de blokken die jij het meest gebruikt, komen te staan onder het tabje “Meest gebruikt.” Probeer het eens uit en voeg een blok toe en ervaar zelf hoe het werkt.

  • Kopje
  • Paragraaf
  • Lees verder
  • Lijstje
  • Afbeelding
  • Omslagafbeelding (afbeelding met tekst er over)
  • Gallerij
  • Video
  • Quote
  • Audio
  • Bestand (bijvoorbeeld een pdf)

Dit is een omslagafbeelding. Het mooie is dat je een “bedekkingskleur” kan kiezen en een transparantie

Nu heb ik hetzelfde blok maar kies ik voor uitlijning naar links. Hierdoor komt het blok wat je er onder plaatst er nu naast te staan. Opletten dus.

Overige blokken

Onder de andere tabjes (inline elementen, layout elementen, opmaak en insluitingen vind je blokken die je minder gebruikt worden. Bijvoorbeeld:

  • Kolommen
  • Knop
  • Scheidingslijn
  • Media + tekst

Media + tekst

Het blokje media en tekst gedraagt zich net wat anders. Hier blijven tekst en afbeelding wel binnen het blok staan. Alleen wordt bij mij de inhoud gecentreerd naast het blok weergegeven. En zie ik geen optie om de uitlijning bovenaan te starten. Dit kan een webbouwer aanpassen door CSS styling toe te voegen aan het thema.

Dit is een media + tekst blok. En ook supergroot. Dat kan je aanpassen in de kolom aan de rechterkant. Hier vind je nog extra optie voor de inhoud van het blok. Ik zag geen optie om hem uit te lijnen aan de bovenkant. Als ik na dit blok een inline afbeelding plaats, dan zal deze in dit stukje tekst komen. Zoals je nu ziet.wordpress zwolle studio sandra gortemaker

Paragraaf tekst


Het stylen van de blokken

Het is mogelijk om wat kleine aanpassingen te doen aan de styling. Per blok verschil dit. Nadat je een blok hebt geplaatst, zie je in de rechterkolom een aantal opties. Vaak kan je tekstgrootte aanpassen, de achtergrond kleur of een initiaal kiezen. Onder geavanceerd is er de optie om een CSS class op te geven. Met een class naam wordt er styling opgeroepen vanuit de code van je template. Dit is iets waar je webdesigner je mee kan helpen.

Een button kan je aanpassen in de zijkolom. Zelf liep ik er tegen aan dat ik niet dezelfde style kan gebruiken als die uit mijn thema. Als ik een class naam opgeef dan krijgt de styling vanuit Gutenberg voorrang en zie ik mijn eigen kleur er onder vandaan komen.

Dit is een paragraaf blok maar met de instellingen aan de zijkant kan je een achtergrondkleur instellen. Ook kan je de grootte van de tekst veranderen. Een leuke optie als je een tekst wil laten opvallen.

Omdat ik met het bovenste blok aan een citaat moest denken heb ik nu het “citeren” blok er bij gezet. Deze neemt mij mijn website automatisch de styling over van mijn thema

Hieronder staat ‘citaat schrijven’, dat is verwarrend, want het gaat om de afzender of auteur van het citaat. In mijn thema is de tekst even groot, maar in het blok toont hij kleiner. Dat is iets wat ik zou aanpassen.

Kolommen

Dit is een linkerkolom. Je kan ze verschillende kleuren geven. De hoogte wordt bepaald door de hoeveelheid content die je er in zet.

dit is de rechterkolom. Wel leuk dat je een kleurtje kan gebruiken.

Gallerij

De plaatjes worden zoals je ziet niet automatisch geschaald en afgesneden. Dit is een bekend probleem en is tot op heden nog niet opgelost.

Video

Een Youtube video is zo toegevoegd voor de url te plakken. In de video hieronder laat ik je in het kort mijn eerste ervaringen zien met de editor.

Advies, Gutenberg


Studio Sandra Gortemaker

Studio Sandra Gortemaker richt zich op vrouwelijk ondernemers die graag ondersteuning willen in hun online marketing. Ik help je bij het opzetten van je WordPress website, landingspagina en/of salespagina en je MailChimp campagnes. Ik ben hierin jouw sparringpartner en coach.

Is er nog iets onduidelijk of heb je een andere vraag? Laat het me weten door een reactie achter te laten.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Contactgegevens

Btw-ID NL001413297B10
KVK 53368959

Post- en vestigingsadres

Timmermeesterslaan 44 8014 EM Zwolle

Bezoekadres / Kantoor

Esdoornstraat 3 8021 WB Zwolle

%d bloggers liken dit:

Alle (cookie)scripts worden geblokkeerd totdat je klikt op accepteren. meer info

Onderaan in de footer vind je een link naar mijn privacy- en cookiebeleid. Hieronder een korte samenvatting:

Alle gegevens die worden verzameld via Google Analytics zijn anoniem. Ik hoef hier geen toestemming voor te vragen, maar het is wel fijn om te weten dat ik dit gebruik.
Maak je gebruik van formulieren of de reactiemogelijkheid op deze website. Dan maak je automatisch de keuze voor het plaatsen van cookies. Het is niet mogelijk deze opties te gebruiken zonder het plaatsen van cookies. Uiteraard bewaar ik je mail of aanvraag niet langer dan nodig. Reacties en aanvragen via een formulier op worden opgeslagen op mijn website en in mijn Gmail.
Meld je je aan voor een MailChimp nieuwsbrief dan worden deze gegevens opgeslagen in mijn MailChimp account, totdat je jezelf weer afmeld.

Sluit venster