# Countdown-Banner (kompakt)

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

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F5SQURjiXmneBrzGDKVxI%2Fcms-element--countdown-banner-compact.png?alt=media&#x26;token=e24598dd-7681-45fc-b5a0-9f23c656f4b9" 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 ![](https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FIZM6GLQF0MWHOXpClvGX%2Ficon-cog.png?alt=media\&token=b20c0af0-cbac-4884-89df-58b77f274c9d) "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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FmmG1iXKCmWuT7GJEDhwe%2Fimage.png?alt=media&#x26;token=0b78916e-fa98-45ae-9f49-88d73b66fe9b" 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](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner "mention")).

### 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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F5SQURjiXmneBrzGDKVxI%2Fcms-element--countdown-banner-compact.png?alt=media&#x26;token=e24598dd-7681-45fc-b5a0-9f23c656f4b9" alt=""><figcaption><p>Einzeilig / Zeilen-Ausrichtung</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FIkcoROuKeJGNMJvbz15s%2Fimage.png?alt=media&#x26;token=251c6059-dd4c-42c7-b809-c370f0858bba" 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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FHRbEf24GOKExJfDFCxmQ%2Fimage.png?alt=media&#x26;token=7a5aecdf-82e4-4bfe-b672-22251b1bb01b" alt=""><figcaption><p>Schlichter Countdown</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FWsbGZ9C1nP5WjXE450xS%2Fimage.png?alt=media&#x26;token=96b763d3-16ee-4d47-bdd6-1d18309f72d8" alt=""><figcaption><p>Farbig hinterlegte Zahlen</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F3XtXagOioO2nqacdNbHN%2Fimage.png?alt=media&#x26;token=5737bfec-3c80-43fe-b39d-2b0eecb68abe" 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