De lay-out van de banner aanpassen (Legacy-versie)
Je kunt de lay-out en styling van je banner rechtstreeks in de applicatie aanpassen. Zo creëer je een look-and-feel die past bij de huisstijl en gebruikerservaring van je organisatie.
Om deze opties te openen, ga je naar:
Cookie banner > Style
Position
Kies waar en hoe de banner op je website verschijnt:
- Popup: Gecentreerd op het scherm.
- Overlay: Werkt als de popup, maar blokkeert de pagina totdat de gebruiker met de banner werkt.
- Bar at the top: Vast bovenaan het scherm.
- Bar at the top (pushdown): Schuift van boven naar beneden en duwt de inhoud omlaag. (Opmerking: werkt mogelijk niet goed met sticky headers.)
- Floating at the top left: Linksboven geplaatst met een kleine marge.
- Floating at the top center: Bovenaan in het midden geplaatst met een kleine marge.
- Floating at the top right: Rechtsboven geplaatst met een kleine marge.
- Bar at the bottom: Vast onderaan het scherm.
- Floating at the bottom left: Linksonder geplaatst met een kleine marge.
- Floating at the bottom center: Onderaan in het midden geplaatst met een kleine marge.
- Floating at the bottom right: Rechtsonder geplaatst met een kleine marge.
Theme
Selecteer een thema om padding, knopstijl en uiterlijk te bepalen:
- Block: Kleine padding, vierkante knoppen met proportionele breedte.
- Classic: Kleine padding, afgeronde knoppen van gelijke breedte.
- Edgeless: Geen padding, vierkante knoppen van gelijke breedte.
- Wired: Hetzelfde als Block, maar met omgekeerde knopachtergronden en -kleuren.
Vergelijkingstabel van thema's
Thema | Padding | Knopstijl | Knopbreedte |
|---|---|---|---|
Block | Klein | Vierkant | Proportioneel |
Classic | Klein | Afgerond | Gelijk |
Edgeless | Geen | Vierkant | Gelijk |
Wired | Klein | Vierkant (omgekeerde kleuren) | Proportioneel |
Text Alignment
Geldt voor de titel, het bericht en het logo van de banner:
- Left
- Center
- Right
Width
Past de breedte van de banner aan met em-eenheden (relatief aan de lettergrootte). Voorbeeld: 2em = tweemaal de lettergrootte.
- Wordt bediend met een schuifregelaar.
- Werkt met live voorvertoning voor directe resultaten.
- Handig voor langere berichten of knoplabels.
- Opmerking: geldt alleen voor banner-posities, niet voor balken (balken beslaan altijd de volledige breedte).
Font Size
Past de tekstgrootte aan met px-eenheden. Voorbeeld: 1px = 1/96e van 1 inch.
- Wordt bediend met een schuifregelaar.
- Werkt met live voorvertoning.
- Standaard de grootte die door het thema van je winkel is ingesteld.
Padding
Past de ruimte binnen de banner aan met px-eenheden.
- Wordt bediend met een schuifregelaar.
- Werkt met live voorvertoning.
- Standaardwaarden verschillen per thema.
- Opmerking: niet ondersteund met het thema Edgeless.
Colors
Pas de kleuren van de banner en knoppen aan:
- Kies uit een palet of definieer eigen kleuren.
- Ondersteunt de formaten Hex (bijv.
#123456) en RGBA. - RGBA voegt ondersteuning voor transparantie toe naast de waarden voor rood, groen en blauw.
Font Family
Standaard erft de banner het lettertype van het thema van je winkel. Je kunt ook kiezen uit webveilige lettertypen die in alle browsers worden ondersteund:
- Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
- Times New Roman, Didot, Georgia, American Typewriter
- Andalé Mono, Courier, Lucida Console, Monaco
- Bradley Hand, Brush Script MT, Luminari, Comic Sans MS
Als je een eigen lettertype wilt gebruiken, laad dat dan eerst in de assets van je winkel en maak het beschikbaar in je CSS-bestand.
z-index
Bepaalt de stapelvolgorde van de banner.
- Hogere waarden zorgen ervoor dat de banner boven andere pagina-elementen verschijnt.
- Pas aan bij conflicten met andere apps of scripts.
Container ID
Bepaalt de HTML-ID van de bannercontainer.
- Wijzig dit alleen als je de banner moet aanspreken met aangepaste scripts of CSS-selectors.
Banner Shadow
Voegt een schaduw achter de banner toe.
- Handig wanneer de kleuren van banner en achtergrond op elkaar lijken, wat de zichtbaarheid verbetert.
Animation
Schakelt animaties in voor het verschijnen en sluiten van de banner:
- Fade-in / slide-in bij openen.
- Fade-out / slide-out bij sluiten.
Geldt ook voor de link Re-open banner (Revoke), als die is ingeschakeld onder Behavior.
- Opmerking: niet door alle browsers ondersteund.
Custom CSS
Voeg je eigen CSS-regels toe voor extra aanpassingen.
- Handig voor het afstemmen van knopgroottes, randkleuren, tussenruimte en meer.
Videohandleiding
Bijgewerkt op: 19/10/2026
Dankuwel!