WordPress Gids

Afbeelding-blok

Bijgewerkt tot WordPress versie 5.9.3

Het Afbeelding-blok laat je eenvoudig doen wat op bijna iedere pagina wel nodig is: een afbeelding op de pagina zetten. Afbeeldingen maken je site levendiger en je content aantrekkelijker.

De afbeelding kan op je site zelf staan, of op een andere site. Heb je een link naar een externe afbeelding, dan kun je deze in een Afbeelding-blok toevoegen aan je pagina.

Het Afbeelding-blok geeft je meer mogelijkheden dan alleen een afbeelding op een pagina zetten. Het laat je de afbeelding op diverse manieren uitlijnen, laat je de afbeelding vergroten en verkleinen in de blok editor, en nog veel meer.

Afbeelding-blok in de blok editor van WordPress

Afbeelding toevoegen aan de pagina

Je kunt een afbeelding op twee manieren op een pagina zetten:

  • door een Afbeelding-blok aan te maken met daarin een afbeelding.
  • door een afbeelding naar de pagina te slepen en op de goede plaats los te laten.

Afbeelding-blok op pagina zetten

De eenvoudigste manier om een Afbeelding-blok toe te voegen:

  1. Klik op de blok inserter knop (Blok inserter) zodat de lijst met blokken opent.
  2. Klik met de linker muisknop op het Afbeelding-blok in de sectie Media en hou de muisknop ingedrukt.
  3. Sleep het blok naar waar je deze wilt op de pagina. De blauwe lijn laat zien waar het blok wordt geplaatst:

    Afbeelding-blok toevoegen door slepen in WordPress
  4. Laat de muisknop los. Het blok staat nu op de pagina.

Wanneer het Afbeelding-blok is geplaatst vraagt het om een afbeelding:

Drie manieren om een afbeelding toe te voegen aan een Afbeelding-blok in WordPress

Je hebt drie opties om de afbeelding op de site te selecteren:

Uploaden

  1. Klik op Uploaden. Een explorer scherm opent waarin je de afbeelding kunt selecteren op je computer om deze te uploaden.
  2. Ga naar de folder waar de afbeelding staat en klik op de afbeelding (hier draak-01):

    Explorer scherm bij afbeelding toevoegen in WordPress
  3. Klik op de Openen knop om de afbeelding te selecteren.
  4. De afbeelding staat nu in het Afbeelding-blok op je pagina.

Mediabibliotheek

  1. Klik op Mediabibliotheek om een afbeelding te selecteren die al in de Mediabibliotheek staat of die je nu wilt uploaden naar de Mediabibliotheek. De mediabibliotheek opent:

    Mediabibliotheek bij Afbeelding-blok toevoegen in WordPress
    In de mediabibliotheek heb ik de afbeelding met de naam draak-28 geselecteerd. Dit zie je aan het vinkje in het blauwe vak rechts bovenin de afbeelding: Blauw vinkje in Mediabibliotheek in WordPress
  2. In de rechter sidebalk staan de gegevens van de afbeelding. Hier kun je de Alt-tekst, de Titel, eventueel het Bijschrift 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 zoekmachineoptimalisatie of SEO).
  3. Zijn alle gegevens naar tevredenheid ingevuld, klik dan rechts onderin op de blauwe Selecteren knop: Selecteren knop in de blok editor

Moet de afbeelding nog in de mediabibliotheek worden geladen, dan kun je deze het eenvoudigst met de muis vanaf je computer direct naar de mediabibliotheek slepen:

  1. Ga naar de afbeelding die je in de mediabibliotheek wilt zetten, klik met de linker muisknop op de afbeelding en hou de muisknop ingedrukt.
  2. Sleep de afbeelding naar de mediabibliotheek in de browser waar de andere afbeeldingen staan.
  3. Laat de muisknop los. De afbeelding wordt nu geüpload naar de mediabibliotheek.

Invoegen via URL

Staat de afbeelding op een andere website dan je eigen site, dan kun je die afbeelding nog steeds gebruiken op de pagina:

  • Kopieer de URL van de externe afbeelding die je op de pagina wilt zetten.
  • Klik in het Afbeelding-blok op Invoegen via URL. Er verschijn een klein veldje onder de knop:

    Invoegen via link bij Afbeelding-blok toevoegen in WordPress
  • Plak de URL van de afbeelding in het vakje en klik op keyboard-return.
  • De afbeelding staat nu in het Afbeelding-blok op je pagina.

Deze praktijk heet trouwens hotlinken en wordt meestal niet op prijs gesteld vanwege onder meer copyright. Daarnaast ben je afhankelijk van de beheerder van de afbeelding of deze blijft staan op die plaats. Ik kies altijd voor het zelf laden van een afbeelding in mijn eigen mediabibliotheek.

Slepen en loslaten (drag and drop)

De tweede manier om een afbeelding aan de pagina toe te voegen is de afbeelding slepen en loslaten op de gewenste plek (drag and drop).

  1. Ga naar de afbeelding op je computer die je op de pagina wilt zetten, klik met de linker muisknop op de afbeelding en hou de muisknop ingedrukt.
  2. Sleep de afbeelding naar de tab van de browser met de pagina waarin de afbeelding moet komen te staan. Het muispijltje is veranderd in een kleine versie van de afbeelding en daaronder een pijl en de tekst Kopiëren:

    Afbeelding toevoegen door slepen in WordPress
  3. Beweeg met de muis over de tekst in de pagina tot je een blauwe lijn ziet op de plek waar de afbeelding moet komen.
  4. Laat de muisknop los. Het blok wordt nu geüpload naar de mediabibliotheek.
  5. Op de plek waar de afbeelding is losgelaten staat nu een nieuw afbeelding-blok met de afbeelding erin.

Bijschrift aan afbeelding toevoegen

Bij sommige afbeeldingen wil je misschien onder de foto een bijschrift (ook wel onderschrift) plaatsen. Bijvoorbeeld wanneer je een foto van iemand plaatst en de naam eronder wilt zetten. Dit kan op twee manieren:

  1. Klik op de afbeelding. Het blok is nu actief (blauwe lijn om het blok).
  2. Onder de afbeelding staat de tekst Bijschrift toevoegen:

    Bijschrift toevoegen aan afbeelding in de blok editor van WordPress
  3. Klik op de tekst en typ het bijschrift van de afbeelding. Je kunt de tekst stylen via het menuutje dat boven de tekst verschijnt. Klik op chevron-down voor meer opties om de tekst verder te stylen.

of

  1. Klik op de afbeelding. Het blok is nu actief (blauwe lijn om het blok).
  2. Klik in het blokmenu op Vervangen:

    Afbeelding vervangen scherm in het Afbeelding-blok in WordPress
  3. Klik op Mediabibliotheek media openen. De mediabibliotheek opent zich:

    Mediabibliotheek bij Afbeelding-blok toevoegen in WordPress
  4. Rechts staan de gegevens van de afbeelding. Het derde vakje is Bijschrift. Typ hier het bijschrift van de afbeelding.

Grootte aanpassen met de muis

Naast dat de grootte van de afbeelding vanuit de zijbalk kan worden aangepast, kun je de afbeelding ook met de muis vergroten of verkleinen:

  1. Klik op de afbeelding. Het blok is nu actief (blauwe lijn om het blok).
  2. Aan de rechterkant of linkerkant van de afbeelding (afhankelijk van de uitlijning) en aan de onderkant van de afbeelding verschijnen nu twee bolletjes:

    Afmeting afbeelding aanpassen met de muis in de blok editor van WordPress
    Aan deze kanten kun je met de muis de grootte van de afbeelding aanpassen.
  3. Ga met de muis over één van de kanten van de afbeelding tot de muispointer veranderd in een split icoon: divider-split-vertical (zijkant) of divider-split-horizontal (onderkant).
  4. Klik met de linkermuisknop en hou deze ingedrukt.
  5. Beweeg nu met de muis om de afbeelding groter of kleiner te maken. De afbeelding verandert proportioneel: je krijgt dus geen verwrongen afbeelding.
  6. Is de afmeting van de afbeelding zoals je deze wilt, laat dan de muisknop los.

Blokmenu opties

Het blokmenu van het Afbeelding-blok bevat een aantal opties om de afbeelding in het blok op te maken en aan te passen:

Blokmenu van het Afbeelding-blok

Blok icoon image

Icoon voor het Afbeelding-blok. Klik op het icoon om het blok transformeren naar een ander mediablok, 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 uitlijning align-none

De optie Wijzig uitlijning laat je het blok uitlijnen. De mogelijkheden zijn afhankelijk van je blok en je thema.

  1. Klik op het align-none icoon (of het icoon van de al geselecteerde blokuitlijning).
  2. Een vervolgkeuzelijst opent zich met enkele of alle van de volgende opties:

    align-none: geen
    position-left: links uitlijnen
    position-center: centreren
    position-right: rechts uitlijnen
    stretch-wide: wijde breedte
    stretch-full-width: volledige breedte

    Klik op het icoon van de gewenste uitlijning.
  3. Het Wijzig uitlijning icoon in het blokmenu verandert ook in het icoon van de gekozen uitlijning.

Bij links uitlijnen en rechts uitlijnen komt het blok naast het volgende blok en eventueel daarop volgende blokken te staan.

Link link

Aan de afbeelding kun je een link toevoegen. Zo kun je de afbeelding laten verwijzen naar een andere pagina of andere website, naar het mediabestand (de originele afbeelding zelf) of naar de bijlagepagina.

  1. Klik in het blokmenu op link. Het Link toevoegen scherm verschijnt onder het blokmenu:

    Link toevoegen scherm in het Afbeelding-blok in WordPress
  2. Er zijn drie linkopties:
    1. Een URL plakken of een interne pagina zoeken.
      Plak de URL van de externe website of pagina waarnaar je wilt linken en klik op keyboard-return.

      Wil je naar een interne pagina linken, typ dan de naam van de pagina, bericht, categorie of tag waarnaar je wilt linken in het zoekvak. Na twee letters begint de zoekfunctie met zoeken. Hoe meer letters, hoe beter de resultaten. Klik op het resultaat waarnaar je wilt linken en klik op keyboard-return.
    2. Linken naar het Mediabestand.
      De originele afbeelding wordt dan met een zwarte achtergrond geladen in de browser. Maak je gebruik van een lightbox plugin – zoals Simple Lightbox – dan kun je de afbeelding in een lightbox over de pagina laten zien.
    3. Linken naar de Bijlagepagina.
      De afbeelding wordt dan getoond in een eigen pagina met de layout van de website.

De link wordt standaard geopend in dezelfde tab als de pagina. Dat is voor een interne pagina meestal de bedoeling, maar voor een externe pagina niet. Die wil je in een aparte tab openen zodat de bezoeker je website niet verlaat. Dit en meer kun je apart instellen.

  1. Heb je een URL geplakt of een interne pagina toegevoegd, dan is het Link toevoegen scherm nog open. Heb je een link gemaakt naar het Mediabestand of de Bijlagepagina, dan moet je weer op link klikken om het Link toevoegen scherm weer te openen.
  2. Klik naast de link op chevron-down. Het Linkopties scherm wordt geopend:

    Linkopties scherm in het Afbeelding-blok in WordPress
  3. Het Linkopties scherm heeft drie opties:
    1. Klik op het schuifje naast In nieuw tabblad openen om deze aan te zetten en ervoor te zorgen dat de link in een nieuw tabblad wordt geopend: Nieuw tabblad openen schuifje bij link maken in WordPress
    2. In het vak Linkrelatie kun je aangeven wat je relatie is met de externe site waarnaar je linkt. Dit doe je met XFN. Je kunt één of meerdere relaties – gescheiden met een spatie – in het vak ingeven. Een linkrelatie is niet verplicht en zal door niet veel gewone gebruikers gebruikt worden.
    3. In het vak Link CSS-class kun je eventueel een CSS class ingeven die je hebt gemaakt om de link op een speciale manier wilt vormgeven. Je kunt één of meerdere classes – gescheiden met een spatie – in het vak ingeven.
    4. Klik op of buiten de afbeelding om het Link toevoegen scherm te sluiten.

Wil je de link veranderen, doe dan het volgende:

  1. Klik op de afbeelding en dan in het blokmenu op link.
  2. Klik op closeom de link te verwijderen of op pencil om de link te bewerken.
  3. Nu ben je weer in het Link toevoegen scherm en kun je een andere link aanmaken.

Wil je de link helemaal verwijderen, dan kan dat uiteraard ook:

  1. Klik op de afbeelding en dan in het blokmenu op link.
  2. Klik op closeom de link te verwijderen.
  3. Klik op of buiten de afbeelding om het Link toevoegen scherm te sluiten.

Bijsnijden crop

Het Afbeelding-blok laat je de afbeelding beperkt aanpassen. Zo kun je de afbeelding bijsnijden, inzoomen, de beeldverhouding aanpassen en de afbeelding roteren.

  1. Klik in het blokmenu op crop. Het blok verandert in een bewerkingsscherm, en het blokmenu krijgt er een aantal icoontjes en opties bij:

    Afbeelding-bewerkingsscherm in Afbeelding-blok in WordPress
    Het grijze vlak is zo breed als de tekst op je pagina, en de hoogte is in verhouding met de afbeelding. De afbeelding blijft bij het bewerken altijd in verhouding!

Je kunt de afmetingen van de afbeelding op twee manieren veranderen:

  1. Klik op de afbeelding zelf en vergroot en verklein de afbeelding met je muiswiel, of
  2. Klik op search. Onder het blokmenu verschijnt het Zoom scherm:

    Zoomen in het afbeelding-bewerkingsscherm in Afbeelding-blok in WordPress
  3. Je kunt de afbeelding nu – met de muis op de slider of door het percentage te veranderen – van 100% tot drie keer zo groot (300%) inzoomen.

    De afbeelding kan niet kleiner worden dan de maat die je in de zijbalk van het afbeelding-blok hebt geselecteerd.
  4. Klik op Toepassen om de aanpassing te bewaren of op Annuleren om de aanpassing terug te draaien.

Je kunt de beeldverhouding van de afbeelding aanpassen:

  1. Klik op aspect-ratio. Onder het blokmenu verschijnt het Aspect ratio scherm:

    Aspect ratio scherm in het afbeelding-bewerkingsscherm in Afbeelding-blok in WordPress
  2. Klik op de aspect ratio die je wilt toepassen. Dit zal een gedeelte van de afbeelding selecteren, bijvoorbeeld 10:16:

    Aspect ratio voorbeeld in het afbeelding-bewerkingsscherm in Afbeelding-blok in WordPress
  3. Met de muis kun je de afbeelding verschuiven tot je tevreden bent wat in het lichte gedeelte staat.
  4. Klik op Toepassen om de aanpassing te bewaren of op Annuleren om de aanpassing terug te draaien.

En je kunt de afbeelding roteren:

  1. Klik op rotate right. De hele afbeelding roteert een kwartslag naar rechts:

    Roteren voorbeeld in het afbeelding-bewerkingsscherm in Afbeelding-blok in WordPress
  2. Door op rotate right te blijven klikken kun je de afbeelding helemaal roteren.
  3. Bij sommige rotaties wordt ook de beeldverhouding aangepast. Dit kun je verder aanpassen door te klikken op aspect-ratio en een andere aspect ratio te selecteren.
  4. Klik op Toepassen om de aanpassing te bewaren of op Annuleren om de aanpassing terug te draaien.

Alle opties onder het bewerken kun je combineren. Je kunt dus inzoomen, de afbeelding roteren en de beeldverhouding aanpassen.

Tekst over afbeelding toevoegen overlay-text

Het kan handig zijn om een tekst over een afbeelding te plaatsen. Dat is niet mogelijk in het Afbeelding-blok maar wel bij het Omslagafbeelding-blok:

  1. Klik op de afbeelding, en in het blokmenu op overlay-text. Het Afbeelding-blok verandert naar een Omslagafbeelding-blok:

    Afbeelding-blok omgezet naar Omslagafbeelding-blok in WordPress
  2. Het Omslagafbeelding-blok heeft standaard de breedte van de editor, wat de breedte van de tekst op de pagina is. De breedte kun je niet apart instellen, maar de hoogte wel.

    Aangezien de afbeelding in verhouding vaak te hoog is zie je ook niet de hele afbeelding. Dit kun je met het instellen van de hoogte aanpassen:
    1. Aan de onderkant van de afbeelding verschijnt een bolletje. Aan die kanten kun je met de muis de grootte van de afbeelding aanpassen.
    2. Ga met de muis over de onderkant van de afbeelding tot de muispointer veranderd in een split icoon: divider-split-horizontal .
    3. Klik met de linkermuisknop en hou deze ingedrukt. Beweeg nu met de muis om de afbeelding groter of kleiner te maken. De afbeelding verandert proportioneel: je krijgt dus geen verwrongen afbeelding. Is de hele afbeelding te zien en maak je het blok nog groter, dan zoomt de editor in op de afbeelding. Hier heb je dan wel een goede kwaliteit afbeelding voor nodig.
    4. Is de afmeting van de afbeelding zoals je deze wilt, laat dan de muisknop los.

In het midden van het blok staat een paragraaf-blok. Hiermee kun je alles wat het paragraaf-blok los ook kan.

Klik op de tekst, schrijf je eigen tekst, en maak de tekst op zoals je wilt. Bijvoorbeeld:

Voorbeeld van een Omslagafbeelding-blok in WordPress

Alle opties voor het Omslagafbeelding-blok laat ik zien op die pagina.

Duotoon filter toepassen swatch

De Duotoon filter toepassen optie plaatst een tweekleurig filter over de afbeelding. De originele afbeelding blijft hierbij gewoon bewaard.

Wil je het filter verwijderen, klik dan op de kleurcombinatie in het blokmenu en klik op Wissen.

  1. Klik in het blokmenu op swatch. Het Duotoon scherm verschijnt onder het blokmenu:

    Duotoon scherm in het Afbeelding-blok in WordPress
  2. Er zijn een aantal kleureffecten ingesteld die je kunt gebruiken:

    Standaard kleurcombinaties in het duotoon scherm in het Afbeelding-blok in WordPress
  3. Zit er een leuke combinatie bij die je wilt proberen, klik dan op het rondje met die kleuren, bijvoorbeeld:

    Voorbeeld kleurcombinatie 1 in het duotoon scherm in het Afbeelding-blok in WordPress
  4. De kleurcombinatie is nu ook toegepast. Wil je toch een andere combinatie. klik dan op de kleurcombinatie in het blokmenu en selecteer een andere combinatie.

Je kunt ook zelf een kleurcombinatie samenstellen:

  1. Klik in het blokmenu op swatch of de al gekozen kleurcombinatie:

    Duotoon scherm in het Afbeelding-blok in WordPress
  2. Onder de standaard kleurcombinaties staat een balk met twee kleuren: de kleur voor de schaduwen (links) en de kleur voor de hoogtepunten (rechts). Je kunt ook op Schaduwen of Hoogtepunten klikken, maar de kleurselectie werkt hier minder goed dan met deze methode:

    Kleurenbalk in het duotoon scherm in het Afbeelding-blok in WordPress
  3. Klik in het rondje op de kleur die je wilt aanpassen.  Er verschijnt een colorpicker waarin je met de muis op het grote vlak en de regenboog eronder de gewenste kleur kunt selecteren:
    Kleurkeuzescherm in het duotoon scherm in het Afbeelding-blok in WordPress
  4. 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 invoer bij het kleurkeuzescherm in het duotoon scherm in het Afbeelding-blok in WordPress
  5. 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:

    Codeselectie bij gedetailleerde invoer bij het kleurkeuzescherm in het duotoon scherm in het Afbeelding-blok in WordPress

Afbeelding vervangen

je zet weleens een afbeelding op een pagina waarvan je achteraf spijt hebt. Gelukkig is het heel eenvoudig om de afbeelding te vervangen.

Klik in het blokmenu op Vervangen. het volgende scherm opent onder het blokmenu:

Afbeelding vervangen scherm in het Afbeelding-blok in WordPress

Het scherm geeft je drie mogelijkheden om de afbeelding te vervangen:

  1. Andere afbeelding uit de mediabibliotheek selecteren:
    1. Klik op Mediabibliotheek openen media. De mediabibliotheek opent zich:

      Mediabibliotheek bij Afbeelding-blok toevoegen in WordPress
    2. Klik op de afbeelding die je wilt gebruiken en klik rechts onderin op de blauwe Selecteren knop: Selecteren knop in de blok editor
    3. De afbeelding is vervangen in het Afbeelding-blok.
  1. Nieuwe afbeelding uploaden naar de mediabibliotheek:
    1. Klik op Uploaden upload. Een explorer scherm opent waarin je de afbeelding kunt selecteren op je computer om deze te uploaden.
    2. Ga naar de folder waar de afbeelding staat en klik op de afbeelding (hier draak-01):

      Explorer scherm bij afbeelding toevoegen in WordPress
    3. Klik op de Openen knop om de afbeelding te selecteren.
    4. De afbeelding is vervangen in het Afbeelding-blok.
  1. de URL van de (externe) afbeelding wijzigen:
    1. Kopieer de URL van de (externe) afbeelding die je op de pagina wilt zetten.
    2. Klik op Huidige Media URL pencil. Er verschijn een klein veldje onder de optie:

      URL vervangen in het Afbeelding-blok in WordPress
    3. Verwijder de URL die er staat, plak de nieuwe URL in het vakje en klik op keyboard-return.
    4. De afbeelding is vervangen in het Afbeelding-blok.

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 Afbeelding-blok zijn de volgende instellingen beschikbaar:

Stijlen

De Stijlen instellingen laten je kiezen of je een afbeelding met rechte hoeken of met afgeronde hoeken wilt laten zien:

Blok instellingen zijbalk Afbeelding: Stijlen

Standaard is met rechte hoeken. Wil je de hoeken van de afbeelding afgerond hebben, dan klik je op Afgerond.

Wil je in de hele site alle Afbeelding-blokken dezelfde stijl geven, klik dan op de vervolgkeuzelijst onder Standaard stijl en selecteer Standaard of Afgerond.

Wil je het terug veranderen voor de hele site, klik dan op welk Afbeelding-blok dan ook en stel in de blok instellingen zijbalk onder Stijl de standaard stijl in.

Afbeelding-instellingen

De Afbeelding-instellingen laten je een aantal basis-instellingen doen voor de afbeelding:

Alt tekst

De Alt-tekst of alternatieve tekst kun je zien als de titel van de afbeelding. Hierin beschrijf je wat er op de afbeelding te zien is.

Blok instellingen zijbalk Afbeelding: Afbeelding-instellingen - Alt tekst

Bezoekers met een visuele beperking gebruiken screen readers die de alt-tekst hardop voorleest. Daarnaast kunnen zoekmachines de afbeelding met een alt-tekst beter plaatsen in de zoekresultaten. Altijd invullen dus.

Grootte afbeelding

Bij Grootte afbeelding kies je welk afbeeldingsformaat WordPress moet laden. De afbeeldingsformaten zijn de formaten die WordPress maakt wanneer je een afbeelding op de site zet. Deze formaten kun je terugvinden onder Instellingen > Media in het admin navigatiemenu.

Blok instellingen zijbalk Afbeelding: Afbeelding-instellingen - Grootte afbeelding

Afhankelijk van de grootte van de originele afbeelding staan in de vervolgkeuzelijst de verschillende formaten die WordPress van deze afbeelding heeft. Een kleinere afbeelding heeft minder formaten dan een grote afbeelding.

WordPress bepaalt zelf welk formaat wordt geladen voor het beste resultaat, maar soms kan het aanpassen van het formaat de kwaliteit van de afbeelding ten goede komen.

Heb je een grote afbeelding die je klein op de pagina zet, kies dan niet voor een grotere maat dan je nodig hebt. Dat maakt de pagina groter (in KB en MB) dan nodig, en vertraagt het laden van de pagina.

Afbeelding grootte

Bij Afbeelding grootte (ja, gewoon de vorige optienaam omgedraaid…  🙃) kun je de grootte van de afbeelding op de pagina aanpassen.

Blok instellingen zijbalk Afbeelding: Afbeelding-instellingen - Afbeelding grootte

Dit kun je doen door de breedte en de hoogte aan te passen (typen of met pijltjes) of door op een percentage van de grootte te klikken. Ben je niet tevreden met het resultaat, klik dan op Herstellen.

Buiten deze twee opties in de zijbalk kun je de grootte van de afbeelding ook aanpassen met de muis.

Geavanceerd

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

Titel attribuut

De titel beschrijft de afbeelding. Als de browser het ondersteunt wordt de titel getoond als een tooltip wanneer de bezoeker met de muis over de afbeelding beweegt:

Blok instellingen zijbalk: Titel attribuut

Het titel attribuut wordt niet veel gebruikt en wordt ook niet overal ondersteund.

Afbeelding met tooltip in WordPress

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.