Hero blok
Met het Hero block maak je een grote openingssectie bovenaan een pagina. Je plaatst een achtergrondafbeelding achter vrije inhoud, zoals een titel, tekst en knop. Op mobiel kun je de afbeelding optioneel los onder of boven de inhoud stapelen.
Het block toevoegen
Zoek in de blokken-editor op “Hero” en voeg het block toe aan de pagina. Voeg daarna blokken toe binnenin het hero-blok (de kaart).
Achtergrondafbeelding
Kies via Achtergrondafbeelding een afbeelding uit de mediabibliotheek. Via de brandpuntskiezer bepaal je welk deel van de afbeelding altijd zichtbaar blijft als de afbeelding wordt bijgesneden op kleinere schermen.
Weergave
Stapelen op mobiel
Op desktop en tablet staat de inhoud als kaart over de achtergrondafbeelding. Op mobiel kun je kiezen of de afbeelding als losse afbeelding naast de kaart wordt gestapeld:
| Optie | Omschrijving |
|---|---|
| Nee | De afbeelding blijft altijd als achtergrond; de kaart staat eroverheen (standaard) |
| Kaart | Afbeelding | Op mobiel staat de kaart boven, de afbeelding eronder |
| Afbeelding | Kaart | Op mobiel staat de afbeelding boven, de kaart eronder |
> Als stapelen actief is, wordt de achtergrondafbeelding op mobiel ook als losse afbeelding naast de kaart getoond.
Hoogte
Stel de minimale hoogte van de hero in per apparaat:
| Apparaat | Standaard |
|---|---|
| Desktop | 400 px |
| Tablet | 400 px |
| Mobiel | 270 px |
Kaartbreedte
Stel in hoe breed de inhoudskaart is als percentage van de totale hero-breedte:
| Apparaat | Standaard |
|---|---|
| Desktop | 40% |
| Tablet | 40% |
| Mobiel | 100% |
> De mobiele kaartbreedte heeft geen effect als Stapelen op mobiel actief is, omdat de kaart dan de volledige breedte inneemt.
Beperk tot container
Schakel Beperk tot container in om de kaartpositie te beperken tot de binnenste inhoudscontainer, in plaats van de volledige breedte van de hero. Handig als de hero breder is dan de standaard inhoudskolom.
Parallax
Schakel Parallax in om de achtergrondafbeelding langzamer te laten bewegen dan de rest van de pagina bij het scrollen.
- Parallax-snelheid — hoe snel de afbeelding meebeweegt:
0= volledig vast,10= even snel als de pagina-inhoud (standaard2)