> 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/parallax-banner.md). # Parallax-Banner {% hint style="info" %} **Hinweis**: Dieser Artikel ist in Arbeit. {% endhint %} Der **ThemeWare® "Parallax-Banner"** wurde in Rahmen eines Verbesserungsvorschlages (Parallax-Effekt für den "Image-Banner") entwickelt. Dieser Parallax-Effekt wird noch deutlicher wenn der Banner ein Text-Overlay hat. Da der "Image-Banner" ganz bewusst auf Text verzichtet, entstand der "Parallax-Banner". Du kannst den Banner optimal als Trennelement in Boxed und Full-width Layouts einsetzen.

ThemeWare® "Parallax-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="warning" %} **Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar. {% endhint %} *** ## Element konfigurieren Den ThemeWare® "Parallax-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.

ThemeWare® "Hero-Banner" konfigurieren

*** ## Konfiguration Die Konfiguration vom "Parallax-Banner" ist recht selbsterklärend. Der **Titel**, 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 den **Titel** (2) und **Zwischentitel** (3) eingeben. Der Titel 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 du den **Titel** (2), den **Untertitel** (3), das **Scrollverhalten** vom Bild, 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. > > **Titel** > > Im Abschnitt "Titel" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung** und die **Textfarbe** vom Titel (2) konfigurieren. > > **Untertitel** > > Im Abschnitt "Untertitel" kannst du die **Schriftart** und die **Textfarbe** vom Untertitel (3) konfigurieren. > > **Bild** > > Die Konfiguration im Abschnitt "Bild" ist bereits voreingestellt. > > **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. > > **Farb-Overlay** > > Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** (1) aktiviert und konfiguriert werden.

Elemente vom "Parallax-Banner"

### SEO & Pagespeed Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel und den Untertitel 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. *** ## Parallax-Effekt Der Parallax-Banner nutzt – wie der Name schon vermuten lässt – einen JavaScript-gesteuerten Parallax-Effekt, der für eine gewisse Tiefenwirkung beim Scrollen der Seite erzeugt. Wird dieser Banner 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 * **Titel** - z.B. Kategoriename oder Produktname *** ## **Demo** Anwendungsbeispiele findest du in den ThemeWare® Demoshops: {% embed url="" %}