> 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner-kompakt.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.