Hero-Banner
Last updated
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
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.
Beta: Bitte beachte, dass sich dieses Element in einer Testphase befindet, probiere es gerne einmal aus.
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® "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
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.
BildIm 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.
LinkIm Abschnitt "Link" definierst du das Ziel des Banners wenn dieser angeklickt wird.
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.
AllgemeinIm Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe konfigurieren.
Content (Inhalt)Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen und einen Text-Schatten konfigurieren.
ÜberschriftIm Abschnitt "Überschrift" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe für die Überschrift (3) konfigurieren.
TextIm Abschnitt "Text" kannst du die Schriftart, die Textfarbe, Linkfarben für den Text (4) konfigurieren.
ButtonIm 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.
BildIm Abschnitt "Bild" kannst das Attachment vom Bild konfigurieren und festlegen ob ein JavaScript-gesteuerter Parallax-Effekt angewendet werden soll.
Content-OverlayIm 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.
Farb-OverlayIm Abschnitt "Farb-Overlay" kann ein Farb-Overlay (1) aktiviert und konfiguriert werden.
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.
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.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Demo folgt...
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
