WordPress Gutenberg: Het heading blok

Om je pagina overzichtelijk te houden, is het handig om aan te geven waar bepaalde stukken tekst over gaan. Daarvoor gebruik je koppen. WordPress noemt dit headings. Hoe voeg je een heading toe? Dat behandelen we in dit artikel.

Heading algemeen

Een heading kun je gebruiken om je pagina op te splitsen in verschillende secties. Elke heading geeft dan een nieuw onderwerp aan. Het is “good practice” om headings hiërarchisch te gebruiken. Wat bedoel ik daarmee?

Als je een nieuw onderwerp start gebruik dan een H2 heading. Heb je binnen dit onderwerp een sub onderwerp gebruik dan een H3 heading. Heb je binnen dit onderwerp weer een sub onderwerp een H4 enzovoort.

Je hebt de beschikking over H1 t/m H6. Maar let op: De H1 heading wordt over het algemeen gebruikt voor de pagina titel. Het is dus verstandig om deze niet te gebruiken binnen je tekst.

Heading toevoegen

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

Algemene opties

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

Als je linksboven op 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.

In deze lijst staan onder andere een aantal andere blokken waarnaar je kunt veranderen mocht je toch geen heading willen gebruiken.

Daarnaast zie je . Hiermee kun je het complete blok verslepen naar een andere positie.

Tenslotte zie je de optie. Hiermee kun je het complete blok één stap omhoog of één stap omlaag verplaatsen.

Heading type veranderen

Als je het heading type wilt veranderen klik je op . In het pop up menu klik je dan de gewenste heading.

Uitlijnen

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

Heading opmaken

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

Voor doorgehaalde tekst.
Voor een inline afbeelding. Zoals dit icoon bijvoorbeeld.
Voor inline code, om aan te geven dat een stuk tekst code is.
Voor subscript, om de scheikundige naam van water, H₂O, te kunnen weergeven.
Voor superscript, om bijvoorbeeld kubieke meter, m³, aan te geven.
Voor het veranderen van de tekstkleur.
Voor het aangeven van een toetsencombinatie, bijvoorbeeld CTRL + A

Link aanmaken

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

Als je op 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. Dit zijn de blokopties. Deze optie kun je bekijken in Gutenberg: Blokken algemeen.

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, en kleurinstellingen 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 heading.

Kleurinstellingen

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

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

Heading (H5) met aanpassingen

Bovenstaande heading heeft als achtergrond hex-kleur code #2B7A78. Dat is de donkergroene kleur van het WP Goeroe thema. De tekstkleur van de heading is wit gemaakt.

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 heading met behulp van een CSS class omgezet wordt naar allemaal hoofdletters.

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