ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Die Registerkarte Design gibt Ihnen die volle Kontrolle darüber, wie Ihr Popup auf der Storefront aussieht und sich anfühlt. Von Vorlagen und Typografie bis hin zu Animationen, Farben, Schaltflächen, Coupon-Styling und sogar benutzerdefiniertem CSS - fast jedes visuelle Element kann an Ihre Markenidentität angepasst werden.

In diesem Leitfaden werden alle verfügbaren Designoptionen erläutert, sodass Sie sicher polierte, hochkonvertierende Popups erstellen können.

⚠️ Bevor Sie beginnen

So konfigurieren Sie Design-Einstellungen:

→ Öffnen Sie ein bestehendes Popup
Oder erstellen Sie zuerst ein neues Popup

Dann wechseln Sie zum Design Tab im Popup-Editor.

ℹ️ Einige Designabschnitte werden nur für bestimmte Popup-Typen oder aktivierte Funktionen angezeigt.

Beispiele

• Countdown Timer Styling erscheint nur für Countdown PopUps
• Coupon-Styling wird nur angezeigt, wenn die Coupon-Anzeige aktiviert ist
• Slice Styling erscheint nur für Spin Wheel PopUps

🎨 Meldebogen

Mit Vorlagen können Sie sofort vorgefertigte visuelle Stile auf Ihr Popup anwenden. Dies hilft Händlern, professionell gestaltete Popups schnell zu starten, ohne jede individuelle Designeinstellung manuell zu konfigurieren.

Dies ist nützlich, wenn Sie ein professionell gestaltetes Popup wünschen, ohne jede Einstellung manuell anzupassen.

Verfügbare Beispiele

• Morgendämmerung
• Schwarzer Freitag
• Schönheit
• Festlich
• Wald
• Ozean
• Wasser
• Elektrisch
• Partei

Sie können die ausgewählte Vorlage anschließend weiter anpassen.

👀 Sichtbarkeit

Steuert, auf welchen Geräten das Popup erscheinen soll. Dies hilft, gezieltere Popup-Erlebnisse zu schaffen, je nachdem, ob Kunden von Desktop- oder mobilen Geräten aus surfen.

Verfügbare Optionen

• Desktop und Mobile überall sichtbar
• Nur Desktop - versteckt auf mobilen Geräten
• Nur mobil - versteckt auf Desktop-Geräten

Dies ist nützlich, wenn Sie gerätespezifische Kampagnen erstellen.

🖼️ Popup Hintergrund

Dieser Abschnitt steuert das Popup-Fenster Hintergrund-Styling. Hintergrund-Styling spielt eine wichtige Rolle, wie visuell ansprechend und aufmerksamkeitsstark sich das Popup auf der Storefront anfühlt.

Einfarbiger Hintergrund

Verwendet eine solide Hintergrundfarbe für das Popup.

Sie können:

• Wählen Sie eine Farbe visuell
• Oder fügen Sie einen HEX-Farbcode manuell ein

Gradientenhintergrund

Erzeugt einen zweifarbigen Gradienteneffekt.

Wenn aktiviert, werden zusätzliche Einstellungen angezeigt:

• Gradientenwinkelgrad
• Anfangsneigungsfarbe
• Endgradientenfarbe

ℹ️ Gradientensteuerungen werden erst aktiv, nachdem Gradientenhintergrund aktiviert wurde.

🌫️ Overlay-Hintergrund

Steuert das Storefront-Overlay, das hinter dem Popup angezeigt wird. Das Overlay hilft, den Kundenfokus auf das Popup zu verlagern, indem es es visuell vom Rest des Storefront-Inhalts trennt.

Wenn sich beispielsweise ein Popup öffnet, kann der Rest der Storefront mit einem transparenten dunklen Overlay verdunkelt erscheinen, um die Aufmerksamkeit auf das Popup zu lenken.

Verfügbare Optionen

• Kein Hintergrund Popup erscheint ohne gedimmtes Overlay
• Dim Hintergrund - fügt ein halbtransparentes Overlay hinter dem Popup hinzu

📐 Popup Layout und Border

Diese Einstellungen steuern die gesamte Popup-Struktur und -Form. Das richtige Anpassen von Abstand, Grenzen und Größen hilft dem Popup, sich sauberer, ausgeglichener und visuell poliert zu fühlen.

📏 Größe des Popups

Steuert die Gesamtabmessungen des Popups.

Verfügbare Optionen

• Klein
• Medium
• Groß
• Volle Seite

Größere Popup-Größen bieten mehr Platz für Bilder, Produkte und zusätzliche Inhalte.

🎨 Popup Fenster Hintergrundfarbe

Legt die Hintergrundfarbe des Popup-Containers selbst fest.

Sie können:

• Verwenden Sie den Color Picker
• Oder geben Sie manuell einen HEX-Farbcode ein

🟦 Eckenradius

Steuert, wie abgerundet die Popup-Ecken erscheinen.

Beispiele

• Niedrigere Werte → schärfere Ecken
• Höhere Werte → weichere abgerundete Ecken

🧱 Grenzgröße

Kontrolliert die Dicke des Popup-Rands.

Der Wert wird in Pixeln gemessen.

🎨 Randfarbe

Legt die Farbe des Popup-Rahmens fest.

✨ Popup Animation

Steuert, wie das Popup in den Bildschirm gelangt. Eingangsanimationen helfen dem Popup, sich glatter und interaktiver zu fühlen, während es auch für Besucher spürbarer wird.

Verfügbare Optionen

• Fade
• Schlitten
• Hüllen

Animationen tragen dazu bei, dass sich das Popup glatter und interaktiver anfühlt.

🔘 Schwimmender Knopf

ℹ️ Dieser Abschnitt erscheint nur, wenn Floating Action Button ist in der Inhalt Tab.

Mit den Floating-Button-Einstellungen können Sie das Aussehen der Schaltfläche anpassen, auf die Besucher klicken, um Ihr Popup zu öffnen. Diese Optionen helfen Ihnen, den Button mit dem Branding Ihres Shops abzustimmen, während er auffällig und einfach zu interagieren ist.

Verfügbare Einstellungen

🔷 Form

Wählen Sie die Gesamtform des Floating Buttons.

Verfügbare Optionen

• abgerundet
• Quadrat
• Pille
• Kreis

🎨 Knopffarbe

Steuert die Farbe des Symbols oder Texts, der auf dem Floating-Button angezeigt wird.

Sie können:

• Wählen Sie eine Farbe mit dem Color Picker
• Geben Sie einen HEX-Farbcode manuell ein

🖌️ Schriftgröße

Steuert die Größe des Symbols oder Texts, der im Floating-Button angezeigt wird.

Der Wert wird in Pixeln gemessen.

🟫 Hintergrundfarbe

Legt die Hintergrundfarbe des Floating Buttons fest.

Sie können:

• Wählen Sie eine Farbe mit dem Color Picker
• Geben Sie einen HEX-Farbcode manuell ein

🌑 Schatten

Fügt einen optionalen Schatteneffekt um den Floating-Button hinzu.

Verfügbare Optionen

• Keine
• Klein
• Medium
• Groß

🧱 Randfarbe

Steuert die Farbe des Floating Button Border.

📐 Eckenradius

Steuert, wie abgerundet die Ecken des Floating-Buttons erscheinen.

Höhere Werte erzeugen ein weicheres, abgerundeteres Erscheinungsbild.

🔤 Typografie

Typografieeinstellungen steuern, wie alle Textelemente im Popup erscheinen. Diese Einstellungen tragen dazu bei, die visuelle Konsistenz zwischen Überschriften, Beschreibungen, Schaltflächen und Validierungsnachrichten zu erhalten, so dass sich das Popup professionell gestaltet und einfacher zu lesen anfühlt.

Die App unterstützt integrierte Fonts zusammen mit Theme Fonts.

🏷️ Titel Typografie

Steuert das Popup-Titelstyling.

Verfügbare Einstellungen

• Titel:
• Titelgröße
• Titelfarbe

📝 Beschreibung Typografie

Steuert das Popup Description Styling.

Verfügbare Einstellungen

• Beschreibungsbogen
• Beschreibung Größe
• Beschreibungsfarbe

⚠️ Fehlermeldung Typografie

Fehlermeldungen zur Validierung von Steuerelementen für beide:

• E-Mail Felder
• Felder für Telefonnummern

Verfügbare Einstellungen

• Fehlermeldung
• Größe der Fehlermeldung
• Fehlermeldung Farbe

📝 Input Field Styling

Dieser Abschnitt steuert das Aussehen der E-Mail- und Telefonnummerneingabefelder. Das richtige Eingabe-Styling verbessert die Lesbarkeit und hilft Formularen, sich vertrauenswürdiger und visuell auf Ihr Storefront-Branding auszurichten.

Verfügbare Einstellungen

• Eingabetextfarbe
• Hintergrundfarbe
• Eingangsrandfarbe

Diese Einstellungen helfen Ihren Formularfeldern, Ihrem Storefront-Branding zu entsprechen.

🔘 Button Styling

Steuert das Design des Popup Call-to-Action-Buttons. Da der Button normalerweise das Hauptkonvertierungselement im Popup ist, kann das richtige Styling die Klick- und Interaktionsraten erheblich verbessern.

🔤 Knopfschrift

Wählen Sie die Schriftfamilie, die in der Schaltfläche verwendet wird.

Sie können verwenden:

• Themenschriften
• Eingebaute Schriftarten

🎨 Knopffarbe

Steuert die Taste Hintergrundfarbe.

🔠 Taste Textgröße und Farbe

Diese Einstellung steuert:

• Textgröße (linkes Feld)
• Textfarbauswahl (mittleres Feld)
• HEX-Farbwert (rechtes Feld)

Beispiel

• Weißer Text auf Dark Button
• Kleiner schwarzer Text auf hellem Button

◼️ Eckradius

Steuert, wie abgerundet die Knopfecken erscheinen.

Höhere Werte erzeugen weichere Buttons.

🎟️ Coupon Styling

ℹ️ Dieser Abschnitt wird nur angezeigt, wenn die Coupon-Anzeige innerhalb der Registerkarte Inhalt aktiviert ist.

Dieser Abschnitt steuert das Aussehen des Coupon-Code-Containers. Ein visuell gestalteter Coupon-Bereich macht Rabatte deutlicher und ermutigt die Besucher, das Angebot während des Checkouts zu kopieren und zu nutzen.

🧾 Coupon Border Stil

Wählen Sie den Grenzstil, der den Couponbereich umgibt.

Verfügbare Beispiele

• fest
• Gestrichelt

🎨 Randfarbe

Kontrolliert die Coupon-Grenzfarbe.

🔤 Textfarbe

Steuert die Textfarbe, die im Coupon-Bereich angezeigt wird.

🖼️ Hintergrundfarbe

Steuert die Hintergrundfarbe des Coupon-Containers.

❎ Close Icon Styling

Steuert das Aussehen des Popup Close-Symbols. Auch wenn es sich um ein kleines Element handelt, hilft die Abstimmung des Icon-Stylings mit dem gesamten Popup-Design, eine sauberere und polierte Benutzererfahrung zu erhalten.

Verfügbare Einstellungen

• Close Icon Farbe
• Icon Größe

Verfügbare Größenoptionen

• Klein
• Medium
• Groß

⏱️ Countdown Timer Styling

ℹ️ Dieser Abschnitt erscheint nur für Countdown PopUps.

Steuert das visuelle Erscheinungsbild des Countdown-Timers. Das richtige Timer-Styling hilft, Dringlichkeit zu erzeugen, während sichergestellt wird, dass der Countdown lesbar und visuell konsistent mit dem Rest des Popup-Designs bleibt.

Verfügbare Einstellungen

• Timerstil
• Timer Font
• Größe des Timers
• Timerfarbe
• Hintergrundfarbe des Timers
• Label Font
• Etikettengröße
• Etikettenfarbe

Diese Einstellungen helfen, Dringlichkeit zu erzeugen, während der Timer visuell auf Ihre Storefront ausgerichtet bleibt.

🎡 Spin Wheel — Slice Styling

ℹ️ Dieser Abschnitt erscheint nur für Spin Wheel PopUps.

Dieser Abschnitt steuert das visuelle Styling der Scheiben und Radkomponenten. Wenn Sie diese Einstellungen sorgfältig einstellen, kann sich das Rad für die Besucher lebendiger, verspielter und aufmerksamer anfühlen.

🎨 Scheibenfarben

Steuert abwechselnde Schicht Hintergrundfarben.

Verfügbare Einstellungen

• Scheibe 1 Farbe
• Slice 2 Farbe

Diese Farben wechseln sich im gesamten Rad ab.

🔤 Slice Label Styling

Steuert das Text-Styling, das auf jeder Radscheibe angezeigt wird.

Verfügbare Einstellungen

• Slice Label Farbe
• Slice Label Größe
• Slice Label Font

💬 Slice Message Styling

Steuert das Styling von Slice-Belohnungen oder Gewinnnachrichten.

Verfügbare Einstellungen

• Slice Message Font
• Slice Message Größe
• Slice Message Farbe

🎯 Farben der Radkomponenten

Steuert die restlichen Radkonstruktionselemente.

Verfügbare Einstellungen

• Radrandfarbe
• Pfeilfarbe
• Mittelkreisfarbe

💻 Custom CSS

💡 Fortgeschrittene Benutzer können ihr eigenes CSS-Styling direkt im Popup-Editor anwenden.

Auf diese Weise können Sie Elemente über die Standard-Design-Steuerelemente hinaus anpassen. Es ist besonders nützlich für Händler, die fortgeschrittenes Styling, mobile spezifische Anpassungen oder eine tiefere visuelle Anpassung wünschen.

🧩 Gemeinsame Selektoren

Der Editor bietet vorgefertigte Selektoren wie:

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

✅ Anwendung von CSS

Nach dem Hinzufügen Ihres CSS:

→ Klicken Beantragen um die Stile sofort zu testen.

ℹ️ Wenn Stile nicht korrekt angewendet werden, Hinzufügen !important zu jeder Erklärung wird empfohlen.

Beispiel

.futureblink-popup .title
Farbe: #000 !wichtig;
}

🚀 Endergebnis

Einmal erfolgreich konfiguriert:

✅ Dein Popup passt zu deiner Markenidentität
✅ Typografie, Buttons und Eingaben fühlen sich visuell konsistent an
✅ Coupon-Abschnitte und Timer sehen poliert aus
✅ Spin Wheel Popups werden visuell ansprechender
✅ Animationen und Overlays verbessern den Kundenfokus
✅ Custom CSS bietet fortgeschrittenen Benutzern eine tiefere Kontrolle
✅ Kunden erleben ein saubereres und professionelleres Popup-Design 🎨

Aktualisiert am: 10/09/2026