Parallax-Banner

Hinweis: Dieser Artikel ist in Arbeit.

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"

Wichtig: 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.

Hinweis: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.

---

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

Text

Im Abschnitt "Text" 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).

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 (1) konfigurieren.

Content (Inhalt)

Im Abschnitt "Inhalt" 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"

---

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.

Hinweis: Da dieser Effekt erfordert, dass das Bild das gesamte Browserfenster ausfüllt, empfehlen wir, große, hochwertige Bilder als Seitenhintergrund zu verwenden.

Wichtig: Parallax-Effekte werden aus Performancegründen in mobilen Viewports nicht angezeigt.

---

Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

Demo folgt...