Ga naar hoofdinhoud

Banner

Met een grote, opvallende afbeelding en sterke teksten kun je perfect de aandacht van je bezoeker trekken. Deze sectie wordt vaak bovenaan de homepagina gebruikt (als 'Hero banner'), maar is ook zeer geschikt om tussendoor categorieën of acties uit te lichten op andere pagina's.

Algemene Layout & Witruimte​

  • Kleurenschema: Kies het kleurenschema voor de teksten op de banner. Als je geen donkere overlay (laag) gebruikt, let er dan goed op dat de tekstkleur contrasteert met de kleuren in je afbeelding!
  • Sectie weergave (Type): - Full width (Edge-to-edge): De afbeelding loopt strak door tot aan de randen van het beeldscherm.
    • Container (Box): De afbeelding wordt binnen een net kader (met afrondingen, afhankelijk van je thema-instellingen) geplaatst.
  • Afstanden: Beheer de marge (buitenruimte) en padding (binnenruimte) voor de bovenkant en onderkant om de banner naadloos te integreren met omliggende secties. Kies tussen de standaard instellingen of verwijder de ruimte volledig.

Afbeeldingen​

Om ervoor te zorgen dat je banner er altijd goed uitziet, heb je de mogelijkheid om het beeldmateriaal specifiek af te stemmen:

  • Desktop Afbeelding: Upload een hoge-resolutie, liggende (landscape) afbeelding voor grote schermen.
  • Desktop Hoogte (Banner height): Bepaal de vaste hoogte van de banner op computerschermen (in te stellen tussen de 300 en 800 pixels). Let op: de afbeelding zal altijd passend worden gemaakt, wat betekent dat randen afgesneden kunnen worden afhankelijk van het formaat van het beeldscherm.
  • Mobiele Afbeelding: Omdat telefoons rechtop (portrait) worden vastgehouden, komt een liggende foto hier vaak niet goed tot zijn recht. Upload daarom een specifieke mobiele (staande) afbeelding voor de beste presentatie. Als je dit veld leeg laat, gebruikt het thema de desktopafbeelding.
  • Mobiele Hoogte: Bepaal de hoogte van de banner specifiek voor mobiele apparaten (tussen de 150 en 600 pixels).

Achtergrond Overlay​

Als je foto veel detail heeft, is het soms lastig om teksten goed leesbaar te houden. De overlay-functie is hier de perfecte oplossing voor:

  • Overlay inschakelen: Vink dit aan om een half-transparante, donkere waas over je foto te leggen. Dit zorgt direct voor een prachtig contrast waardoor witte letters er perfect uitspringen.
  • Transparantie (Opacity): Schuif met de regelaar (0-70%) om te bepalen hoe donker deze laag moet zijn.

Inhoud (Tekst & Knoppen)​

Breng je boodschap helder over via de tekstblokken:

  • Uitlijning (Overlay alignment): Kies of de teksten links, strak in het midden of rechts op de banner geplaatst moeten worden.
  • Titel (Heading): Schrijf je belangrijkste, korte boodschap (bijv. "Zomercellectie '24"). Je kunt de visuele grootte (H1 t/m display) en letterdikte naar wens afstemmen.
  • Subtitel (Subheading): Een begeleidende regel onder de titel om wat meer context te geven. Ook hiervoor kun je de grootte en letterdikte inregelen.
  • Actieknoppen (Buttons): Stimuleer kliks door maximaal twee knoppen toe te voegen (bijv. "Shop Dames" en "Shop Heren").
    • Vul voor elke knop een label en de doel-link in.
    • Vink de optie 'Secundaire knopstijl' aan als je wilt dat de knop een transparante look met randje krijgt, in plaats van een solid kleur.
    • Voeg desgewenst een FontAwesome-icoontje toe (zoals een pijl).
    • Wil je de banner zonder knoppen gebruiken? Laat de labels dan simpelweg leeg.