Ga naar hoofdinhoud

Hero Banners

De sectie Hero Banners biedt een visueel aantrekkelijke manier om meerdere grote afbeeldingen (banners) naast elkaar te presenteren. Dit is perfect voor het uitlichten van belangrijke categorieën, speciale acties of seizoensgebonden lookbooks op je homepagina.

Om je snel op weg te helpen, vind je onder de presets drie kant-en-klare lay-outs: Large (grote kaarten), Small (compactere, vierkante kaarten) en Simple (alleen de kaarten, zonder introductietekst erboven).

Algemene Layout & Achtergrond​

  • Kleurenschema's: Stel het kleurenschema voor de achtergrond van de sectie in, én kies een apart kleurenschema voor de Hero kaarten zelf (dit bepaalt de tekstkleur ín de kaarten).
  • Sectie weergave (Type): Bepaal of de achtergrond over de volledige schermbreedte loopt (Full width / Edge-to-edge) of gecentreerd is in een kader (Box / Container).
  • Achtergrondafbeelding: Upload optioneel een achtergrondafbeelding (met de mogelijkheid voor een aparte afbeelding op desktop en mobiel).
  • Hoogte & Achtergrondhoogte: Kies of de sectie automatisch meegroeit met de inhoud (Auto) of werk met een vaste hoogte (Fixed). Bij een vaste hoogte kun je met een slider (0-100%) bepalen tot hoe ver de achtergrond doorloopt.

Afstanden (Witruimte)​

Zorg dat de sectie mooi aansluit op de rest van de pagina door de marges (buitenruimt) en padding (binnenruimte) aan te passen.

Weergave: Slider of Grid​

Kies hoe de Hero kaarten gepresenteerd worden:

  • Slider: De kaarten staan in een swipebare carrousel.
    • Aantal slides (Slides per view): Bepaal het aantal zichtbare kaarten op desktop (2 t/m 8), tablet en mobiel. Gebruik 'halve' weergaves (bijv. 1.5) op mobiel om bezoekers visueel uit te nodigen om te swipen.
    • Extra opties: Schakel paginatie in (bolletjes onder de slider), laat de kaarten speels op en neer verspringen (Alternate offset), of laat de slider buiten het containerkader doorlopen (Carousel overflow).
  • Grid (Raster): De kaarten worden in een vast raster geplaatst en vallen automatisch op een nieuwe regel indien nodig.
    • Stel exact in hoeveel kolommen (kaarten naast elkaar) je wilt op desktop (2 t/m 6), tablet (1 t/m 4) en mobiel (1 t/m 3).

Afbeeldingsverhouding (Image ratio): Voor beide weergave-opties kun je de verhouding van de afbeeldingen instellen, variërend van vierkant (1:1) tot hoog (3:4) of breed (16:9).

Vormgeving van de Kaart​

  • Titel opmaak: Bepaal de HTML-tag, visuele grootte (H1 t/m display) en de letterdikte voor de titel binnenin de hero kaart.
  • Kleurverloop (Gradient overlay): Vink dit aan om een donkere overlay (verloop) over de onderkant van de afbeelding te leggen. Dit zorgt ervoor dat de titel, die vaak onderin de kaart staat, altijd perfect leesbaar is. Je kunt de donkerte van dit verloop aanpassen met de slider (0-100%).

Tekst & Knoppen (Introductie)​

Begeleid je Hero kaarten met een duidelijke boodschap boven de weergave:

  • Uitlijning: Lijn de tekst links, gecentreerd of rechts uit.
  • Titel & Inhoud: Voeg een opvallende koptekst en een korte inleiding toe.
  • Actieknoppen (Buttons): Voeg maximaal twee knoppen toe onder de inleidende tekst. Geef ze een label, een link en eventueel een FontAwesome icoon. Vink Secundaire knopstijl aan voor een transparante knop met een gekleurde rand. Laat de labels leeg als je geen knoppen wilt tonen.

Blokken toevoegen (Hero's)​

De daadwerkelijke inhoud van deze sectie bouw je op met 'Hero' blokken. Voeg voor elke banner een blok toe en stel het volgende in:

  • Naam (Title): De tekst die op de banner wordt getoond.
  • Link: De doel-URL waar de bezoeker naartoe gaat als ze op de kaart klikken.
  • Afbeelding: Upload de achtergrondfoto voor deze specifieke hero kaart.