> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner.md). # Countdown-Banner Der **ThemeWare® "Countdown-Banner"** ist ein "Sale" Banner-Element für deine Erlebniswelten.

ThemeWare® "Countdown-Banner"

{% hint style="info" %} **Hinweis**: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren. {% endhint %} {% hint style="warning" %} **Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar. {% endhint %} *** Der "Countdown-Banner" hat zwei Phasen: 1. Vorlauf-Phase 2. Sale-Phase #### 1. Vorlauf-Phase Die Vorlauf-Phase ist ein Countdown bis zum Beginn des eigentlichen Sales. Dadurch bietet sich die Möglichkeit für einen bevorstehenden Sale zu werben. {% hint style="success" %} **Tipp**: Verlinke den Button mit deiner Newsletter-Anmeldung-Seite oder mit dem Scroll-Anker `#newsletterSubscription` vom ThemeWare® Newsletter Footer-Widget. {% endhint %} #### 2. Sale-Phase Die Sale-Phase ist ein Countdown bis zum Ende des entsprechenden Sales. {% hint style="success" %} **Tipp**: Verlinke den Button zu einer Sale-Kategorie oder -Landingpage. {% endhint %} #### Sale beendet Nach Ablauf beider Phasen wird der Block per CSS ausgeblendet. Entferne es dann zum nächstmöglichen Zeitpunkt aus der entsprechenden Erlebniswelt. *** ## Element konfigurieren Den ThemeWare® "Countdown-Banner" kannst du wie folgt konfigurieren: 1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren 2. Fahre mit der Maus über das entsprechende CMS-Element 3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren 4. Es öffnet sich das Pop-up "Element-Einstellungen" 5. Nehme die gewünschten Änderungen vor 6. Speichere deine Änderungen Du hast das CMS-Element nun konfiguriert.

ThemeWare® "Countdown-Banner" konfigurieren

*** ## Konfiguration Die Konfiguration vom "Countdown-Banner" ist recht selbsterklärend. Das **Datum des Sales** ("Sale von" und "Sale bis"), **die Titel** (der Vorlauf- und der Sale-Phase), das **Bild** und die "**Minimale Höhe**" sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren. ### Allgemein Im Tab "Allgemein" konfigurierst du den Content des Elementes. > **Sale** > > Im Abschnitt "Sale" legst du das Datum des Sales ("Sale von" und "Sale bis") fest. Wähle ein Datum für die Vorlauf- und ein Datum für die Sale-Phase aus, damit der Countdown für beide Phasen berechnet werden kann. > > **Text** > > Im Abschnitt "Text" kannst du Texte für die Vorlauf-Phase eingeben. Der Titel ist ein Pflichtfeld. > > **Text (Sale)** > > Im Abschnitt "Text (Sale)" kannst du Texte für die Sale-Phase eingeben. Der Titel ist ein Pflichtfeld. > > **Bild** > > Im Abschnitt "Bild" definierst du das Hintergrundbild des Banners. Das Bild und die "Minimale Höhe" (Standard: `300px`) sind Pflichtfelder. Zusätzlich kannst du das **Scroll-Verhalten** (Attachment) des Bildes konfigurieren (scroll/fixed). > > **Link** > > Im Abschnitt "Link" definierst du das Ziel des Buttons der Vorlauf-Phase. Wir empfehlen die Newsletter-Anmeldung zu verlinken (siehe oben). > > **Link (Sale)** > > Im Abschnitt "Link (Sale)" definierst du das Ziel des Buttons der Sale-Phase fest. Wir empfehlen eine entsprechende Sale-Kategorie zu verlinken (siehe oben). ### Layout Im Tab "Layout" hast du diverse Gestaltungsmöglichkeiten für den **Text**, die **Buttons** und ein **Farb-Overlay**. > **Allgemein** > > Im Abschnitt "Allgemein" kannst du die **Hintergrundfarbe** sowie die **horizontale Ausrichtung** und **vertikale Ausrichtung** des Contents konfigurieren. > > **Text** > > Im Abschnitt "Text" kannst du die **Schriftart** und **Textfarbe** jeweils für den Text, den Titel und den Untertitel konfigurieren. > > **Button** > > Im Abschnitt "Button" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button gefüllt oder als Outline-Button dargestellt werden soll. > > **Farb-Overlay** > > Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden. ### Counter Im Tab "Counter" kannst du den Counter konfigurieren. > **Layout** > > Im Abschnitt "Layout" kannst du die gewünschte **Darstellungsart** auswählen (siehe [#darstellungsarten](#darstellungsarten "mention")). > > **Zahlen** > > Im Abschnitt "Zahlen" kannst du die **Schriftart**, **Textfarbe** und **Hintergrundfarbe** der Zahlen des Counters konfigurieren. Für die Darstellungsart "Bunt hinterlegte Zähler" können individuelle Hintergrundfarben für **Tage**, **Stunden**, **Minuten** und **Sekunden** konfiguriert werden. > > **Labels** > > Im Abschnitt "Labels" kannst du die **Schriftart** und **Textfarbe** der Labels (Text unter den Zahlen) des Counters konfigurieren. ### SEO & Pagespeed Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel konfigurieren. ### Erweitert Du kannst zwar jedes HTML-Element unserer Banner über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen. *** ## Darstellungsarten Derzeit stehen dir drei verschiedene Darstellungsarten (siehe Screenshots unten) für den Counter zur Verfügung: * Schlichter Countdown * Farbig hinterlegte Zahlen * Bunt hinterlegte Zähler ### Screenshots

Schlichter Countdown

Farbig hinterlegte Zahlen

Bunt hinterlegte Zähler

*** ## Bild (Hintergrundbild) Wie du an der Vorschaugrafik vom "Countdown-Banner" erkennen kannst, ist es für die Lesbarkeit sinnvoll dem Text etwas "Raum" zu lassen. {% hint style="success" %} **Tipp**: Damit du das perfekte Hintergrundbild bauen kannst, findest du in den [ThemeWare® Utilities](https://service.themeware.design/themeware-utilities) eine **PSD-Vorlagen für CMS-Elemente**. {% endhint %} *** ## FAQ ### Wie misst der Countdown die Zeit? Unser Countdown basiert auf einer **absoluten, weltweit einheitlichen Zeitmessung**. Das bedeutet, dass die **verbleibende Zeit für alle Nutzer auf der Welt gleich ist**, unabhängig von der jeweiligen Zeitzone. * Der Countdown nutzt eine **fixe Endzeit**, die in einer bestimmten Zeitzone (z. B. `Europe/Berlin`) konfiguriert wurde. * Intern wird diese Zeit als **Unix-Timestamp (Millisekunden seit 1970)** gespeichert. * Beim Laden der Seite berechnet das System die **verbleibende Zeit**, indem es die aktuelle Zeit vom Endzeitpunkt abzieht. * Die aktuelle Zeit wird dabei **in UTC gemessen**, um eine **globale Konsistenz zu gewährleisten**. **Das bedeutet:** Die verbleibende Zeit wird für alle Nutzer gleich berechnet – egal, ob jemand in Berlin, New York oder Tokio ist. ### Warum könnte deine Zeit anders angezeigt werden? 1. **Deine lokale Zeitzoneneinstellung ist falsch** * Der Countdown zeigt die verbleibende Zeit basierend auf der korrekten lokalen Systemzeit an. * Falls dein Gerät eine falsche Zeitzone verwendet, kann das die Anzeige beeinflussen. 2. **Dein Gerät hat eine manuell verstellte Zeit** * Falls die Uhrzeit auf deinem Computer oder Smartphone nicht mit der realen Zeit synchronisiert ist, kann der Countdown eine falsche verbleibende Zeit anzeigen. * Prüfe, ob dein Gerät die Zeit automatisch über das Internet synchronisiert. 3. **Deine Zeitzone wurde durch die Sommer-/Winterzeit verändert** * Falls du dich in einer Region befindest, die gerade die Sommerzeit aktiviert hat, aber dein System dies nicht korrekt übernommen hat, kann es zu einer Differenz kommen. *** ## Textbausteine * twt.cms.countdownBanner.days * twt.cms.countdownBanner.hours * twt.cms.countdownBanner.minutes * twt.cms.countdownBanner.seconds