> 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/hero-countdown.md).

# Hero-Countdown (Überschrift)

Der **ThemeWare® "Hero-Countdown"** ist ein "Sale" Banner der aus zwei Elementen besteht:

1. Hero-Countdown (Überschrift)
2. [Countdown-Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner.md)

Diese Anleitung bezieht sich auf das Element "**Hero-Countdown (Überschrift)**". Für mehr Informationen zum Element "Countdown-Banner" schaue bitte in die folgende Anleitung: [Countdown-Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner.md).

<figure><img src="/files/vckR8IJ0ZcbzrVNdke6K" alt=""><figcaption><p>ThemeWare® "Hero-Countdown"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Die Elemente sind explizit für die Verwendung in ihren eigenen CMS-Blöcken vorgesehen. Sie sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lassen 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 %}

***

## Element konfigurieren

Die ThemeWare® "Hero-Countdown (Überschrift)" 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/17zo4ChlTzkdV1izgqrM" alt=""><figcaption><p>ThemeWare® "Hero-Countdown (Überschrift)" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration für der "Hero-Countdown (Überschrift)" ist recht selbsterklärend. Die **Headline** und das **Bild** sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.

### Allgemein

Im Tab "Allgemein" konfigurierst du den Content des Elementes.

> **Text**
>
> Im Abschnitt "Text" trägst du die gewünschte Überschrift ein. Die Überschrift ist ein Pflichtfeld.
>
> **Bild**
>
> Im Abschnitt "Bild" definierst du das Hintergrundbild des Banners. Das Bild ist ein Pflichtfeld. Zusätzlich kannst du die **minimale Höhe** (Pflichtfeld) und den **Anzeigemodus** (Cover/Contain) konfigurieren.

### Layout

Im Tab "Layout" hast du diverse Gestaltungsmöglichkeiten für den **Text** und ein **Farb-Overlay**.

> **Text**
>
> Im Abschnitt "Text" kannst du die **Schriftart** und **Textfarbe** jeweils für die Überschrift konfigurieren. Zusätzlich kannst du die **maximale Breite** der Überschrift konfigurieren.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift sowie das "Lazy Loading" vom Bild 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.

***

## Bild (Hintergrundbild)

Wie du an der Vorschaugrafik vom "Hero-Countdown (Überschrift)" 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 %}