# Countdown - Banner

Das **Element** ist eine hervorragende Möglichkeit, Dringlichkeit zu erzeugen und zeitlich begrenzte Aktionen oder Events in deinem Shop hervorzuheben. 

Ob es sich um ein Sonderangebot, eine bevorstehende Veranstaltung oder einen Produkt-Launch handelt – der Countdown zieht die Aufmerksamkeit der Besucher auf sich und motiviert sie, rechtzeitig zu handeln.

{% hint style="info" %}
**Was macht das Countdown-Banner-Element genau?**

Der Countdown-Banner zeigt einen **Timer** an, der in **Echtzeit herunterzählt** und die verbleibende Zeit bis zu einem bestimmten Ereignis oder Angebot anzeigt. 
{% endhint %}

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2F6EVWe9zVVLSWq7yKNbqs%2FBildschirmfoto%202024-10-06%20um%2017.30.58.png?alt=media&#x26;token=97cb40d9-0747-4532-8eca-4f5e430aa1f5" alt=""><figcaption></figcaption></figure>

### Allgemeine - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FoQwfjH9BDFih34NZh0sG%2FBildschirmfoto%202024-10-06%20um%2017.32.12.png?alt=media&#x26;token=39ed7ba3-8765-49ff-b041-df3e7010a927" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="265">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Verlinkung (1)</td><td><a data-mention href="../konfigurationsbausteine/verlinkung">verlinkung</a></td></tr><tr><td>Timer (2)</td><td><a data-mention href="../konfigurationsbausteine/timer">timer</a></td></tr></tbody></table>

### Erweiterte - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FgGHGji7XVFKGlKBR6B3f%2FBildschirmfoto%202024-10-06%20um%2017.39.47.png?alt=media&#x26;token=f379ef2e-6080-4351-a60b-8053def3cb4e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="263">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Überschrift (1)</td><td>Hier kannst du die Überschrift für den Banner setzen</td></tr><tr><td>Untertitel (2)</td><td>Hier kannst du den Untertitel für den Banner setzen</td></tr><tr><td>Button - Einstellungen (3)</td><td><a data-mention href="../konfigurationsbausteine/button">button</a></td></tr></tbody></table>

### Layout - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FHghdmvUFO4oGY3UmLgL4%2FBildschirmfoto%202024-10-06%20um%2017.59.30.png?alt=media&#x26;token=a408a345-18f8-4f8d-b65f-ea1db6b86905" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="248">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Hintergrundbild (1)</td><td>Statt einer Farbe, kann hier auch ein Hintergrundbild gesetzt werden</td></tr><tr><td>Struktureinstellungen (2)</td><td>Die Breite und der Innenabstand kann hier für das gesamte Element definiert werden.</td></tr><tr><td>Farbeinstellungen (3)</td><td>Achte auf eine kontrastreiche Darstellung damit Inhalte gut lesbar sind</td></tr><tr><td>Ausrichtung (4)</td><td>Die vertikale- und horizontale Ausrichtung des Inhalts</td></tr></tbody></table>

### Mobile - Einstellungen

{% content-ref url="../konfigurationsbausteine/schriftgrosse" %}
[schriftgrosse](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/schriftgrosse)
{% endcontent-ref %}

### SEO - Einstellungen

{% content-ref url="../konfigurationsbausteine/seo" %}
[seo](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/seo)
{% endcontent-ref %}