WordPress Gids
Werken met het Kop-blok

Kop-blok icon
Kop-blok icon

Het Kop-blok laat je een koptekst (heading) toevoegen aan je pagina. Koppen helpen bij het verdelen van de pagina in logische en hiërarchische delen, van hoofdzaak tot aan bijzaak.

Daarnaast helpen koppen de bezoeker bij het scannen van de pagina.

Hoe gebruik je koppen in je tekst

Koppen op websites hebben maximaal zes niveaus: van H1 tot aan H6. Om aan te geven dat koppen anders zijn dan de normale tekst, is de koptekst meestal groter, hebben ze vaak een andere kleur, of zijn ze van een ander lettertype dan de de overige tekst.

Op een webpagina is de paginatitel standaard een H1 kop, het hoogste niveau. De H1 kop staat bovenaan de tekst, en heeft meestal de grootste letters op de pagina.

Een goed geschreven pagina verdeelt de tekst verder in logische delen, gescheiden door subkoppen van niveau H2.

Is het nodig om de delen nog verder onder te verdelen in kleinere logische delen, bijvoorbeeld omdat een deel erg lang is, dan kun je verder gebruik maken van koppen van niveau H3.

Koppen van niveau H3 of H4 zijn meestal het laagste niveau dat gebruikt wordt op pagina’s. Je kunt echter gaan tot aan H6.

De verschillende niveaus worden ook aangegeven met de grootte van de letters in de kop. Een H1 kop is het grootst, een H6 kop het laagst.

Een logische verdeling van koppen in een pagina ziet er bijvoorbeeld als volgt uit:

  • H1
    • H2
      • H3
      • H3
    • H2
      • H3
      • H3
    • H2

Voeg een Kop-blok toe aan de pagina

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

Omzetten van het Kop-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 Kop-blok kan worden omgezet naar een Paragraaf-blok of een Citaat-blok.

De blokmenu opties van het Kop-blok

Het blokmenu van het Kop-blok bevat een aantal opties om…

Kop-blok 2
:verander de gehele koptekst naar niveau H2
Kop-blok 3
:verander de gehele koptekst naar niveau H3
Kop-blok 4
:verander de gehele koptekst naar niveau H4
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 Kop-blok

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

Voor het Kop-blok zijn de volgende instellingen beschikbaar:

Kopinstellingen

Kopinstellingen voor het kop-blok

De Kopinstellingen geven je de mogelijkheid een niveau te selecteren voor de koptekst, en om de koptekst uit te lijnen.

Niveau’s voor kopteksten

In het blokmenu kun je kiezen uit de drie meestgebruikte koptekstniveaus: H2, H3, en H4. Maak je van een bestaande tekst een kop, of maak je een nieuwe kop, dan is het een kop van niveau H2.

In sommige gevallen wil je de mogelijkheid hebben om alle bestaande niveaus te gebruiken in je tekst. De Niveau-instellingen laten je kiezen uit alle koptekst-niveaus, van H1 tot en met H6.

Let goed op: op een pagina mag maar één H1 kop staan. De paginatitel is standaard een H1 kop, dus wil je een H1 op je pagina zetten, dan moet je de paginatitel kunnen verbergen. Sommige thema’s en plugins laten je dit doen, maar wees zeker van je zaak.

Tekstuitlijning voor kopteksten

Met Tekstuitlijning kun je de koptekst links of rechts uitlijnen, of centreren:

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

Kleurinstellingen

Kleurinstellingen voor het kop-blok

De Kleurinstellingen geven je de mogelijkheid om de kleur van de tekst van de koptekst te veranderen.

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.