WordPress Gids

Paragraaf-blok

Bijgewerkt tot WordPress versie 5.9.3

Het Paragraaf-blok is het standaard blok in de blok editor. Het zorgt ervoor dat je tekst aan een pagina of bericht kunt toevoegen. Daarnaast kun je tekst verfraaien en een inline afbeelding aan de paragraaf toevoegen.

Het Paragraaf blok is een heel eenvoudige versie van de oorspronkelijke editor. Het blok biedt echter veel mogelijkheden, en deze mogelijkheden worden nog steeds uitgebreid.

Paragraaf-blok in de blok editor van WordPress

Wanneer je het Paragraaf-blok op de pagina zet verwacht je een mooi blok dat wordt toegevoegd, maar je ziet alleen maar een blok zonder bloktype dat nog kan veranderen in ieder ander bloktype door het Blok toevoegen icoon – Blok toevoegen icoon – te klikken:

Blok zonder bloktype

Begin je echter te typen in het blok, dan verandert het blok van een blok zonder bloktype naar een Paragraaf-blok:

Paragraaf-blok

Je kunt een Paragraaf-blok ook op de pagina te plaatsen door aan het eind van een ander blok op Enter te drukken. Er wordt dan een blok zonder bloktype toegevoegd onder het vorige blok.

Blokmenu opties

Het blokmenu van het Paragraaf-blok bevat een aantal opties om de tekst in het blok op te maken:

Blokmenu van het Paragraaf-blok

Een aantal opties gelden voor alle tekst in het blok, sommige opties gelden alleen voor tekst die je met je muis of met het toetsenbord selecteert:

Blok icoon paragraph

Icoon voor het Paragraaf-blok. Klik op het icoon om het blok transformeren naar een ander tekstblok, om het blok in een kolom te zetten of om het blok in een groep op te nemen.

Sleep drag-handle

De Sleep optie laat je het blok verslepen naar een andere locatie op de pagina.

Het sleep icoon staat pas in het blokmenu wanneer er meerdere blokken op de pagina staan.

  1. Klik in het blokmenu met de linkermuisknop op het drag-handle icoon en hou de knop ingedrukt.
  2. Sleep het blok naar de plaats waar je deze wilt hebben. Beweeg met de muis tot je een blauwe lijn tussen de blokken ziet op de plek waar je het blok wilt neerzetten:

    Blok slepen in de blok editor van WordPress

    De plek waar het blok stond wordt weergegeven als een lichtgrijs blok.
  3. Laat de linkermuisknop los.
  4. Het blok staat nu op de plek waar je deze wilt hebben.

Omhoog/omlaag verplaatsen Blok verplaatsen

De Omhoog-omlaag optie laat je het blok één plaats naar boven of naar beneden verplaatsen. Dit is handig wanneer je het blok kleine stukjes tegelijk wilt verplaatsen.

De omhoog/omlaag iconen staan pas in het blokmenu wanneer er meerdere blokken op de pagina staan.

  1. Klik in het blokmenu op het Blok verplaatsen icoon (chevron-up voor omhoog, chevron-down voor omlaag).
  2. Het blok verspringt één plaats naar boven of naar beneden.
  3. Klik op het icoon tot het blok op de plaats staat waar je deze wilt hebben.

Wijzig tekstuitlijning align-left

De optie Wijzig tekstuitlijning laat je selecteren hoe je alle tekst in het blok wilt uitlijnen.

  1. Klik in het blokmenu op het align-left icoon (of het icoon van de al geselecteerde tekstuitlijning).
  2. Een vervolgkeuzelijst opent zich met de volgende opties:

    align-left: tekst links uitlijnen
    align-center: tekst centreren
    align right: tekst rechts uitlijnen

    Klik op de uitlijning dat je aan de tekst in het blok wilt geven.
  3. Het Wijzig tekstuitlijning icoon in het blokmenu verandert ook in het icoon van de gekozen tekstuitlijning.

Vet format-bold

De optie Vet laat je geselecteerde tekst vetgedrukt maken: vetgedrukte tekst.

  1. Selecteer met de muis of met de toetsen het stuk tekst dat je vetgedrukt wilt maken.
  2. Klik in het blokmenu op format-bold of gebruik toetsencombinatie Ctrl + B.
  3. De geselecteerde tekst is nu vetgedrukt.

Cursief format-italic

De optie Cursief laat je geselecteerde tekst cursief (schuin) maken: cursieve tekst.

  1. Selecteer met de muis of met de toetsen het stuk tekst dat je vet wilt maken.
  2. Klik in het blokmenu op format-italic of gebruik toetsencombinatie Ctrl + I.
  3. De geselecteerde tekst is nu cursief.

Link link

De optie Link laat je van geselecteerde tekst een link maken.

Meer blokgereedschappen chevron-down

Het blokmenu geeft je aantal mogelijkheden om de tekst in het blok verder aan te passen, zoals de tekst markeren, een inline afbeelding toevoegen of de tekst als toetsenbord-toetsen weer te geven.

Doorhalen format-strikethrough

De optie Doorhalen laat je geselecteerde tekst doorhalen: doorgehaalde tekst.

Je kunt hele woorden of zinnen doorhalen, maar ook enkele letters in een woord, bijvoorbeeld doorgehaald.

  1. Selecteer met de muis of met het toetsenbord het stuk tekst dat je wilt doorhalen.
  2. Klik in het blokmenu op chevron-down en klik op format-strikethrough Doorgehaald.
  3. De geselecteerde tekst is nu doorgehaald.

Je kunt van de doorgehaalde tekst weer gewone tekst maken door op de doorgehaalde tekst te klikken, in het blokmenu op chevron-down te klikken en dan weer op format-strikethrough Doorgehaald te klikken.

Inline afbeelding inline-image

In sommige gevallen is het handig om een afbeelding in de tekst zelf te kunnen zetten. Dit noem je een inline afbeelding. Zo zijn bijvoorbeeld de icoontjes op deze pagina afbeeldingen. Ook is dit momenteel nog de enige manier om afbeeldingen in tabellen en lijsten te zetten.

De inline afbeelding heeft helaas niet de opties die het Afbeelding-blok biedt.

  1. Klik met de muis op; de plek waar je een afbeelding wilt invoegen. Dat kan op iedere plaats in de tekst.
  2. Klik in het blokmenu op chevron-down en klik op inline-image Inline afbeelding. Scherm Media selecteren of uploaden opent:

    Mediabibliotheek bij Afbeelding-blok toevoegen in WordPress
  3. Klik op tabblad Mediabibliotheek op de afbeelding die je wilt invoegen of upload een afbeelding.
  4. Klik rechts onderin op de blauwe Selecteren knop: Selecteren knop in de blok editor
  5. De afbeelding is nu ingevoegd in de tekst.

De afbeelding die wordt ingevoegd is maximaal 150 pixels breed. Heb je een afbeelding ingevoegd die breder is dan 150px, dan kun je de breedte aanpassen:

  1. Klik op de ingevoegde afbeelding. Het volgende schermpje verschijnt onder de afbeelding:

    Schermpje breedte bij inline afbeelding in de blok editor van WordPress
  2. Vul de breedte in pixels in van de ingevoegde afbeelding en klik op keyboard-return.
  3. De afbeelding is – in verhouding – aangepast naar de nieuwe breedte.

Je kunt de inline afbeelding verwijderen door op de afbeelding te klikken om deze te selecteren en dan op Del te drukken.

Inline code code

De optie Inline code laat je geselecteerde tekst als computercode zien. Computercode wordt meestal in een eenvoudig lettertype geschreven waarbij elk teken dezelfde breedte heeft, bijvoorbeeld dit is code.

De meeste mensen zullen deze optie niet gebruiken, maar voor diegenen in de computerindustrie is het erg handig om deze optie te hebben bij het maken van documentatie.

  1. Selecteer met de muis of met het toetsenbord het stuk tekst dat je als code wilt weergeven.
  2. Klik in het blokmenu op chevron-down en klik op code Inline code.
  3. De geselecteerde tekst wordt nu weergegeven als code.

Je kunt van de code-tekst weer gewone tekst maken door op de code-tekst te klikken, in het blokmenu op chevron-down te klikken en dan weer op code Inline code te klikken.

Markeren text-color

De optie Markeren laat je geselecteerde tekst markeren. Zo kun je deze tekst laten opvallen. Zo kun je bijvoorbeeld de tekst highlighten, de tekst los van de rest van de tekst een kleur geven, of de tekst heel opvallend maken.

  1. Selecteer met de muis of met het toetsenbord het stuk tekst dat je wilt markeren.
  2. Klik in het blokmenu op chevron-down en klik op text-color Markeren. Het Markeren scherm opent zich:

    Markeren scherm in de blok editor van WordPress
  3. Klik op de Tekst tab om de tekstkleur aan te passen en op de Achtergrond tab om de achtergrond van de tekst aan te passen.

    De thema-kleuren onder de wit-grijze blokjes zijn afhankelijk van het gebruikte thema en van de thema-kleuren die je eventueel hebt ingesteld in de Customizer. Wil je één van deze kleuren kiezen, klik dan op het rondje. Je ziet het resultaat direct in je blok.
  4. Zijn de kleuren van je thema niet wat je zoekt, klik dan op het vlak met de wit-grijze blokjes. Er verschijnt een colorpicker waarin je met de muis op het grote vlak en de regenboog eronder de gewenste kleur kunt selecteren:

    Colorpicker bij Markeren in de blok editor van WordPress
  5. Wil je een specifieke kleur gebruiken en heb je hiervan het hexadecimale getal, de RGB code of de HSL code, klik dan op settings:

    Gedetailleerde invoeren bij de colorpicker bij Markeren in de blok editor van WordPress
  6. Hier zie je standaard de hexadecimale waarde (Hex). Wil je een andere hex-code, dan kun je deze in het vakje invullen. Wil je RGB of HSL gebruiken, klik dan op chevron-down en selecteer met de muis of de pijltjestoetsen de juiste methode, bijvoorbeeld RGB:

    Gedetailleerde invoer RGB bij de colorpicker bij Markeren in de blok editor van WordPress
    Je kunt nu voor RGB of HSL de getallen van de code invoeren en eventueel met de schuif naast de getallen de waarde eenvoudig aanpassen. Je ziet wat je doet in het vak boven de thema kleuren, inclusief de hex-waarde van de geselecteerde kleur.
  7. De geselecteerde tekst is nu gemarkeerd.

Zo kun je van gemarkeerde tekst weer gewone tekst maken:

  1. Klik op de gemarkeerde tekst.
  2. Klik in het blokmenu op chevron-down en dan op text-color Markeren.
  3. Klik in de Tekst tab en/of de Achtergrond tab op Wissen.

Subscript subscript

De optie Subscript laat je geselecteerde tekst als subscript (tekens die lager dan de normale schrijfhoogte gezet worden, meestal in iets kleiner lettertype) tonen: subscript tekst

Meestal gaat het om enkele letters in een woord die in subscript moeten worden geschreven, bijvoorbeeld H2O.

  1. Selecteer met de muis of met het toetsenbord het stuk tekst dat je in subscript wil zetten.
  2. Klik in het blokmenu op chevron-down en klik op subscript Subscript.
  3. De geselecteerde tekst is nu in subscript.

Je kunt van de subscript tekst weer gewone tekst maken door op de subscript tekst te klikken, in het blokmenu op chevron-down te klikken en dan weer op subscript Subscript te klikken.

Superscript superscript

De optie Superscript laat je geselecteerde tekst als superscript (tekens die hoger dan de normale schrijfhoogte gezet worden, meestal in iets kleiner lettertype) tonen: superscript tekst

Meestal gaat het om enkele letters in een woord die in superscript moeten worden geschreven, bijvoorbeeld km2.

  1. Selecteer met de muis of met het toetsenbord het stuk tekst dat je in superscript wilt zetten.
  2. Klik in het blokmenu op chevron-down en klik op superscript Superscript.
  3. De geselecteerde tekst is nu in superscript.

Je kunt van de superscript tekst weer gewone tekst maken door op de superscript tekst te klikken, in het blokmenu op chevron-down te klikken en dan weer op superscript Superscript te klikken.

Toetsenbord ingave button

De optie Toetsenbord ingave laat je geselecteerde tekst weergeven alsof het toetsen op je toetsenbord zijn, bijvoorbeeld Enter. Dit wordt vaak in documentatie gebruikt voor het visualiseren van toetsencombinaties zoals Ctrl + F5.

  1. Selecteer met de muis of met het toetsenbord het stuk tekst dat je als toets wilt weergeven.
  2. Klik in het blokmenu op chevron-down en klik op button Toetsenbord ingave.
  3. De geselecteerde tekst ziet er nu uit als een toetsenbordtoets.

Je kunt van de toetsenbord ingave tekst weer gewone tekst maken door op de toetsenbordtoets tekst te klikken, in het blokmenu op chevron-down te klikken en dan weer op button Toetsenbord ingave te klikken.

Meer opties more-vertical

De optie Meer opties opent een vervolgkeuzelijst met de volgende opties:

Meer instellingen tonen/verbergen: toont of verbergt de instellingen zijbalk.

Kopiëren: kopieert het blok. Waar het blok moet komen maak je een nieuw blok zonder bloktype en – druk je op Ctrl + V.

Dupliceren: dupliceert het blok. Het nieuwe blok komt onder het huidige blok te staan. Toetsencombinatie: Ctrl + Shift + D.

Invoegen voor: voegt een nieuw blok in vóór het huidige blok. Toetsencombinatie: Ctrl + Alt+ T.

Invoegen na: voegt een nieuw blok in na het huidige blok. Toetsencombinatie: Ctrl + Alt+ Y.

Verplaatsen naar: laat je het blok naar een andere plaats verplaatsen.

Als HTML bewerken: laat het blok zien als HTML, de code achter de pagina. Hier kun je aanpassingen maken in de HTML code.

Aan herbruikbare blokken toevoegen reusable-block: voegt het blok toe aan herbruikbare blokken.

Groeperen: groepeert het blok met eventuele andere blokken, zodat je het als één blok kunt bewerken.

<bloknaam> verwijderen: verwijdert het blok. Toetsencombinatie: Shift+ Alt+ Z.

Blok instellingen zijbalk

De blok instellingen zijbalk – aan de rechterkant van de editor – geeft je extra instellingen voor het blok. Selecteer om de instellingen te zien het blok en klik rechts bovenin op tab Blok.

Voor het Paragraaf-blok zijn de volgende instellingen beschikbaar:

Kleur

De sectie Kleur geeft je de mogelijkheid om de kleur van de tekst in het blok én de kleur van de achtergrond van het blok te veranderen:

Blokinstellingen - Kleur: tekst achtergrond selecte in de blok editor in WordPress

Klik op het item waarvan je de kleur wilt aanpassen, tekst of achtergrond. Ik kies hier voor Tekst:

Blokinstellingen - Kleur: themakleuren in de blok editor in WordPress

De kleuren onder Thema zijn afhankelijk van het gebruikte thema en van de thema-kleuren die je eventueel hebt ingesteld in de Customizer. Wil je één van deze kleuren kiezen, klik dan op het rondje. Je ziet het resultaat direct in je blok.

Het voorbeeld dat ik geef komt van het thema van deze site. Zijn de kleuren van je thema niet wat je zoekt, klik dan op de wit-grijze blokjes boven de themakleuren. Er verschijnt een colorpicker waarin je met de muis op het grote vlak en de regenboog eronder de gewenste kleur kunt selecteren:

Blokinstellingen - Kleur: colorpicker in de blok editor in WordPress

Wil je een specifieke kleur gebruiken en heb je hiervan het hexadecimale getal, de RGB code of de HSL code, klik dan op settings:

Blokinstellingen - Kleur: gedetailleerde invoer in de blok editor in WordPress

Hier zie je standaard de hexadecimale waarde (Hex). Wil je een andere hex-code, dan kun je deze in het vakje invullen. Wil je RGB of HSL gebruiken, klik dan op chevron-down en selecteer met de muis of de pijltjestoetsen de juiste methode:

Blokinstellingen - Kleur: kleurcode selectie in de blok editor in WordPress

Je kunt nu voor RGB of HSL de getallen van de code invoeren en eventueel met de schuif naast de getallen de waarde eenvoudig aanpassen. Je ziet wat je doet in het vak boven de thema kleuren, inclusief de hex-waarde van de geselecteerde kleur:

Blokinstellingen - Kleur: RGB invoer in de blok editor in WordPress
RGB selectie
Blokinstellingen - Kleur: HSL invoer in de blok editor in WordPress
HSL selectie

Ben je klaar met selecteren, klik dan in de pagina om de kleurenselectie te sluiten.

Wil je de kleur wissen om overnieuw te beginnen, klik dan op de Wissen knop.

Met kleurencombinaties moet je altijd opletten dat de tekst wel leesbaar blijft. Maakt de gekozen kleurencombinatie van achtergrond en tekst de inhoud moeilijk leesbaar, dan toont de editor de volgende waarschuwing onderaan de Kleur sectie:

Blok instellingen zijbalk: Kleur moeilijk leesbaar waarschuwing

Tekstinstellingen

Je kunt de eerste letter (initiaal) van de paragraaf zo groot als drie of meer regels maken, zoals je vaker in oude boeken ziet:

These are the voyages of the Starship Enterprise. Its continuing mission, to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no one has gone before. We need to neutralize the homing signal. Each unit has total environmental control, gravity, temperature, atmosphere, light, in a protective field. Sensors show energy readings in your area. We had a forced chamber explosion in the resonator coil. Field strength has increased by 3,000 percent.

Wil je dit effect in je paragraaf, klik dan op het schakelaar naast het woord Initiaal om deze optie aan te zetten (de schakelaar wordt blauw):

Blokinstellingen - Tekstinstellingen in de blok editor van WordPress

Typografie

De Typografie instellingen laten je standaard de afmeting van de tekst in het hele blok instellen. Standaard is de afmeting van de tekst de afmeting die je hebt ingesteld in de Customizer:

wpgids editor tekstinstellingen 1

Je kunt de afmeting van de tekst aanpassen voor het hele blok door op één de vier groottes in het balkje onder afmeting te klikken (klein, gemiddeld, groot of extra groot):

wpgids editor tekstinstellingen afmetingen

Wil je zelf een afmeting instellen, klik dan op settings:

wpgids editor tekstinstellingen afmetingen aangepast

Hier kun je het aantal pixels (PX), EM of REM (relatieve eenheden) instellen. Je kunt een andere eenheid kiezen door op het knopje naast het invoerveld te klikken. Achter Afmeting komt nu (Aangepast) te staan.

Wil je meer controle over de typografie, klik dan op plus om de extra mogelijkheden weer te geven:

wpgids editor tekstinstellingen dropdown

De standaard zichtbare instelling voor het blok (hier Lettertype grootte) staat aangevinkt en in het grijs. Klik op één of meerdere van de instellingen om deze te laten zien. Klik je ze allemaal stuk voor stuk aan (allemaal een vinkje), dan zie de Typografie sectie er als volgt uit:

wpgids editor tekstinstellingen alle instellingen

De Weergave vervolgkeuzelijst geeft je de mogelijkheid om uit de verschillende diktes en wel of niet cursief van het lettertype te kiezen.

De Hoofd/kleine letter optie laat je selecteren of de tekst helemaal in hoofdletters wordt weergegeven (format uppercase), in kleine letters (format lowercase) of dat ieder woord met een hoofdletter begint (format capitalize) zoals in veel Amerikaanse kopteksten. Klik op de optie die je wilt gebruiken.

De Letterafstand optie laat je de ruimte tussen de aparte letters instellen in pixels, em of rem. Dit werkt net zoals bij de Afmeting optie.

Geavanceerd

De Geavanceerd instellingen geeft je extra opties om het blok meer mogelijkheden te geven:

HTML Anker

Met een anker (anchor) kun je linken naar een specifiek blok op dezelfde pagina of een andere pagina op je site.

Blok instellingen zijbalk: HTML Anker

Met een anker markeer je een specifiek blok op een pagina. Maak je hier een link heen en klik je daarop, dan opent de pagina en scrolt deze naar het anker. Uiteraard moet eerst een anker op de desbetreffende pagina gemaakt worden voor je erheen kunt linken.

In veld HTML anker zet je een zelfverzonnen naam voor het blok waar je naar wilt linken. Nu kun je vanaf een andere plaats naar dit blok linken.

Extra CSS-class(es)

Wil je meer invloed op het uiterlijk van het blok, dan kun je gebruik maken van de CSS taal. Dit vergt wel wat technisch inzicht.

Blok instellingen zijbalk: Extra CSS class(es)

In je stylesheet, of met behulp van een CSS plugin als Simple CSS, maak je een class voor de inhoud van het blok. Deze link je vervolgens aan het blok of aan meerdere blokken van hetzelfde type.

In het veld Extra CSS-class(es) zet je de naam van de gemaakte CSS class minus de punt. Wil je meerdere classes aan een blok toewijzen, dan kun je die in het veld kwijt met een spatie tussen de namen.