Text Banner
Ab Theme Version 3.5.0 steht Dir zur Bearbeitung der Erlebniswelten das Text Banner Element zur Verfügung
Last updated
Ab Theme Version 3.5.0 steht Dir zur Bearbeitung der Erlebniswelten das Text Banner Element zur Verfügung
Last updated
Feature der Pro Version
Mit dem Text Banner kannst Du großartige Banner mit echtem Text erstellen. Im Gegensatz zum Teaser Element stehen Dir zur Bearbeitung des Textes ein Editor zur Verfügung.
Das Text Banner Element (1) befindet sich in der Liste der auswählbaren Elemente des Themes.
Im Tab Inhalt (1) befindet sich ein Editor (3) zum Erstellen des Textes auf dem Banner Bild (4). Abgesehen von der Möglichkeit Links im Editor zu erstellen kannst Du auch den gesamten Banner verlinken. Dazu steht Dir im Link-Typ (5) die Möglichkeit eine einfach URL zu hinterlegen oder auch direkt Produkte oder Kategorien auszuwählen.
Mit Shopware 6.5 wurde der Sanitizer in Editoren eingeführt, welcher bestimmte Code-Inhalte aus dem Editor bereinigt. Daher kannst Du nun mit der Option Verwende Code Editor (2) den WYSIWYG-Editor durch einen reinen Code-Editor wechseln. Deine Inhalte werden in dem Code-Editor nicht bereinigt.
Verschiedene Mouse-Over und Mouse-Out Effekte (5) lassen Dich die Sichtbarkeit der Inhalte auf dem Banner Bild steuern. So können beispielsweise auch die Inhalte erst beim Mouse-Over sichtbar werden oder verschwinden, wenn die Maus über das Bild bewegt wird, so dass das Bild vollständig sichtbar wird.
Die Textfarbe (2) ist über den Color-Picker einstellbar. Da die Texte auf einem Bild häufig in weißer Schrift erfolgen und wir die Lesbarkeit im Editor erhalten möchten, kann die Grundfarbe des Textes über diesen Color-Picker erfolgen. Die Farbangaben im Editor können diese Farbangabe allerdings überschreiben.
Die Hintergrundfarbe (3) wird für den Bereich der Inhalte gesetzt.
Mit Hintergrund weichzeichnen (4) kann alles hinter dem Inhaltsbereich mit der eingegebenen Stärke in Pixeln weichgezeichnet werden. Der Effekt ist nur sichtbar, wenn eine transparente oder teiltransparente Hintergrundfarbe (3) über den Colorpicker gewählt wurde.
Die Horizontale Ausrichtung (5) bestimmt in Verbindung mit der Vertikale Ausrichtung (6) die grundlegende Platzierung der Inhalte auf dem Bild.
Die Minimale Breite (7) bestimmt, wie breit der Inhaltsbereich mindestens sein darf. Diese Einstellung erzeugt in Verbindung mit der maximalen Breite (8) eine dynamische Breite zwischen minimaler und maximaler Breite.
Individuelle Innenabstände (9) bestimmen den Abstand im Inhaltsbereich und macht sich überwiegend bemerkbar, wenn eine Hintergrundfarbe (3) eingestellt wurde.
Individuelle Außenabstände (10) sorgen dafür, dass der Inhaltsbereich nicht am Bildrand klebt und bestimmt darüber hinaus die genaue Positionierung in Abhängigkeit der vertikalen und horizontalen Ausrichtung (5, 6).
Abgerundete Ecken (11) sind nur sichtbar, wenn eine Hintergrundfarbe (3) definiert wurde.
Im Anzeigemodus (2) entscheidest Du, wie das Bild dargestellt werden soll:
Standard/Original: Das Bild wird komplett angezeigt. Die Höhe des Elements ist dynamisch und passt sich automatisch dem Seitenverhältnis des Bildes an. Ist die Breite des Bildes geringer als die Breite des Elements wird das Bild nicht auf die Breite des Elements gestreckt.
Füllen/Zugeschnitten: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
Strecken/Skaliert: Das Bild wird komplett angezeigt. Die Höhe des Elements ist dynamisch und passt sich automatisch dem Seitenverhältnis des Bildes an. Im Gegensatz zum Modus Standard wird das Bild auf die volle Verfügbare Breite des Elementes gestreckt.
Der Anzeigemodus sollte auf Füllen/Zugeschnitten stehen, wenn viele Inhalte auf dem Banner dargestellt werden sollen. Die Höhe des Banners basiert dabei auf der angegebenen minimalen Höhe und der Höhe des Inhaltes. Das Bild passt sich der Größe des Elementes an.
Im Anzeigemodus Standard/Original und Stretch/Skaliert gibt das Seitenverhältnis des Bildes die Höhe des Banners vor. Inhalte können dadurch abgeschnitten dargestellt werden, wenn das Bildformat nicht ausreichend Platz in den verschiedenen Viewports bietet.
Das Feld für die Minimale Höhe (3) steht nur im Anzeigemodus (2) Füllen/Zugeschnitten zur Verfügung. Es gibt die minimale Höhe des Elementes vor, wenn die Inhalte das Element nicht größer Strecken.
Tipp: Wir verwenden hier gerne die Einheit vh. Die Einheit steht für viewport height und rendert die Höhe des Elementes dynamisch anhand der Höhe des Viewports. 50vh wären daher 50% der Höhe deines Viewports - auf jedem Endgerät.
Über die Horizontale Bildausrichtung (4) und Vertikale Bildausrichtung (5) wird das Hintergrundbild im Element ausgerichtet. Die Einstellung wird nur im Anzeigemodus (2) Füllen/Zugeschnitten benötigt.
Die Horizontale Ausrichtung (6) und Vertikale Ausrichtung (7) steuert die Platzierung des Elementes, wenn es in einem Raster aus mehren Spalten anderen Elementen gegenüber gestellt wird.
Durch die Option Hintergrundbild mit Farbe überlagern (8) dämpfst Du das Hintergrundbild nach belieben mit einer Teiltransparenten Farbe ab und gestaltest so den Text lesbarer.
Über Abgerundete Ecken (9) lässt sich das gesamte Element mit abgerundeten Ecken darstellen.
Bild Mouse-Over (10) gibt Dir die Option einen kleinen Hover-Effekt auf das Element anzuwenden.
Erscheinen die Texte und Überschriften h1, h2, h3, h4, h5, h6 nicht groß genug, kann im Editor mit Hilfe der Optionen Überschriften vergrößern (1) und Texte vergrößern (2) die Schriftdarstellungen in der Vorschau und Storefront vergrößern.
Die Schriften skalieren responsiv und werden auf mobilen Geräten kleiner Dargestellt.
Weiterhin können natürlich auch im Quelltext des Editors die sogenannten display-headings Klassen des zugrunde liegenden Frameworks Bootstrap genutzt werden. https://getbootstrap.com/docs/5.2/content/typography/#display-headings
Beispiel:
Im h2-Tag ist die Klasse display-4 hinzugefügt, welche die h2-Überschrift nochmals deutlich vergrößert. Genutzt werden können die Klassen display-1, display-2, display-3 und display-4. Ab Shopware 6.5 können auch die Klassen display-5 und display-6 genutzt werden.
Die Schriften skalieren responsiv und werden auf mobilen Geräten kleiner Dargestellt.
