> ## 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). # 🎨 PopUps — Design & Styling > ℹ️ **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 🎨 ---