ℹ️ 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 Ontwerp geeft u volledige controle over hoe uw popup eruit ziet en voelt op de storefront. Van sjablonen en typografie tot animaties, kleuren, knoppen, coupon styling, en zelfs aangepaste CSS

Deze gids legt elke beschikbare design optie uit zodat u zelf gepolijste, high-converting popups kunt creëren.

⚠️ Voordat u begint

De instellingen van het ontwerp configureren:

→ Open een bestaande popup
→ Of maak eerst een nieuwe popup

Schakel dan over naar de Ontwerp tabblad in de popup-editor.

ℹ️ Sommige ontwerp secties verschijnen alleen voor specifieke popup types of ingeschakelde functies.

Voorbeelden

• Countdown timer styling verschijnt alleen voor Countdown PopUps
• Coupon styling verschijnt alleen wanneer coupon display is ingeschakeld
• Slice styling verschijnt alleen voor Spin Wheel PopUps

🎨 Sjabloon

Met sjablonen kunt u direct vooraf ontworpen visuele stijlen toepassen op uw popup. Dit helpt handelaren lanceren professioneel stijl popups snel zonder handmatig configureren van elke individuele ontwerpinstelling.

Dit is handig wanneer u wilt een professioneel gestyleerde popup zonder handmatig aanpassen van elke instelling.

Beschikbare voorbeelden

• Dageraad
• Zwarte vrijdag
• Schoonheid
• Feestelijk
• Bos
• Oceaan
• Aqua
• Elektriciteit
• Partij

Daarna kunt u het geselecteerde sjabloon verder aanpassen.

👀 Zichtbaarheid

Bepaalt op welke apparaten de popup moet verschijnen. Dit helpt bij het creëren van meer gerichte popup ervaringen, afhankelijk van of klanten surfen vanaf desktop of mobiele apparaten.

Beschikbare opties

• Bureaublad en mobiel Overal zichtbaar
• Alleen bureaublad Verborgen op mobiele apparaten
• Alleen mobiel Verborgen op desktopapparaten

Dit is handig bij het maken van apparaatspecifieke campagnes.

🖼️ Achtergrond tonen

Deze sectie regelt het popup venster achtergrond styling. Achtergrond styling speelt een belangrijke rol in hoe visueel aantrekkelijk en aandacht grijpen de popup voelt op de storefront.

Enkele kleur achtergrond

Gebruikt een solide achtergrondkleur voor de popup.

Je kunt:

• Kies een kleur visueel
• Of plak een HEX-kleurcode handmatig

Achtergrond kleurverloop

Maakt een tweekleurig kleurverloopeffect aan.

Indien ingeschakeld verschijnen er extra instellingen:

• Verloophoekgraad
• Initiële kleurverloop
• Laatste kleurverloop

ℹ️ Verloopknoppen worden pas actief na het inschakelen van kleurverloopachtergrond.

🌫️ Achtergrond

Controleert de storefront overlay weergegeven achter de popup. De overlay helpt de klant zich te richten op de popup door het visueel te scheiden van de rest van de storefront content.

Bijvoorbeeld, wanneer een popup opent, de rest van de storefront kan verschijnen gedimd met een transparante donkere overlay om de aandacht te trekken naar de popup.

Beschikbare opties

• Geen achtergrond Popup verschijnt zonder een gedimde overlay
• Achtergrond dimmen Een semi-transparante overlay achter de popup wordt toegevoegd

📐 Popup-indeling & rand

Deze instellingen regelen de totale popup structuur en vorm. Het aanpassen van afstand, randen en grootte correct helpt de popup zich schoner, evenwichtiger en visueel gepolijst.

📏 Popupgrootte

Controleert de totale afmetingen van de popup.

Beschikbare opties

• Klein
• Middel
• Groot
• Volledige pagina

Grotere popup maten bieden meer ruimte voor afbeeldingen, producten en extra inhoud.

🎨 Achtergrondkleur van popupvenster

Stelt de achtergrondkleur van de popup container zelf in.

Je kunt:

• Kleurkiezer gebruiken
• Of voer handmatig een HEX-kleurcode in

🟦 Hoekstraal

Bepaalt hoe afgerond de popup hoeken verschijnen.

Voorbeelden

• Lagere waarden → scherpere hoeken
• Hogere waarden → zachtere afgeronde hoeken

🧱 Randgrootte

Controleert de dikte van de popuprand.

De waarde wordt gemeten in pixels.

🎨 Randkleur

Stelt de kleur in van de popuprand.

✨ Popup-animatie

Bepaalt hoe de popup het scherm binnenkomt. Entree animaties helpen de popup voelen gladder en meer interactief, terwijl het ook meer merkbaar voor bezoekers.

Beschikbare opties

• Vervagen
• Dia
• Bounce

Animaties helpen om de popup gladder en interactiever te laten voelen.

🔘 Zwevende knop

ℹ️ Deze sectie verschijnt alleen wanneer de Drijvende actieknop is ingeschakeld in de Inhoud tab.

Met de Floating Button instellingen kunt u het uiterlijk van de knop die bezoekers klikken om uw popup te openen aanpassen. Deze opties helpen u overeenkomen met de knop met de branding van uw winkel terwijl het houden van het merkbaar en gemakkelijk om te communiceren met.

Beschikbare instellingen

🔷 Vorm

Kies de totale vorm van de drijvende knop.

Beschikbare opties

• Afgerond
• Vierkant
• Pillen
• Cirkel

🎨 Knopkleur

Bedient de kleur van het pictogram of de tekst op de drijvende knop.

Je kunt:

• Kies een kleur met de kleurkiezer
• Voer een HEX-kleurcode handmatig in

🖌️ Lettergrootte

Bedient de grootte van het pictogram of de tekst weergegeven in de drijvende knop.

De waarde wordt gemeten in pixels.

🟫 Achtergrondkleur

Stelt de achtergrondkleur van de drijvende knop in.

Je kunt:

• Kies een kleur met de kleurkiezer
• Voer een HEX-kleurcode handmatig in

🌑 Schaduw

Voegt een optioneel schaduweffect toe rond de drijvende knop.

Beschikbare opties

• Geen
• Klein
• Middel
• Groot

🧱 Randkleur

Controleert de kleur van de zwevende knoprand.

📐 Hoekstraal

Bepaalt hoe afgerond de hoeken van de drijvende knop verschijnen.

Hogere waarden creëren een zachter, meer afgerond uiterlijk.

🔤 Typografie

Typografie-instellingen bepalen hoe alle tekstelementen in de popup verschijnen. Deze instellingen helpen visuele consistentie te behouden tussen rubrieken, beschrijvingen, knoppen en validatieberichten zodat de popup professioneel ontworpen en gemakkelijker te lezen voelt.

De app ondersteunt ingebouwde lettertypen samen met themalettertypen.

🏷️ Titeltypografie

Controleert de popup titel styling.

Beschikbare instellingen

• Titellettertype
• Titelgrootte
• Titelkleur

📝 Beschrijving Typografie

Controleert de popup beschrijving styling.

Beschikbare instellingen

• Omschrijving Lettertype
• Omschrijving Size
• Omschrijving kleur

⚠️ Foutmeldingstypografie

Controleert foutmeldingen voor beide:

• E-mailvelden
• Telefoonnummervelden

Beschikbare instellingen

• Foutlettertype
• Foutmeldingsgrootte
• Foutmeldingskleur

📝 Invoerveldstijl

Deze sectie regelt het verschijnen van invoervelden voor e-mail- en telefoonnummers. Juiste input styling verbetert de leesbaarheid en helpt formulieren voelen meer betrouwbaar en visueel afgestemd met uw storefront branding.

Beschikbare instellingen

• Tekstkleur invoeren
• Invoer achtergrondkleur
• Invoerrandkleur

Deze instellingen helpen uw formuliervelden overeenkomen met uw storefront branding.

🔘 Knopstijl

Bedient het ontwerp van de popup call-to-action knop. Aangezien de knop is meestal de belangrijkste conversie element binnen de popup, styling het goed kan aanzienlijk verbeteren klik-door en engagement rates.

🔤 Knoplettertype

Kies de lettertypefamilie die in de knop wordt gebruikt.

U kunt het volgende gebruiken:

• Themalettertypen
• Ingebouwde lettertypen

🎨 Knopkleur

Bedient de achtergrondkleur van de knop.

🔠 Knoptekstgrootte & kleur

Deze instelling regelt:

• Tekstgrootte (linkerveld)
• Tekstkleurkiezer (middenveld)
• HEX kleurwaarde (rechtsveld)

Voorbeeld

• Grote witte tekst op donkere knop
• Kleine zwarte tekst op heldere knop

Hoekstraal

Bepaalt hoe afgerond de knop hoeken verschijnen.

Hogere waarden maken zachtere knoppen.

🎟️ Coupon Styling

ℹ️ Deze sectie verschijnt alleen wanneer couponweergave is ingeschakeld in het tabblad Inhoud.

Deze sectie regelt het uiterlijk van de couponcode container. Een visueel gestyleerde coupon sectie maakt kortingen opvallender en moedigt bezoekers aan om het aanbod te kopiëren en te gebruiken tijdens de kassa.

🧾 Couponrandstijl

Kies de randstijl rondom het coupongebied.

Beschikbare voorbeelden

• Vast
• Dashed

🎨 Randkleur

Controleert de randkleur van de coupon.

🔤 Tekstkleur

Controleert de kleur van de tekst in de coupon sectie.

🖼️ Achtergrondkleur

Controleert de achtergrondkleur van de couponcontainer.

❎ Pictogramstijl sluiten

Controleert het uiterlijk van de popup sluiten pictogram. Ook al is het een klein element, het aanpassen van de pictogram styling met de algehele popup ontwerp helpt een schonere en meer gepolijste gebruikerservaring te behouden.

Beschikbare instellingen

• Pictogramkleur sluiten
• Pictogramgrootte

Beschikbare grootteopties

• Klein
• Middel
• Groot

Countdown Timer Styling

ℹ️ Deze sectie verschijnt alleen voor Countdown PopUps.

Controleert de visuele verschijning van de afteltijd. Juiste timer styling helpt bij het creëren van urgentie, terwijl het aftellen leesbaar blijft en visueel consistent met de rest van de popup ontwerp.

Beschikbare instellingen

• Timerstijl
• Timerlettertype
• Timergrootte
• Timerkleur
• Timer achtergrondkleur
• Labellettertype
• Labelgrootte
• Labelkleur

Deze instellingen helpen bij het creëren van urgentie terwijl u de timer visueel in lijn houdt met uw storefront.

🎡 Spin Wheel Slice Styling

ℹ️ Deze sectie verschijnt alleen voor Spin Wheel PopUps.

Deze sectie regelt de visuele styling van de spinwielschijven en wielcomponenten. Door deze instellingen zorgvuldig aan te passen kan het wiel levendiger, speelser en aandachtsvoller aanvoelen voor bezoekers.

🎨 Kleuren knippen

Bedient afwisselend snijachtergrondkleuren.

Beschikbare instellingen

• Snij 1 kleur
• Snij 2 kleur

Deze kleuren wisselen door het hele wiel heen.

🔤 Snijlabelstijl

Controleert de tekst styling weergegeven op elke wiel schijf.

Beschikbare instellingen

• Labelkleur knippen
• Labelgrootte snijden
• Labellettertype knippen

💬 Berichtstijl knippen

Controleert de styling van schijfbeloning of winnende berichten.

Beschikbare instellingen

• Berichtlettertype knippen
• Berichtgrootte afsnijden
• Berichtkleur knippen

🎯 Wielcomponentkleuren

Bedient de resterende wielontwerpelementen.

Beschikbare instellingen

• Wielrandkleur
• Pijlkleur
• Middencirkelkleur

💻 Aangepaste CSS

💡 Geavanceerde gebruikers kunnen hun eigen aangepaste CSS-styling direct in de popup-editor toepassen.

Dit stelt u in staat om elementen aan te passen buiten de standaard ontwerpbesturingen. Het is vooral nuttig voor handelaren die willen geavanceerde styling, mobiele-specifieke aanpassingen, of diepere visuele aanpassing.

🧩 Gemeenschappelijke selectie

De editor biedt kant-en-klare selectoren zoals:

• .futureblink-popup
• .futureblink-popup .title
• .futureblink-popup .description
• .futureblink-popup .cta-button
• .futureblink-popup .close-btn

✅ CSS toepassen

Na het toevoegen van uw CSS:

→ Klik Toepassen om de stijlen onmiddellijk te testen.

ℹ️ Als stijlen niet correct van toepassing zijn, toevoegen !important bij elke aangifte wordt aanbevolen.

Voorbeeld

.futureblink-populp .title {
kleur: #000 !belangrijk;
}

🚀 Eindresultaat

Eenmaal succesvol geconfigureerd:

✅ Uw popup komt overeen met uw merkidentiteit
✅ Typografie, knoppen en ingangen voelen visueel consistent
✅ Coupon secties en timers kijken gepolijst
✅ Spin wiel popups worden meer visueel aantrekkelijk
✅ Animaties en overlays verbeteren de klantgerichtheid
✅ Aangepaste CSS geeft geavanceerde gebruikers diepere controle
✅ Klanten ervaren een schoner en professioneler popup ontwerp 🎨

Bijgewerkt op: 10/09/2026