Hero
De Hero is de grote banner bovenaan een pagina. Dit is meestal het eerste wat bezoekers zien en bevat een krachtige titel, beschrijving en eventueel een call-to-action knop.
Velden
| Veld | Omschrijving |
|---|---|
| Accent Text | Klein labeltekst boven de titel (bv. "Welcome to Ammobox") |
| Title Text | De grote hoofdtitel |
| General Text Block | De beschrijvende tekst onder de titel |
| Description | Extra tekst die in de rechterkolom verschijnt (alleen bij 2-koloms layout) |
| Link Field | De CTA-knop (tekst + bestemmingspagina) |
| Background Image | De achtergrondafbeelding van de hero |
| Full Height Toggle | Aan/uit: maakt de hero zo hoog als het volledige scherm |
| Layout | Keuze tussen fullwidth of 2col (twee kolommen) |
| Content Layout | Keuze tussen default of centered |
| Add Scroll To Next Section | Aan/uit: toont een geanimeerde "scroll naar beneden" indicator |
| Scroll To Next Section Label | Tekst naast de scroll-indicator (bv. "Scroll down") |
Layout opties
Volledige breedte (fullwidth)
De titel, tekst en knop nemen de volledige breedte in. Het Description veld wordt niet getoond.
Twee kolommen (2col)
De inhoud wordt verdeeld in twee kolommen:
- Links (2/3): Accent text, titel, hoofdtekst en CTA-knop
- Rechts (1/3): Description tekst
Voorbeeld op de website
Tips
- Gebruik een hoge-resolutie afbeelding als achtergrond (minimaal 1920px breed)
- De achtergrondafbeelding wordt weergegeven met een donkere overlay, dus lichte en donkere foto's werken beide
- De scroll-indicator is handig als de hero op volledige schermhoogte staat