# 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  "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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.