Omslagafbeelding blok
Het Omslagafbeelding block is een standaard WordPress-block (core/cover) waarmee je een afbeelding of video als achtergrond toont met een kleuroverlay en vrije inhoud (zoals een titel of tekst) erbovenop. Handig voor een korte introsectie of banner tussen andere content.
> SOIL-tip: Heb je meer functionaliteit nodig — parallax-scrolling, een kleurovergang bij scrollen, of uitgebreide breedte- en positie-instellingen — gebruik dan het Container block. Voor een kant-en-klare paginaheader met titel, tekst en knop kun je ook het Hero block overwegen.
Het block toevoegen
Zoek in de blokken-editor op “Omslagafbeelding” en voeg het block toe. Kies vervolgens een achtergrond:
- Uploaden — kies een nieuwe afbeelding of video van je computer
- Mediabibliotheek — selecteer eerder geüploade media
- Uitgelichte afbeelding — gebruik de uitgelichte afbeelding van de huidige pagina als achtergrond (blijft automatisch meelopen als de uitgelichte afbeelding wijzigt)
- Invoegen via URL — plak de directe URL van een externe afbeelding
Bij video ondersteunt SOIL/WordPress bestanden uit de mediabibliotheek, en ingesloten video’s van YouTube, Vimeo, VideoPress, Animoto, TikTok en WordPress.tv.
Overlay
| Instelling | Omschrijving |
|---|---|
| Overlay kleur | Effen kleur of kleurverloop over de achtergrondafbeelding/-video |
| Overlay opaciteit | Dekking van de overlay (0–100%) — hoger maakt de achtergrond donkerder/lichter en de tekst beter leesbaar |
Achtergrondgedrag
| Instelling | Omschrijving |
|---|---|
| Focuspunt | Sleep de indicator op de afbeelding om te bepalen welk deel zichtbaar blijft bij bijsnijden op kleinere schermen |
| Vaste achtergrond | De achtergrond blijft op zijn plek staan terwijl de bezoeker over de pagina scrolt (parallax-achtig effect) |
| Herhalende achtergrond | Herhaalt een kleine afbeelding als tegel in plaats van uit te rekken |
Afmetingen
| Instelling | Omschrijving |
|---|---|
| Minimum hoogte | Dwingt een minimale hoogte af voor het block, ongeacht de hoeveelheid inhoud |
| Beeldverhouding | Dwing een vaste verhouding af voor de achtergrond (bijv. 16:9, vierkant) |
Inhoud positioneren
Klik op het positierooster in de zijbalk (of blokwerkbalk) om te bepalen waar de inhoud binnen het block wordt uitgelijnd: boven/midden/onder gecombineerd met links/midden/rechts.
HTML-element
Onder Geavanceerd kies je het HTML-element waarin het block wordt gerenderd: Standaard (div), Header, Main, Section, Article, Aside of Footer. Kies een semantisch element als het block een betekenisvol onderdeel van de paginastructuur vormt.
Uitlijning en breedte
Kies via de blokwerkbalk Links/Rechts, Gecentreerd, Breed of Volledige breedte.
Kleuren, rand, schaduw en typografie
Via de zijbalk stel je (afhankelijk van het thema) op te maken:
| Instelling | Omschrijving |
|---|---|
| Tekstkleur (kop / overig) | Kleur van titels en overige tekst binnen het block |
| Rand | Kleur, dikte, stijl en radius van een rand rondom het block |
| Schaduw | Slagschaduw rondom het block |
| Typografie | Lettergrootte, en afhankelijk van het thema ook lettertype, regelhoogte en andere teksteigenschappen |
Stijl (duotoonfilter)
Onder Stijlen in de zijbalk kun je (afhankelijk van het actieve thema) een duotoonfilter toepassen op de achtergrondafbeelding of -video, waarmee deze wordt ingekleurd met twee kleuren uit de themakleuren.
Ruimte
Via het paneel Afmetingen in de zijbalk stel je de opvulling, marge boven/onder en de ruimte tussen blocks binnen de inhoud in.