Suche Banner
Ab Theme Version 3.5.0 steht Dir zur Bearbeitung der Erlebniswelten das Suche Banner Element zur Verfügung - exklusiv für die Pro Version der Themes auf Shopware Self-managed Systemen.
Feature der Pro Version
Mit dem Suche Banner kannst Du an eine beliebige Stelle Deines Shops deine Suche in den Mittelpunkt setzen.
Das Suche Banner Element (1) befindet sich in der Liste der auswählbaren Elemente des Themes.
Einstellungen
Inhalt
Im Tab Inhalt (1) stehen Dir die Konfiguration eines Hintergrund (2) Bildes sowie eines Textes vor der Suche (4) wie auch einem Text nach der Suche (6) zur Verfügung.
Mit Shopware 6.5 wurde der Sanitizer in Editoren eingeführt, welcher bestimmte Code-Inhalte aus dem Editor bereinigt. Daher kannst Du nun mit den Optionen Verwende Code Editor (3, 5) den WYSIWYG-Editor durch einen reinen Code-Editor wechseln. Deine Inhalte werden in dem Code-Editor nicht bereinigt.
Inhalt Einstellungen
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.
Die Einstellung Großes Suchfeld (9) vergrößert die Suche und macht sie noch prominenter.
Zusätzlich kannst Du die Suche im Header für diese Seite ausblenden (10), wenn Du den Fokus noch stärker auf dieses Element setzen möchtest.
Über die Option Suchfeld Styling (11) können zusätzliche Farbeinstellungen für die Suche ausgeklappt werden, welche die Standard-Einstellungen des Themes für diese Suche überschreiben.
Individuelle Innenabstände (12) bestimmen den Abstand im Inhaltsbereich und macht sich überwiegend bemerkbar, wenn eine Hintergrundfarbe (3) eingestellt wurde.
Individuelle Außenabstände (13) 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 (14) sind nur sichtbar, wenn eine Hintergrundfarbe (3) definiert wurde.
Grundeinstellungen
Im Anzeigemodus (2) entscheidest Du, wie das Bild dargestellt werden soll:
Standard: 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: 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: 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 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 und Strecken 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 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 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 Hintergrund nach belieben mit einer Teiltransparenten Farbe ab und gestalte 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.
Übergroße Texte
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.
Last updated
