WordPress Gutenberg: Het paragraaf blok

Gutenberg paragraaf blok header afbeelding

Eén van de belangrijkste blokken van de Gutenberg editor is toch wel de paragraaf. Maar wat kun je allemaal met dit blok? Dat gaan we bekijken in dit artikel.

Paragraaf

Volgens WordPress is een paragraaf, de bouwsteen van alle verhalen. En dat is natuurlijk ook zo. Met het paragraaf blok schrijf je de content voor je verhaal. Je kunt paragrafen zien als alinea’s. Maar hoe voeg je een paragraaf toe? En wat kun je er mee?

Paragraaf toevoegen

Om een paragraaf toe te voegen klik je op Icoon toevoegen blok en kies je voor Icoon paragraaf. Je paragraaf wordt dan ingevoegd op de positie van je cursor.

Werkbalk

Paragraaf werkbalk

Als je in een paragraaf klikt opent er een pop-up werkbalk. In deze werkbalk kun je verschillende aanpassingen doen voor je paragraaf. Laten we deze verschillende opties eens bekijken.

Paragraaf werkbalk veranderen

Als je linksboven op Icoon paragraaf klikt verschijnt er een pop-up menu. Dit menu geeft je de mogelijkheid om het blok nog te veranderen in een ander blok uit de lijst.

Ik gebruik dit niet vaak, maar het komt wel eens voor dat ik toch een Heading blok wil in plaats van een paragraaf en dan gebruik ik deze optie.

Daarnaast zie je Icoon verplaatsen blok. Hiermee kun je het complete blok verslepen naar een andere positie. Ook dit zal je niet vaak gebruiken. Waarom niet?

Omdat deze Icoon omhoog- en omlaag verplaatsen optie handiger is. Hiermee kun je het complete blok omhoog of omlaag verplaatsen. Je zal merken dat deze optie makkelijker en veiliger werkt dan het verslepen van het blok.

Uitlijnen

Het volgende icoon is Icoon uitlijning. Als je hier op klikt krijg je een pop up menu met de mogelijkheden voor het uitlijnen van je paragraaf. De drie opties spreken voor zich. Icoon uitlijning voor links uitlijnen, Icoon uitlijning centreren voor centreren en Icoon uitlijning rechts voor rechts uitlijnen.

Een gif afbeelding over het uitlijnen van een Gutenberg paragraaf

Tekst opmaken

We gaan nu een aantal opties bekijken voor het opmaken van de tekst binnen een paragraaf. De standaard onderdelen zijn Icoon dikgedruktvoor dikgedrukt en Icoon cursiefvoor cursief. Maar er zijn meer opties te vinden voor het opmaken van tekst onder de knop Icoon extra opties. Zo vindt je in het dropdown menu de volgende onderdelen:

Icoon doorgehaalde tekst Voor doorgehaalde tekst.
Icoon inline afbeelding Voor een inline afbeelding. Zoals dit Icoon blok toevoegen in tekstregel icoon bijvoorbeeld.
Icoon inline code Voor inline code, om aan te geven dat een stuk tekst code is.
Icoon subscript Voor subscript, om de scheikundige naam van water, H2O, te kunnen weergeven.
Icoon superscript Voor superscript, om bijvoorbeeld kubieke meter, m3, aan te geven.
Icoon tekstkleur Voor het veranderen van de tekstkleur.
Icoon toetsenbordingave Voor het aangeven van een toetsencombinatie, bijvoorbeeld CTRL + A

Link aanmaken

Het komt wel eens voor dat je een link wilt aanmaken in je tekst, bijvoorbeeld om naar een ander artikel of naar een andere website te verwijzen. Dit kun je doen met Icoon link.

Als je op Icoon link klikt, dan krijg je een pop up menu waarin je de link moet invullen waar je naar wilt verwijzen. Zo verwijst deze link naar de website wpgoeroe.nl en wordt die geopend in een nieuw tabblad.

Tot slot is er nog het Icoon optiesicoon. Dit zijn de blokopties. Deze optie hebben we bekeken in Gutenberg: Blokken algemeen.

Blok menu

Afbeelding van het paragraaf blok menu

Naast de pop-up werkbalk heeft ieder blok ook nog instellingen die in het Blok menu aan de rechterkant van de pagina gedaan kunnen worden. Zo kunnen we de typografie, de kleurinstellingen en de tekstinstellingen nog veranderen en zijn er nog geavanceerde instellingen mogelijk.

Typografie

In het Typografie menu kun je de grootte van het lettertype aanpassen. Je kunt kiezen uit verschillende opties in het dropdown menu of er voor kiezen om zelf een waarde te typen in het Aangepast veld.
Let op: De grootte geldt voor de gehele paragraaf.

Kleurinstellingen

Paragraaf blok menu - Kleurinstellingen

Bij de kleurinstellingen kun je de tekstkleur en de achtergrondkleur veranderen van de paragraaf.

Je kunt kiezen uit kleuren die WordPress als keuze geeft, of je kan kiezen voor een aangepaste kleur.

Deze paragraaf heb ik de hex-kleur code #2B7A78 meegegeven. Dat is de donkergroene kleur van het WP Goeroe thema. De tekst heb ik wit gemaakt.

Gif afbeelding waarop te zien is hoe de kleurinstellingen van een paragraaf veranderd moeten worden

Tekst-instellingen

Afbeelding van de tekst-instellingen voor een paragraaf

Bij de tekst-instellingen kun je een grote initiaal tonen. Deze letter wordt dan als een grote letter binnen de paragraaf getoond. Ik heb deze optie persoonlijk nog nooit gebruikt. Maar wellicht weet je er zelf een leuke toepassing voor 😉

Geavanceerde instellingen

Bij de geavanceerde instellingen kun je een HTML anker instellen. Hiermee kun je een link aanmaken binnen je eigen pagina. Handig voor als je een inhoudsopgave wilt maken. Dit ga ik in dit artikel niet verder behandelen. Wil je hier meer over weten, lees dan dit artikel (volgt).

Je hebt ook de optie om Extra CSS-class(es) aan de paragraaf mee te geven. Dit geeft je de mogelijkheid om de paragraaf extra te stylen met behulp van CSS. In de video hieronder zie je hoe de paragraaf met behulp van een CSS class omgezet wordt naar allemaal hoofdletters.

Gif afbeelding die laat zien hoe een paragraaf met een extra CSS class omgezet wordt naar alleen maar hoofdletters.

Tot zover het paragraaf blok. Zoals je ziet, kun je een heleboel aanpassen. Ik hoop dat dit artikel je heeft laten zien wat je met een paragraaf binnen WordPress allemaal kan.

Reacties

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *