> 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/discount-banner.md).

# Discount-Banner

Der **ThemeWare® "Discount-Banner"** ist ein "Sale" Banner-Element für deine Erlebniswelten. Du kannst ihn einsetzen um auf besondere Rabatte bzw. Sales hinzuweisen.

<figure><img src="/files/00nkGAwVFHSiAd9Vqwnx" alt=""><figcaption><p>ThemeWare® "Discount-Banner"</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 %}

***

## Element konfigurieren

Den ThemeWare® "Discount-Banner" 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/zvJqPmmLe2Dx23oYG1s8" alt=""><figcaption><p>ThemeWare® "Discount-Banner" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Discount-Banner" ist recht selbsterklärend. Der **Titel** und der **Rabatt** 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 den Text für den Banner ein. Du kannst einen Titel (3) und einen Untertitel (4) eingeben. Der Titel ist ein Pflichtfeld.
>
> **Rabatt**
>
> Im Abschnitt "Rabatt" trägst du den gewünschten Rabatt (1) ein den du bewerben möchtest. Dies ist ein Pflichtfeld.
>
> **Link**
>
> Im Abschnitt "Link" definierst du das Ziel des Banners. Wir empfehlen eine entsprechende Sale-Kategorie zu verlinken.

### Layout

Im Tab "Layout" hast du diverse Gestaltungsmöglichkeiten für den **Text** und den **Rabatt**.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die **allgemeine Hintergrundfarbe** (2) konfigurieren.
>
> **Text**
>
> Im Abschnitt "Text" kann die **Schriftart** und **Textfarbe** vom Titel (3) und Untertitel (4) konfiguriert werden.
>
> **Rabatt**
>
> Im Abschnitt "Rabatt" kann die **Schriftart**, **Textfarbe** und **Hintergrundfarbe** vom Rabatt (1) konfiguriert werden.

<figure><img src="/files/pLjIuWt6PXettvXt3knn" alt=""><figcaption><p>Elemente vom "Discount-Banner"</p></figcaption></figure>

### 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.

***

## Beispiele

<div><figure><img src="/files/CeVElVeghV2MEynQX8rt" alt=""><figcaption></figcaption></figure> <figure><img src="/files/h7VvmiBp3tTmjHBW3SAz" alt=""><figcaption></figcaption></figure></div>