Afbeelding

Het afbeeldingblok gebruik je om afbeeldingen toe te voegen.

1. Hoe voeg ik het blok toe? #

Klik op het icoon in de hoofdnavigatie of in het contentgebied. Typ ‘paragraaf’ en/of klik op het paragraaf blokicoon om het toe te voegen.

Vervolgens krijg je onderstaande opties te zien:

Upload: Een afbeelding vanaf je computer uploaden
Mediabibliotheek: Een afbeelding uit de mediabibliotheek selecteren
Invoegen vanaf een URL: Een afbeelding vanuit een cloudopslag toevoegen.

Zodra de afbeelding is toegevoegd, zie je aan de rechterzijde en onderkant halverwege een cirkel. Klik en sleep de cirkel om de grootte van de afbeelding aan te passen.

2. Blokwerkbalk #

De werkbalk van het afbeeldingsblok

Selecteer het blok zodat de blokwerkbalk weergegeven wordt. Hieronder leggen we uit wat elke functie in de blokwerkbalk doet.

2.1. Verander naar een ander type blok #

Standaard staat hier het geselecteerde blokicoon, dat per blok verschilt. Klik hierop om een ander blok te kiezen zonder dit blok te verwijderen en weer op het icoon te hoeven klikken. Kies een blok uit de lijst die na het klikken verschijnt.

2.2. Blok verplaatsen #

Het icoon met zes stippen heeft een sleepfunctie. Klik op de punten en houd ze vast om het blok te verplaatsen naar een nieuwe locatie. Naast de sleepfunctie staat een icoon met de pijlen omhoog en omlaag. Klik op één van de pijlen om het blok een plek omhoog of omlaag te schuiven.

2.3. Duotoon filter toevoegen #

Dit voegt een tweekleurige filter toe op de afbeelding. In het scherm dat opent staan elf cirkels met twee kleuren. Klik op één van de cirkels om die kleur toe te passen.

Onder de elf cirkels staan de kleuren van de gekozen cirkel in een balk. De linker staat voor de schaduwen en de rechter staat voor de hoogtepunten.

Klik op één van de twee cirkels om de kleuren aan te passen of klink op de links ‘Schaduwen’ en ‘Hoogtepunten’ eronder.

2.4. Verander afbeeldinguitlijning #

Pas de uitlijning van de afbeelding aan naar:

Geen
Wijd
Volle breedte
Links
Midden
Rechts

2.5. Bijschrift toevoegen #

Klik op deze optie om een tekstvak onder de afbeelding toe te voegen. Typ je bijschrift waar ‘Bijschrift toevoegen’ staat.

2.6. Link toevoegen #

Maak van een woord of stuk tekst een link naar een andere pagina.

2.7. Bijsnijden (bewerken) afbeelding #

Deze functie maakt het mogelijk om een afbeelding te bewerken zonder de block editor te verlaten. Klik hierop om een keuzemenu te openen met opties als:

Inzoomen
Verhouding aanpassen
Roteren

2.8. Tekst over afbeelding toevoegen #

Met deze optie voeg je tekst over de afbeelding toe. De afbeelding wordt donkerder, zodat de tekst duidelijker zichtbaar is. Typ de tekst of kies een blok bij ‘Typ / om een blok te kiezen’.

De afbeelding verandert hiermee in een omslagafbeelding (ook wel hero image genoemd).

De omslag afbeelding heeft twee extra functies:

Klik op dit icoon ( ) om de plaats van de tekst in te stellen. Het grote zwarte vierkantje in het icoon stelt de huidige plek voor. Klik op een van de kleinere grijze vierkantjes om de positie te wijzigen.
Klik op dit icoon ( ) om de volledige hoogte van de afbeelding weer te geven.

2.9. Toevoegen/ vervang #

Hiermee kan je afbeeldingen toevoegen en/of vervangen. Klik hierop om de mediabibliotheek te openen of een andere afbeelding te uploaden.

2.10. Meer opties #

Onder dit icoon vind je meer bewerkingsfuncties zoals:

Dupliceren
Verwijderen
Invoegen voor
Invoegen na
Bewerken in HTML

Hiervoor hebben we een apart overzicht gemaakt op deze pagina. Zoek naar de functie die je wil gebruiken.

3. Blokinstellingen #

De blokinstellingen zijn verdeeld in twee tabbladen: instellingen ( Instellingen icoon in blokinstellingen tabblad. ) en stijlen ( Stijlen icoon )

3.1. Instellingen #

Pas hier de werking van het blok aan.

3.1.1. Alternatieve tekst #

De alternatieve tekst (alt-tekst) wordt weergegeven als een afbeelding niet geladen kan worden. Ook schermlezers gebruiken deze tekst. Beschrijf nauwkeurig wat er op de afbeelding te zien is, maar houd het beknopt.

Is de afbeelding alleen decoratief? Laat de alt-tekst dan leeg.

3.1.2. Beeldverhouding #

De afbeelding wordt standaard rechthoekig ingeladen. In dit keuzemenu vind je de opties voor andere verhoudingen. Bijvoorbeeld:

9:16 (extra hoog)
1:1 (vierkant)
16:9 (extra breed)

Wil je de hoogte en breedte van de afbeelding handmatig aanpassen? Vul dan hier het aantal pixels in. Let op: Deze pixels staan vast en passen zich niet aan verschillende beeldschermen aan. Dit kan tot onverwacht gedrag (bugs) leiden.

3.1.4. Resolutie #

Kies hier een afmeting voor de afbeelding, zoals:

Voorbeeldweergave (thumbnail)
Gemiddeld
Groot
Volledige grootte (scherpste weergave)
Wallpaperformaat.

3.1.5. Uitvouwen bij een klik #

Schakel deze optie in als je wil dat bezoekers de afbeelding kunnen vergroten door erop te klikken. Zodra erop wordt geklikt, verdwijnt de achtergrond en wordt de afbeelding vergroot weergegeven.

3.1.6. Geavanceerd #

Bloknaam

Pas hier de naam van het blok aan. Deze vind je terug in het ‘Document overzicht’.

HTML-Anchor

Dit is een plek op je pagina waar je naartoe kan linken. Vul hier een woord in dat je ergens anders in een link gebruikt om ervoor te zorgen dat de bezoeker direct naar die plek wordt geleid.

Extra CSS-klasse

Gebruik dit invulveld om extra CSS-klassen toe te voegen.

3.2. Stijlen #

Pas hier de opmaak van het blok aan.

3.2.1. Stijlen #

Kies eenvoudig een stijl door op de knop te klikken.

3.2.2. Filters (duotone) #

Voeg een tweekleurige filter toe aan de afbeelding. In het scherm dat opent zie je elf cirkels met kleurcombinaties om uit te kiezen.

3.2.3. Rand #

Dit zijn de instellingen voor de rand:

Kies een kleur of laat het op transparant staan
Pas de breedte van de rand aan met de schuifregelaar of voer het in. Klik op ‘PX’ om voor een andere eenheid te kiezen. Meer uitleg over eenheden vind je in dit artikel.
Met het icoon ( ) staan alle zijden van de rand aan elkaar gekoppeld. Wil je niet alle randen even dik? Klik dan op dit icoon om de randen apart in te stellen.