WordPress Gids
Werken met het Paragraaf-blok

Paragraaf-blok icon
Paragraaf-blok icon

Het Paragraaf-blok is het meest gebruikte 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 eenvoudige versie van de oorspronkelijke – nu klassieke – editor. Hij biedt echter heel veel mogelijkheden, en deze mogelijkheden worden nog steeds uitgebreid.

Voeg een Paragraaf-blok toe aan de pagina

Plaats het Paragraaf-blok vanuit de sectie Algemene blokken of – indien deze hierbij staat – vanuit de sectie Meest gebruikt waar je deze wilt op de pagina.

Nu verwacht je een mooi blok dat wordt toegevoegd aan de pagina, maar je ziet alleen maar een blok zonder bloktype dat nog kan veranderen in ieder ander bloktype door op Blok toevoegen te klikken:

Paragraaf-blok toevoegen aan een pagina

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

Het Paragraaf-blok in de blok editor

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

Omzetten van het Paragraaf-blok naar een ander bloktype

Je kunt een blok omzetten naar een ander bloktype door in het blokmenu links op het bloklogo te klikken.

Het Paragraaf-blok kan worden omgezet naar een Kop-blok, een Lijst-blok, een Citaat-blok, een Voorgeformateerd-blok, of een Vers-blok.

De blokmenu opties van het Paragraaf-blok

Het blokmenu van het Paragraaf-blok bevat een aantal opties om de tekst in het blok op te maken. 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:

Tekst links uitlijnen
:alle tekst in het blok links uitlijnen
Tekst centreren
:alle tekst in het blok centreren
Tekst rechts uitlijnen
:alle tekst in het blok rechts uitlijnen
Vetgedrukt
:geselecteerde tekst vet maken. Toetsenbordcombinatie: Ctrl + B
Cursief
:geselecteerde tekst cursief maken. Toetsenbordcombinatie: Ctrl + I
Link
:link toevoegen aan de geselecteerde tekst. Toetsenbordcombinatie: Ctrl + K

En onder het Meer mooiere tekst regelaars menu (Dropdown):

Doorhalen
:geselecteerde tekst doorhalen
Inline afbeelding
:inline afbeelding toevoegen op de plaats van de cursor
Code
:inline code toevoegen op de plaats van de cursor

Het internet hangt aan elkaar met links. De ene pagina linkt naar de andere pagina, en de ene site naar de andere site.

Een link is eenvoudig toe te voegen aan je tekst:

  • Selecteer het stuk tekst waaraan je de link wilt toewijzen. De geselecteerde tekst heeft een lichtblauwe achtergrond.
  • Klik op het Link icon of gebruik de Ctrl + K toetsenbordcombinatie.
  • Er open een klein schermpje:
    Link popup bij link invoegen
  • Je kunt een link maken naar een andere pagina op je eigen site, of een link maken naar een pagina op een andere site:
    • Wil je linken naar een andere pagina op je eigen site, typ dan een woord dat in de titel van die pagina staat. Na twee letters begint de editor te zoeken – – naar pagina’s die de getypte lettercombinatie in de titel hebben staan. Hoe meer letters je typt, hoe preciezer de zoekfunctie werkt.

      Staat de juiste pagina in de lijst, klik dan op de naam om deze te selecteren:
      Zoekresultaat link popup bij link invoegen
    • Wil je linken naar een pagina op een andere site, typ of kopieer de link naar die pagina in het schermpje:
      Link popup bij link invoegen: externe link
  • Standaard opent een link in hetzelfde tabblad als de pagina, en overschrijft daarbij de pagina. Dat is niet erg wanneer je linkt naar een pagina op je eigen site, maar waarschijnlijk wil je de bezoeker niet wegsturen van je site naar een andere site. Je kunt er daarom voor kiezen om de link in een nieuw tabblad te openen.

    Klik hiervoor op het Link instellingen icon (Openen). Onder het schermpje met de link opent een extra schermpje dat je laat aangeven of je de link op een nieuwe tab wilt laten openen. Klik op de switch om dit aan te zetten wanneer je dat wilt:
    Link popup bij link invoegen: openen op nieuwe tab
  • Is alles ingesteld zoals je wilt, klik dan op het Toepassen icon (Toepassen), en de link is gemaakt.
  • Je kunt de link testen door op de linktekst te klikken en dan op de link te klikken. De link opent in een nieuwe tab.

Wil je een gemaakte link aanpassen of verwijderen, klik dan met de muis op de linktekst. Er opent een klein schermpje:

Link popup bij link invoegen: bewerken

Klik op Bewerken om de link te bewerken, of op Openen om de link wel of niet in een nieuwe tab te laten openen. Afsluiten met Toepassen.

Inline afbeeldingen toevoegen aan tekst

Soms wil je een afbeelding toevoegen middenin een stuk tekst. Dit noemen ze een afbeelding inline invoegen oftewel een inline afbeelding.

Een inline afbeelding in je tekst invoegen doe je als volgt:

  • Zet de cursor op de plaats waar je de afbeeldingen in de tekst wilt zetten.
  • Ga naar je blokmenu, en klik op het Meer mooiere tekst regelaars menu (Dropdown).
  • Klik op Inline afbeelding Inline afbeelding. Het Media selecteren of uploaden scherm opent.Media selecteren en uploaden: mediabibliotheek
  • In de Mediabibliotheek tab kun je een afbeelding selecteren die al in de mediabibliotheek staat, of je kunt een nieuwe afbeelding uploaden door de afbeelding naar dit scherm te slepen. Wil je één of meerdere afbeeldingen uploaden door deze te selecteren vanaf je computer, ga dan naar de Bestanden uploaden tab:
    Media selecteren en uploaden: bestanden uploaden
  • Klik op de gewenste afbeelding om deze te selecteren. Aan de rechterkant van het scherm staan de details van de geselecteerde afbeelding:
    Media selecteren en uploaden: bijlagedetails
  • Hier kun je de Alt-tekst, de Titel, het Onderschrift, en de Omschrijving van de afbeelding invullen of aanpassen. Dit is zeker aan te raden om de afbeelding beter vindbaar te maken in de zoekmachines (dit is een onderdeel van zoekmachine-optimalisatie of SEO).
  • Zijn alle gegevens naar tevredenheid ingevuld, klik dan rechtsonderin op de blauwe Selecteer knop.
  • De afbeelding staat nu op de plaats van de cursor in de tekst.

De inline afbeelding wordt getoond met een maximale breedte van 150px.

  • Is de inline afbeelding minder breed dan 150px, dan wordt de afbeelding op de juiste breedte getoond.
  • Is de inline afbeelding breder dan 150px, dan kun je de breedte aanpassen naar de gewenste breedte.
    • Klik op de inline afbeelding die je wilt vergroten. Er verschijnt een schermpje onder de afbeelding met de huidige breedte van de getoonde afbeelding in pixels (150):
      Instellen van de breedte van een inline afbeelding
    • Typ in het vak Breedte de breedte van de inline afbeelding. Klik op Toepassen om de nieuwe breedte toe te passen.
    • De afbeelding wordt vergroot met behoud van de juiste afmetingsverhoudingen.
    • Wil je de breedte weer aanpassen, klik dan weer op de inline afbeeldingen en voer de gewenste breedte in.

Een inline afbeelding aanpassen of verwijderen

Het aanpassen van een inline afbeelding is – nog – niet mogelijk. De enige manier om een inline afbeelding aan te passen is deze selecteren en verwijderen, en daarna vervangen door een andere inline afbeelding.

Inline code toevoegen aan tekst

Ben je programmeur en schrijf je over code, dan is het handig om code op je pagina te kunnen laten zien zonder dat deze code wordt gezien als code. Wordt code namelijk gezien als code, en wordt het uitgevoerd zodra de pagina wordt geladen, dan kunnen er allemaal vreemde zaken gebeuren. En dat willen we voorkomen.

Er is een Code-blok dat je code op een pagina laat plaatsen zonder dat het wordt uitgevoerd. De code wordt dan gezien als gewone tekst, maar krijgt wel een code-achtige opmaak, zoals Dit is een regeltje code.

Nu is een heel blok met code makkelijk om een deel van een programma te laten zien, maar sommige woorden die je in code gebruikt wil je in je gewone tekst kunnen laten zien alsof het code is. Een woord als <aside> wil je laten zien alsof het code is, maar je wilt niet dat een browser hier problemen mee krijgt.

Hiervoor gebruik je inline code. Dit doe je als volgt:

  • Typ je woorden code en selecteer de gewenste codewoorden zodat ze een lichtblauwe achtergrond hebben.
  • Ga naar je blokmenu, klik op het Meer mooiere tekst regelaars menu (Dropdown).
  • Klik op Code Inline code.

De geselecteerde tekst ziet er nu uit als code maar wordt door de browsers gezien als gewone tekst met een speciale opmaak. Deze speciale opmaak kun je trouwens naar believen aanpassen met – je raadt het al – code 😀

De instellingen sidebar van het Paragraaf-blok

De instellingen sidebar – aan de rechterkant van de editor – geeft je extra instellingen voor het blok.

Voor het Paragraaf-blok zijn de volgende instellingen beschikbaar:

Tekstinstellingen voor paragrafen

Tekstinstellingen voor het paragraaf-blo

De Tekstinstellingen geven je twee verschillende opties:

  • Je kunt de grootte van het lettertype instellen voor het hele blok. Dit kun je op twee manieren doen:
    • Je klikt op het dropdown-veld onder Grootte lettertype (waarschijnlijk staat hier nu Normaal in) en selecteert één van de door het gebruikte thema ingestelde groottes uit de lijst.
    • Wil je meer invloed op de grootte van het lettertype, klik dan in het veldje achter dropdown-veld en typ hier de grootte van het lettertype in, of gebruik de pijltjestoetsen.
      • Stel je een grootte in die niet door het thema is ingesteld, dan komt er in het dropdown-veld Aangepast te staan.
      • Stel je een grootte in die overeenkomt met één van de door het thema ingestelde groottes, dan verandert de naam in het dropdown-veld naar de naam die het gebruikte thema aan die grootte heeft gegeven.
    • Selecteer je een andere lettertype-grootte dan Normaal, dan wordt de knop Herstel achter de instelvakjes klikbaar. Deze knop zet de grootte weer terug naar de standaard Normaal instelling.
  • Je kunt de eerste letter (initiaal) van de paragraaf zo groot als vijf regels maken, zoals je vaker in oude boeken ziet. Wil je dit effect in je paragraaf, klik dan op de switch naast het woord Initiaal om deze optie aan te zetten (de switch wordt blauw):
    Grote initiaal bij een paragraaf

Kleurinstellingen voor paragrafen

Bij paragrafen geven de Kleurinstellingen je de mogelijkheid om de kleur van de achtergrond én de kleur van de tekst te veranderen.

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 waarschuwt de editor je met de volgende tekst in het Kleurinstellingen paneel:

De standaardkleuren waaruit je kunt kiezen zijn afhankelijk van het gebruikte thema. Het voorbeeld dat ik geef komt van een thema dat een vrij uitgebreid kleurenpalet heeft ingesteld.

Zijn de kleuren niet wat je zoekt, klik dan op de Aangepaste kleur link. Er verschijnt een colorpicker waarin je met de muis de gewenste kleur kunt selecteren:

Colorpicker

Heb je specifieke kleuren in het kleurenpalet van je site, zoals je bedrijfskleuren, dan kun je het hexadecimale getal van die kleur in het vak Kleurwaarde in hexadecimaal typen.

Selecteer je een kleur met de muis, dan komt de gekozen kleur ook als hex-getal in dit vak te staan.

Wil je de kleur weer wissen, klik dan op de Wis knop.

Geavanceerde styling

Belangrijk: onderstaande geldt alleen voor gevorderde gebruikers met verstand van de CSS taal. Weet wat je doet!

Zijn de standaard opties voor dit blok niet voldoende, en wil je meer invloed op het uiterlijk van het blok, maak dan gebruik van CSS voor de styling.

Geavanceerde CSS styling voor je blok

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.

Selecteer hiervoor het blok waarvoor je een stijl hebt gemaakt, en klik in de instellingen sidebar op Geavanceerd. Er verschijnt een vak met de naam Extra CSS class. Hierin zet je de naam van de gemaakte CSS class minus de punt.