> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Aankondigingsbalk — Ontwerp & styling > ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam. Het tabblad **Design** (Ontwerp) geeft je volledige controle over de uitstraling van je aankondigingsbalk in je hele winkel. Van achtergrondkleuren en typografie tot knopanimaties, pictogramstijlen en aangepaste CSS: bijna elk visueel detail is af te stemmen op je merk. Je kunt snel starten met een kant-en-klare template of elke pixel handmatig aanpassen. Hoe dan ook, de balk voelt als een natuurlijk onderdeel van je winkel 🎨 De meeste kleurinstellingen bevatten: * Een **Color Picker** (kleurkiezer) voor visuele selectie * Een **Hex Code Input** (hex-code invoer) voor exacte merkkleuren --- # **⚠️ Voordat je begint** Om de Design-instellingen te configureren: → Open een bestaande aankondigingsbalk → Of maak eerst een nieuwe aan Klik vervolgens op het tabblad **Design** (Ontwerp) in de editor. ℹ️ Sommige opties verschijnen alleen bij specifieke balktypen of configuraties. Zo worden slide-animaties alleen weergegeven bij **Multiple**-balken, en verschijnt coupon-styling alleen wanneer een **Coupon**-CTA wordt gebruikt. Deze voorwaardelijke velden worden hieronder aangegeven, zodat je precies weet wanneer je ze kunt verwachten. --- # **🎨 Template** (Sjabloon) * **Wat het doet:** Past direct een vooraf gemaakte visuele stijl toe op je aankondigingsbalk. * **Hoe je het gebruikt:** Kies uit meer dan 25 templates om je ontwerp een vliegende start te geven zonder elk veld handmatig in te vullen. Elke template vult vooraf in: * Achtergrondtype, -kleur en gradiëntinstellingen * Titel- en subtitelkleuren en -groottes * Knopkleuren, tekstkleur en hoekradius * Rand-, pictogram- en coupon-styling **Beschikbare templates zijn onder andere:** Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy ⚠️ **Belangrijk:** Als je een template selecteert, worden de meeste designvelden overschreven. Je **Visibility** (Zichtbaarheid)-instelling en **Position** (Positie) (ingesteld in het tabblad **Placement** (Plaatsing)) blijven behouden. 💡 *Templates zijn ideaal voor seizoensgebonden campagnes. Wil je een Black Friday-look? Selecteer dan de Black Friday-template en pas vervolgens naar wens aan.* --- # **👀 Visibility** (Zichtbaarheid) * **Wat het doet:** Bepaalt op welke apparaten je aankondigingsbalk wordt weergegeven. * **Opties:** * *Desktop and Mobile* (Desktop en mobiel) — Zichtbaar op alle apparaten * *Only Desktop* (Alleen desktop) * *Only Mobile* (Alleen mobiel) Dit is handig wanneer je verschillende boodschappen of lay-outs wilt tonen aan desktopbezoekers versus mobiele bezoekers. --- # **🖼️ Background Style** (Achtergrondstijl) * **Wat het doet:** Wijzigt de achtergrond van de aankondigingsbalk. * **Beschikbare opties:** * **Single Color** (Effen kleur) — Eén vaste achtergrondkleur * **Gradient** (Gradiënt) — Twee kleuren die onder een aangepaste hoek in elkaar overlopen * **Patterns** (Patronen) — Decoratieve achtergrondpatronen ## **🎨 Single Color** (Effen kleur) * Kies een kleur met de **Color Picker** (kleurkiezer) of voer handmatig een **Hex Code** (hex-code) in. ## **🌈 Gradient** (Gradiënt) * **Gradient Angle Degree** (Gradiënthoek): Bepaalt de richting van de overgang (0–360°) * **Initial Color** (Beginkleur): De startkleur * **Final Color** (Eindkleur): De eindkleur 💡 *Een subtiel gradiënt voegt diepte toe zonder afleidend te werken. Probeer lage contrasthoeken voor een moderne uitstraling.* ## **✨ Patterns** (Patronen) Als je **Patterns** (Patronen) selecteert, verschijnt er een dropdown met meer dan 35 ingebouwde achtergrondopties: * **Decoratief:** Wavy, Sale, Discount, Balloon, Girly, Party, Fresh * **Feestdagen & seizoenen:** Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday * **Getextureerd:** Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese ℹ️ Patronen worden toegepast als CSS-achtergrondstijlen. Sommige gebruiken puur CSS, andere gebruiken afbeeldingselementen. --- # **📐 Borders & Corners** (Randen & hoeken) Deze sectie bepaalt de vorm en omtrek van de balk. * **Bar Corner Radius (px):** Hoe afgerond de hoeken van de balk zijn * **Bar Padding (px):** Binnenruimte tussen de randen van de balk en de inhoud * **Border Size (px):** Dikte van de buitenste rand * **Border Color:** De kleur van de rand 💡 *Een hoekradius van 0 px geeft een scherpe rechthoekige balk. Hogere waarden creëren zachtere, modernere vormen.* --- # **🔤 Typography** (Typografie) Deze sectie bepaalt hoe alle tekst in de aankondigingsbalk wordt weergegeven. ## **📝 Title Styling** (Titelstijl) * **Title Size (px):** De grootte van de hoofdboodschap * **Title Color:** De kleur van de hoofdboodschap ## **📄 Subheading Styling** (Subtitelstijl) * **Subheading Size (px):** De grootte van de ondersteunende tekst * **Subheading Color:** De kleur van de ondersteunende tekst ℹ️ Het subtitelveld is verborgen bij gebruik van het balktype **Running**, omdat marquee-balken meestal uit één tekstregel bestaan. ## **🔠 Font** (Lettertype) Kies uit **63 beschikbare lettertypen**, waaronder: * **Systeemlettertypen:** Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, en meer * **Google Fonts:** Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, en veel meer De eerste optie is **Use your theme font** (Gebruik je themalettertype), waarmee de bestaande typografie van je winkel automatisch wordt overgenomen. 💡 *Voor leesbaarheid is het verstandig om maximaal 1 à 2 lettertypen per balk te gebruiken. Een vet display-lettertype voor de titel en een strak sans-serif voor de subtitel werken vaak goed.* --- # **🔘 Button Design** (Knopontwerp) Deze sectie past de call-to-action-knop aan. ℹ️ Deze instellingen zijn altijd beschikbaar in het tabblad **Design** (Ontwerp). Ze zijn alleen zichtbaar in de winkel wanneer je CTA-type is ingesteld op **Button** (Knop), **Full Bar** (Volledige balk) of **Trigger** (Trigger). ## **🎨 Button Color** (Knopkleur) * Wijzigt de achtergrondkleur van de CTA-knop. ## **🔤 Button Text Size & Color** (Knoptekstgrootte & -kleur) * **Size (px):** Bepaalt de tekstgrootte binnen de knop * **Color:** Wijzigt de kleur van de knoptekst ## **⭕ Corner Radius & Button Style** (Hoekradius & knopstijl) Deze twee velden zijn gekoppeld: * **Corner Radius (px):** Voer handmatig een waarde in om de rondheid te bepalen * **Button Style:** Schakel snel tussen voorinstellingen: * *Square* (Vierkant) → stelt de radius in op 0 px * *Rounded* (Afgerond) → stelt de radius in op 10 px * *Fully Rounded* (Volledig afgerond) → stelt de radius in op 30 px Als je een stijlvoorinstelling selecteert, wordt de hoekradius automatisch bijgewerkt. Als je een aangepaste radius invoert, wordt de stijlvoorinstelling automatisch aangepast: * 0–9 px → Square (Vierkant) * 10–29 px → Rounded (Afgerond) * 30+ px → Fully Rounded (Volledig afgerond) ## **💪 Font Weight** (Letterdikte) * Bepaalt hoe vet of licht de knoptekst wordt weergegeven * Opties: Normal, Bold, 100–900 ## **✍️ Font Style** (Letterstijl) * Schakel tussen: Normal, Italic, Underline ## **✨ Button Animation** (Knopanimatie) Voegt een doorlopende animatie toe aan de knop om deze op te laten vallen. *Beschikbare animaties:* None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip 💡 *Subtiele animaties zoals Bounce of Emitting trekken aandacht zonder opdringerig aan te voelen. Gebruik Flip of Tada voor campagnes met hoge urgentie.* --- # **🏷️ Coupon Design** (Couponontwerp) Deze sectie past de weergave van het couponcodevak aan. ℹ️ Deze sectie verschijnt alleen wanneer: * Een willekeurige content-slide **Coupon** als CTA-type gebruikt, **of** * Het balktype is ingesteld op **Email** ## **Beschikbare instellingen** * **Coupon Border Style** (Couponrandstijl): Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, of None * **Coupon Border Color** (Couponrandkleur): De omtrekkleur van het couponvak * **Coupon Text Color** (Coupontekstkleur): De kleur van de couponcodetekst * **Coupon Background** (Couponachtergrond): De achtergrondkleur van het couponvak (ondersteunt transparante achtergronden) 💡 *Een gestippelde rand met een contrasterende achtergrond is de klassieke coupon-look. Probeer een semi-transparante achtergrond als je het patroon of gradiënt van de balk wilt doorlaten schijnen.* --- # **🎆 Bar Animations** (Balkanimaties) ## **Multiple Bar Transition** (Overgang bij Multiple-balk) *Beschikbaar alleen wanneer het balktype is ingesteld op **Multiple**.* Bepaalt hoe slides overgaan naar elkaar: * **Slide** — Schuift horizontaal tussen aankondigingen * **Fade In** — Laat vloeiend van de ene slide naar de andere vervagen * **Cube** — Een 3D-kubusrotatie-effect * **Flip** — Een kaart-omdraai-overgang ℹ️ Deze instelling vind je in het tabblad **Design** (Ontwerp), niet in het tabblad **Content** (Inhoud). --- # **🎨 Icon Settings** (Pictograminstellingen) ## **🚪 Close Icon Color** (Sluitpictogramkleur) * Wijzigt de kleur van het sluitpictogram (knop om te sluiten). * Alleen zichtbaar wanneer de optie **Close Icon** (Sluitpictogram) is ingeschakeld in het tabblad **Content** (Inhoud). ## **➡️ Arrow Icon Color** (Pijlpictogramkleur) * Wijzigt de kleur van de navigatiepijlen. * Alleen zichtbaar wanneer het balktype is ingesteld op **Multiple**, omdat pijlen worden gebruikt om tussen slides te navigeren. --- # **👥 Banner Icons (Social Icons)** (Bannerpictogrammen (sociale pictogrammen)) Deze sectie stijlt socialemediapictogrammen die in de balk verschijnen. * **Social Icon Size (px):** Past de pictogramgrootte aan * **Social Icon Color:** Wijzigt de pictogramkleur * **Social Icon Position:** Plaatst pictogrammen aan de *Left* (Linkerkant) of *Right* (Rechterkant) van de balk * **Use Original Social Icon Color:** Wanneer ingeschakeld, behoudt elk platform zijn eigen merkkleur (Facebook-blauw, Instagram-gradiënt, enz.) in plaats van je aangepaste kleur te gebruiken ℹ️ Sociale pictogrammen worden geconfigureerd in het tabblad **Content** (Inhoud). Het tabblad **Design** (Ontwerp) bepaalt alleen hoe ze eruitzien. --- # **💻 Custom CSS (For Advanced Users)** (Aangepaste CSS (voor gevorderde gebruikers)) 💡 **Geavanceerde functie:** Als je styling nodig hebt die niet beschikbaar is in de standaardinstellingen, kun je je eigen CSS direct in de editor schrijven. Wanneer ingeschakeld, wordt er een CSS-skelet geleverd met vooraf gedefinieerde doelklassen: * Volledige balkcontainer: `.futureblink-announcement-bar` * Titeltekst: `.futureblink-announcement-bar .title` * Subtiteltekst: `.futureblink-announcement-bar .subheading` * Mobiele titel: `.futureblink-announcement-bar.mobile .title` * Mobiele subtitel: `.futureblink-announcement-bar.mobile .subheading` * CTA-knop: `.futureblink-announcement-bar .cta-button` * Mobiele CTA-knop: `.futureblink-announcement-bar.mobile .cta-button` * Sluitknop: `.futureblink-announcement-bar .close-btn` * Navigatiepijlen: `.futureblink-announcement-bar .arrow` * Vorige/volgende knoppen: `.futureblink-announcement-bar .button-prev` en `.button-next` **Hoe aangepaste CSS in de winkel werkt:** * Alle selectors worden automatisch beperkt tot jouw specifieke aankondigingsbalk * Elke declaratie krijgt `!important`-prioriteit om themastijlen te overschrijven * Mobiele selectors (`.mobile`) worden automatisch verpakt in een mobiele media query * De CSS wordt geïnjecteerd als een `