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.
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.
Den ThemeWare® "Parallax-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.
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.
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.
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.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel und den Untertitel konfigurieren.
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.
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.
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
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
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.
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.
Hinweis: Dieser Artikel ist in Arbeit.
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.
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.
Beta: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein .
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Den ThemeWare® "Advanced-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.
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.
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 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.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift und die Zwischenüberschrift konfigurieren.
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.
Durch die Möglichkeit das Bild (=Hintergrundbild) zu fixieren kannst du einen einfachen Parallax-Effekt mit einer gewissen Tiefenwirkung erzielen.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Durch die Möglichkeit das Bild (=Hintergrundbild) zu fixieren kannst du einen einfachen Parallax-Effekt mit einer gewissen Tiefenwirkung erzielen.
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.
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
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
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.
Hinweis: Dieser Artikel ist in Arbeit.
Der ThemeWare® "Hero-Banner" ist ein Banner-Element für deine Erlebniswelten. Du kannst ihn optimal als Trennelement in Boxed und Full-width Layouts einsetzen.
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.
Beta: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein .
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Den ThemeWare® "Hero-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.
Die Konfiguration vom "Hero-Banner" ist recht selbsterklärend. Der Text, das Bild und die "Minimale Höhe" sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du die Überschrift (3), den Text (4) und den Button-Text (5) 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 Tab "Layout" kannst du das Overlay (2), die Überschrift (3), die Text (4), den Button (5), 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.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift konfigurieren.
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.
Durch die Möglichkeit das Bild (=Hintergrundbild) zu fixieren kannst du einen einfachen Parallax-Effekt mit einer gewissen Tiefenwirkung erzielen.
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.
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
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Im Abschnitt "Text" kannst du die Schriftart, die Textfarbe, Linkfarben für den Text (4) 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.
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.
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.
Die ThemeWare® CMS-Banner sind für die Verwendung im ihren CMS-Blöcken vorgesehen. Die Elemente lassen sich daher nicht austauschen oder in anderen Blöcken platzieren.
Banner-Elemente können derzeit nur mit dem entsprechenden CMS-Block hinzugefügt werden. Füge den gewünschten Block einfach per Drag’n’Drop deiner Erlebniswelt hinzu.
Mehr Informationen dazu findest du in der folgenden Anleitung:
Hinweis: Banner-Blöcke findest du in der Rubrik "ThemeWare® Banner" [Pro]
