> 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/banner/advanced-banner.md).
# Advanced-Banner
{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}
Der **ThemeWare® "Advanced-Banner"** ist ein Banner-Element für deine Erlebniswelten. Du kannst ihn optimal als Trennelement in Boxed und Full-width Layouts einsetzen.
ThemeWare® "Advanced-Banner"
{% 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="success" %}
**Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}
{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}
***
## Element konfigurieren
Den ThemeWare® "Advanced-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  "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.
ThemeWare® "Advanced-Banner" konfigurieren
***
## Konfiguration
Die Konfiguration vom "Advanced-Banner" ist recht selbsterklärend. Das **Bild** und die "**Minimale Höhe**" sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
### Allgemein
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du die **Überschrift** (3), die **Zwischenüberschrift** (4), den **Text** (5) und den **Button-Text** (6+7) für den Banner eingeben. Der Text ist ein Pflichtfeld.
>
> **Bild**
>
> Im Abschnitt "Bild" definierst du das Hintergrundbild des Banners. Die "Minimale Höhe" ist ein Pflichtfeld (Standard: `340px`).
>
> Beta: Du kannst in Layout vom Typ "Kategorieseite" das Kategorie-Bild mappen.
>
> **Link**
>
> Im Abschnitt "Link" definierst du das Ziel des Banners wenn dieser angeklickt wird.
### Layout
Im Tab "Layout" kannst das **Overlay** (2), die **Überschrift** (3), die **Zwischenüberschrift** (4), die **Text** (5), die **Buttons** (6+7), das **Scrollverhalten** vom Bild (1), einen **Parallax-Effekt** und ein **Farb-Overlay** (1) konfigurieren. Zudem stehen dir Konfigurationen für die Ausrichtung des Text-Inhaltes zur Verfügung.
> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die allgemeine **Hintergrundfarbe**, das **Padding** und den **Eckenradius** konfigurieren.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du die gewünschte **Textausrichtung** auswählen und einen **Text-Schatten** konfigurieren.
>
> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung** und die **Textfarbe** für die Überschrift (3) konfigurieren.
>
> **Zwischenüberschrift**
>
> Im Abschnitt "Zwischenüberschrift" kannst du die Schriftart und die Textfarbe für die Überschrift (4) konfigurieren.
>
> **Text**
>
> Im Abschnitt "Text" kannst du die **Schriftart**, die **Textfarbe**, **Linkfarben** für den Text (5) konfigurieren.
>
> **Button**
>
> Im Abschnitt "Button" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button (5) gefüllt oder als Outline-Button dargestellt werden soll.
>
> **Button 2**
>
> Im Abschnitt "Button 2" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button (6) gefüllt oder als Outline-Button dargestellt werden soll.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst das **Attachment** vom Bild konfigurieren und festlegen ob ein JavaScript-gesteuerter **Parallax-Effekt** angewendet werden soll.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" kannst du die **horizontale Ausrichtung** und die **vertikale Ausrichtung** sowie die **Breite** (z.B. auto oder 90%) und die **maximale Breite** (z.B. 90% oder 740px) vom "Content-Overlay" konfigurieren.
>
> Mit der Konfiguration "**Overlay-Styling anwenden**" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die **Hintergrundfarbe** festlegen, einen **Hintergrund-Effekt**, einen **Schlagschatten** und **abgerundete Ecken** auswählen.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** konfigurieren.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** (1) aktiviert und konfiguriert werden.
Elemente vom "Advanced-Banner"
### SEO & Pagespeed
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift und die Zwischenüberschrift 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.
***
## Scroll-Effekte
Durch die Möglichkeit das Bild (=Hintergrundbild) zu fixieren kannst du einen einfachen Parallax-Effekt mit einer gewissen Tiefenwirkung erzielen.
### Parallax-Effekt
Darüber hinaus kannst du einen JavaScript-gesteuerten Parallax-Effekt aktivieren. Dieser Effekt ist verfügbar, wenn das Hintergrundbild fixiert wird.
Wird ein CMS-Element mit aktiviertem Parallax-Effekt in einer Erlebniswelt genutzt, wird ein zusätzliches JavaScript-Plugin geladen, welches den Effekt entsprechend steuert.
{% hint style="info" %}
**Hinweis**: Da dieser Effekt erfordert, dass das Bild das gesamte Browserfenster ausfüllt, empfehlen wir, große, hochwertige Bilder als Seitenhintergrund zu verwenden.
{% endhint %}
{% hint style="warning" %}
**Wichtig**: Parallax-Effekte werden aus Performancegründen in mobilen Viewports nicht angezeigt.
{% endhint %}
***
## Datenzuordnung (folgt)
Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
* **Bild** - z.B. Kategoriebild oder Produktbild
* **Überschrift** - z.B. Kategoriename oder Produktname
* **Text** - z.B. Kategoriebeschreibung oder Produktbeschreibung