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.
ThemeWare® "Image-Banner"
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.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Den ThemeWare® "Image-Banner" kannst du wie folgt konfigurieren:
- Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
- Fahre mit der Maus über das entsprechende CMS-Element
- Klicke auf das
"Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren - Es öffnet sich das Pop-up "Element-Einstellungen"
- Nehme die gewünschten Änderungen vor
- Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Image-Banner" konfigurieren
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.
Elemente vom "Image-Banner"
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.
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.
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:
ThemeWare® Demoshop => Image-Banner