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


---

# Agent Instructions: 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:

```
GET https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/hero-countdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
