> 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).
ThemeWare® "Hero-Countdown"
{% 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  "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.
***
## 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 %}
