> 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-kompakt.md).

# Countdown-Banner (kompakt)

Der **ThemeWare® "Countdown-Banner (kompakt)"** ist ein "Sale" Banner-Element für deine Erlebniswelten.

<figure><img src="/files/HoB1CzDFFL0QVw94hJXI" alt=""><figcaption><p>ThemeWare® "Countdown-Banner (kompakt)"</p></figcaption></figure>

{% 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 kompakte "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 (kompakt)" 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.

<figure><img src="/files/SYBurizmnhIAbvIVDogZ" alt=""><figcaption><p>ThemeWare® "Countdown-Banner (kompakt)" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Countdown-Banner (kompakt)" ist recht selbsterklärend und entspricht dem "Countdown-Banner" (siehe [Countdown-Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner.md)).

### Layout

Im Tab "Layout" kannst du zusätzlich die **Ausrichtung** (justifyContent) und die **maximale Breite** des Contents 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.

### Responsive

Im Tab "Responsive" kannst du den "Umbruch" des Counters konfigurieren (siehe [#breakpoint](#breakpoint "mention")).

***

## Breakpoint

Wähle den gewünschten Breakpoint aus. Der Banner wird ab diesem Viewport in einer Zeile dargestellt.

<div><figure><img src="/files/HoB1CzDFFL0QVw94hJXI" alt=""><figcaption><p>Einzeilig / Zeilen-Ausrichtung</p></figcaption></figure> <figure><img src="/files/Q7jJw7ubAkKLo8lyf8wF" alt=""><figcaption><p>Umbrochen / Spalten-Ausrichtung</p></figcaption></figure></div>

***

## 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

<div><figure><img src="/files/xyQIADT9D1gUSlEjwPFK" alt=""><figcaption><p>Schlichter Countdown</p></figcaption></figure> <figure><img src="/files/SlR5V1YHdSP1IB4jEgRb" alt=""><figcaption><p>Farbig hinterlegte Zahlen</p></figcaption></figure> <figure><img src="/files/whefTKxnP9pwJrfVYvnd" alt=""><figcaption><p>Bunt hinterlegte Zähler</p></figcaption></figure></div>

***

## 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 %}

***

## Textbausteine

* twt.cms.countdownBanner.days
* twt.cms.countdownBanner.hours
* twt.cms.countdownBanner.minutes
* twt.cms.countdownBanner.seconds