Container blok
Met het Container block groepeer je andere blokken in een sectie met een eigen achtergrond, opvulling en breedte. Het is het meest gebruikte structuurblok voor het opbouwen van paginasecties.
Het block toevoegen
Zoek in de blokken-editor op “Container” en voeg het block toe aan de pagina. Voeg daarna blokken toe binnenin de container.
Uitlijning
Het block ondersteunt de WordPress-breedte-uitlijning. Kies in de werkbalk boven het block voor Breed of Volledig om de container breder dan de standaard inhoudskolom te maken.
Afmetingen
Hoogte
| Optie | Omschrijving |
|---|---|
| Normaal | De hoogte past zich aan op de inhoud (standaard) |
| Halve schermhoogte | De container is minimaal de helft van het scherm hoog |
| Volledige schermhoogte | De container vult het volledige scherm |
Inhoudsbreedte
Bepaal hoe breed de inhoud binnenin de container wordt weergegeven:
| Optie | Omschrijving |
|---|---|
| Half | Smal gecentreerd |
| Smal | Iets breder dan half |
| Klein | Compacte breedte |
| Normaal | Standaard inhoudbreedte (standaard) |
| Breed | Ruimer dan normaal |
| Volledig | Volledige breedte van de container |
Inhoudsuitlijning
Lijn de inhoud horizontaal uit binnen de container: Links, Gecentreerd of Rechts. Standaard is de uitlijning niet ingesteld.
Achtergrond
Achtergrondafbeelding of -video
Upload een afbeelding of video als achtergrond, of gebruik de uitgelichte afbeelding van het huidige bericht via de schakelaar Uitgelichte afbeelding gebruiken.
Bij een achtergrondafbeelding zijn extra opties beschikbaar:
| Optie | Omschrijving |
|---|---|
| Brandpuntskiezer | Bepaal welk deel van de afbeelding altijd zichtbaar blijft |
| Vaste achtergrondafbeelding | De afbeelding scrolt niet mee (CSS background-attachment: fixed) |
| Parallax | De afbeelding beweegt langzamer dan de pagina bij het scrollen |
| Parallax snelheid | Hoe snel de parallax beweegt: 0 = volledig vast, 10 = even snel als de inhoud (standaard 2) |
Achtergrondkleur
Kies een achtergrondkleur of kleurverloop via het kleurentabblad in de zijbalk. Je kunt ook een aparte kleur instellen voor donkere modus.
Donkere achtergrond
Schakel Donkere achtergrond in om een extra CSS-klasse toe te voegen die de tekst leesbaarder maakt op een donkere achtergrond.
Transparantie
Stel de dekking van de achtergrondkleur in (0–10, standaard 10 = volledig dekkend).
Achtergrondkleurovergang
Schakel Achtergrondkleurovergang in om de achtergrondkleur van de pagina soepel te laten overgaan naar de kleur van deze container terwijl de bezoeker er naartoe scrolt. Werkt alleen met een effen achtergrondkleur (geen verloop).
| Instelling | Omschrijving | Standaard |
|---|---|---|
| Overgangsduur | Hoe lang de overgang duurt in seconden | 0,5 s |
| Startpunt | Wanneer de overgang begint, bijv. top bottom | top center |
| Eindpunt | Wanneer de overgang eindigt, bijv. bottom top | bottom center |
Padding en marge
Stel de ruimte aan de binnenkant (opvulling) en buitenkant (marge) in, in rem:
| Instelling | Standaard |
|---|---|
| Padding boven | 3 rem |
| Padding onder | 3 rem |
| Padding links | 0 rem |
| Padding rechts | 0 rem |
| Marge boven | 0 rem |
| Marge onder | 0 rem |
Met de schaalfactoren voor tablet en mobiel pas je aan hoe de opvulling en marge worden verkleind op kleinere schermen. Een factor van 50% betekent dat alle waarden op mobiel de helft zijn van de desktop-waarden (standaard: tablet 100%, mobiel 50%).