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

# Image-Banner

Der **ThemeWare® "Image-Banner"** ist ein Banner-Element für deine Erlebniswelten. Du kannst ihn optimal als Trennelement in Boxed und Full-width Layouts einsetzen.

<figure><img src="/files/feZCqVtp1xIp03v7UyIA" alt=""><figcaption><p>ThemeWare® "Image-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® "Image-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/qGOe6n2heVEaMvPP9xcC" alt=""><figcaption><p>ThemeWare® "Image-Banner" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Image-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.

> **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 du das **Scrollverhalten** vom Bild (1) konfigurieren, einen **Parallax-Effekt** und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die allgemeine **Hintergrundfarbe** und den **Eckenradius** konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst das **Attachment** vom Bild konfigurieren und festlegen ob ein JavaScript-gesteuerter **Parallax-Effekt** angewendet werden soll.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** (1) aktiviert und konfiguriert werden.

<figure><img src="/files/gfKa9ziwScHS4C7tCJNo" alt=""><figcaption><p>Elemente vom "Image-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.

***

## 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 kann folgendes Feld per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:

* **Bild** - z.B. Kategoriebild oder Produktbild

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Elemente/Image-Banner/>" %}
ThemeWare® Demoshop => Image-Banner
{% endembed %}