Countdown gestalten
Ändern Sie Farben, Schriften, Hintergründe, Rahmen und Abstände, damit ein Countdown zu Ihrem Shop passt.
Eine Vorlage gibt Ihnen einen Ausgangslook. Auf dem Tab Design machen Sie ihn zu Ihrem eigenen – oder bauen ihn komplett neu auf, denn jeder Teil lässt sich bearbeiten.
Countdown-Timer und voraussichtliche Liefertermine haben einen vollständigen Tab Design. Lagerbestands- und Warenkorb-Countdowns haben weniger Optionen und halten sie stattdessen im Tab Settings bereit.
Der Tab „Design“, mit einer Vorschau, die sich bei jeder Änderung aktualisiert.
Vorlage wechseln
Abschnitt betitelt „Vorlage wechseln“Sie sind nicht an das Design gebunden, das Sie zu Beginn gewählt haben. Öffnen Sie die Vorlagenauswahl im Builder und wählen Sie eine andere – die Jahreszeiten und Anlässe sind oben als Tabs angeordnet: Default, New year, Valentine, Summer Sale, Moon Festival, Halloween, Black Friday, Christmas und Winter Sales.
Beim Wechsel der Vorlage wird das Design ersetzt. Ihre Texte, Zeitangaben und Bedingungen bleiben erhalten.
Design des Countdown-Timers
Abschnitt betitelt „Design des Countdown-Timers“Der Tab „Design“ des Timers hat vier Bereiche sowie eigenes CSS.
Design Main Section
Abschnitt betitelt „Design Main Section“Der äußere Container des Countdowns – das Feld, in dem alles andere sitzt.
| Gruppe | Einstellungen |
|---|---|
| Background | Eine einfarbige Fläche oder ein hochgeladenes Bild. Bei Farbe erhalten Sie eine Main background color mit getrennten Werten für Left und Right: Eine einfarbige Fläche hat auf beiden Seiten dieselbe Farbe, ein Verlauf zwei |
| Overlay image | Dunkelt ein hochgeladenes Hintergrundbild ab, damit Text darauf lesbar bleibt |
| Text | Die Schrift für den gesamten Countdown. Aktivieren Sie Use custom font style, um Schriftfamilie und Schriftstärke zu wählen |
| Padding | Abstand innerhalb des Felds, festgelegt als Top / Right und Bottom / Left |
| Border | Rahmenstärke, Eckenradius, Stil – Solid, Dotted oder Dashed – und Farbe |
| Shadow | Yes oder No |
Elementgestaltung: Title und Subtitle
Abschnitt betitelt „Elementgestaltung: Title und Subtitle“Title und Subtitle haben jeweils eigene Schrift, Schriftgröße, Farbe und Abstände. Hier lassen Sie den Titel dominieren und den Untertitel zurücktreten oder rücken beide näher zusammen.
Design Timer Section
Abschnitt betitelt „Design Timer Section“Die Ziffern selbst.
| Gruppe | Einstellungen |
|---|---|
| Font | Timer font size für die Zahlen und Label font size für die Wörter darunter |
| Border | Stärke und Stil des Rahmens um jede Einheit |
| Color | Number color, Data text color für die Beschriftungen, Background color für das Feld jeder Einheit, Dot color für die Trennzeichen und Border color |
| Padding | Abstand innerhalb des Felds jeder Einheit |
Mit Hintergrund und Rahmen für die Einheiten erhalten Sie den Kastenlook; lassen Sie beides leer, erscheinen schlichte Zahlen auf dem Feld.
Wenn Sie den Button aktiviert haben, hat er einen eigenen Rahmen (Radius, Stärke, Stil), eigene Farben (Hintergrund, Text, Rahmen) und eigenen Abstand.
Design Mobile Section
Abschnitt betitelt „Design Mobile Section“Getrennte Schriftgrößen für Smartphones, in der App beschrieben als „Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.“
Sie können mobile Größen für Title, Subtitle, Timer number und Timer label festlegen, dazu mobilen Abstand.
Diesen Bereich sollten Sie bei jedem Countdown kurz prüfen. Ein Titel, der am Desktop mit 25 px gut lesbar ist, ist auf dem Smartphone meist zu groß, und vier Timer-Einheiten in Desktop-Größe brechen oft um oder laufen über.
Design des voraussichtlichen Liefertermins
Abschnitt betitelt „Design des voraussichtlichen Liefertermins“Der Tab „Design“ eines Liefertermins ist passend zu seinen zwei Teilen aufgeteilt:
- Design Main Widget – die Nachricht: Schriften, Farben, Größe, Rahmen, Abstände.
- Design Process Widget – die Leiste Ordered → Dispatched → Delivered: Symbole, Farben und Abstände.
Wenn Ihr Layout Message only oder Progress bar only ist, zählt nur die jeweilige Hälfte.
Design von Lagerbestands- und Warenkorb-Countdowns
Abschnitt betitelt „Design von Lagerbestands- und Warenkorb-Countdowns“Bei diesen beiden befinden sich die Design-Einstellungen im Tab Settings.
Der Stock countdown bietet Alignment, getrennte Farben für Nachricht, Slider, Bestandszahl und Hintergrund sowie eine Animation – None, Flash oder Pulse.
Der Cart countdown bietet Position, Farben für Nachricht, Timer und Hintergrund, Rahmen und Schriften.
Eigenes CSS
Abschnitt betitelt „Eigenes CSS“Jeder Typ endet mit einem Feld Custom CSS (Developer Zone) für alles, was die Einstellungen nicht abdecken. Siehe Eigenes CSS.
Praktische Tipps
Abschnitt betitelt „Praktische Tipps“Orientieren Sie sich an Ihrem Theme. Ein Countdown in Ihren Markenfarben wirkt wie ein Teil des Shops; einer in den Standardfarben der Vorlage wirkt aufgesetzt. Die Akzentfarbe Ihres Themes ist meist die richtige Hintergrundfarbe.
Kontrast ist wichtiger als Farbe. Auf die Zahlen kommt es an – stellen Sie sicher, dass sie sich vom Hintergrund abheben, auch bei kleinen Größen.
Prüfen Sie es auf einer echten Seite. Die Vorschau zeigt den Countdown allein auf seinem eigenen Hintergrund. Auf Ihrer Produktseite konkurrieren Preis, Button und Bilder mit ihm.
Prüfen Sie es auf dem Smartphone. Nutzen Sie die Design Mobile Section, statt hinzunehmen, was die Desktop-Größen auf einem kleinen Bildschirm ergeben.