In de zomervakantie heb ik andere werktijden, zie contact

Je blog mooier opmaken met de Gutenberg editor

WordPress heeft sinds 2019 een nieuwe editor, maar nog niet iedereen gebruikt hem. In dit blog laat ik je zien wat een editor is en hoe je hem kunt installeren en gebruiken.

De editor is het gedeelte waar je de tekst in typt en bewerkt. Als je een blog of een pagina maakt, dan ben je bezig in de editor.

Ik start even wat achtergrondinfo. Heb je Gutenberg editor al in gebruik, scroll dan naar beneden.

Hoe kan ik zien welke editor ik heb?

In de overgangsperiode hebben veel ondernemers de klassieke editor geïnstalleerd. Je kon toen kiezen tussen Gutenberg en de klassieke manier van editen. Heb je niks gekozen en heb je inmiddels WordPress 5.0 dan werk je hoogstwaarschijnlijk al de Gutenberg editor. Hij is in ieder geval aanwezig. Maar hij kan uitgezet zijn door andere plugin die hem blokkeert. Als hij actief is dan kan je ook een grijs balkje zien met klassiek er boven staan. Dat is dan de oude opmaak in 1 Gutenberg blok geplakt.

De plugin check

Om even dubbel te checken ga je naar de plugins en kijk je of je een of allebei als plugin hebt geïnstalleerd. Je kan beide deactiveren en weggooien als je met de Gutenberg editor wil werken.

plugin check, deactiveren en verwijderen.

Wat kan ik met Gutenberg?

Met deze nieuwe editor kan je jouw blog mooier vormgeven. Je hebt meer opties. Je werkt niet meer met plaatjes die je tussen een tekst plakt. En waarvan je hoopt dat het een beetje mooi uitlijnt. Nee je kan blokken plaatsen en die vullen.

in het kort hoe het werkt

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.

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.

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

kleine lettertjes onderaan het citaat

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

Kies voor gallerij en daarna de afbeeldingen die je er in wilt. Hij maakt er automatisch een mooie indeling van.

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.

Vind ik leuk:

Contactgegevens

Btw-ID NL001413297B10
KVK 53368959

Let op: alle genoemde prijzen op deze website zijn excl. 21% btw

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