Bild Text Slider
Ab Theme Version 2.5.0 steht Dir zur Bearbeitung der Erlebniswelten das Bild Text Slider Element zur Verfügung
Last updated
Ab Theme Version 2.5.0 steht Dir zur Bearbeitung der Erlebniswelten das Bild Text Slider Element zur Verfügung
Last updated
Feature der Pro Version
Bild Slider bringen Bewegung auf Deine Seite und erhalten in der Regel die meiste Aufmerksamkeit. Bisher konnte in Shopware kein Text auf dem Bild Slider platziert werden - durch unseren Bild Text Slider können nun jedoch problemlos Textinformationen platziert werden.
Im Bereich Inhalt (1) lassen sich Bilder hinzufügen. Nach dem Hochladen oder Auswählen der Bilder stehen neben den allgemeinen Slider Einstellungen (2) die einzelnen Slides (3) mit ihrer jeweiligen Konfiguration zur Verfügung.
Sortiere Slides per Drag & Drop. Ziehe im Tab Inhalt das Bild (1) zum Sortieren über ein anderes Bild (2).
Ersetze die Bilder der einzelnen Slides über das Kontextmenü (1). Wähle nun die Option Ersetzen (2).
Es erscheint ein Modal-Fenster mit den üblichen Möglichkeiten zum Auswählen oder Hochladen eines Bildes oder Videos.
Im Tab Einstellungen befinden sich die Grundeinstellungen des Sliders.
Im Anzeigemodus (1) entscheidest Du, wie das Bild in der Galerie dargestellt werden soll:
Standard/Original: Das Bild wird komplett angezeigt. Die Höhe des gesamten Slider-Elements ist daher dynamisch und passt sich automatisch entsprechend an. Daher ist es zu empfehlen, dass alle Bilder im Slider das gleiche Seitenverhältnis aufweisen, da sonst die Elemente unterhalb des Sliders "hoch- und runterspringen".
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.
Beinhalten/Feste Höhe: Die Höhe des Elements wird automatisch anhand des höchsten hinterlegten Bildes ermittelt. Im Gegensatz zum Modus Standard wird diese aber nicht beim Wechsel zwischen verschiedenen Bildern angepasst. Die Ausrichtung von niedrigeren Bildern kannst Du über den Punkt Vertikale Ausrichtung definieren.
Der Anzeigemodus sollte auf Füllen stehen, wenn viele Inhalte in den einzelnen Slides dargestellt werden sollen. Im Standard/Original oder Beinhalten/Feste Höhe Anzeigemodus steht möglicherweise nicht mehr genug Platz auf mobilen Geräten zur Verfügung, da der Slider hierbei proportional skaliert und auch an Höhe verliert.
Zusätzlich kann das gesamte Slider-Element automatisch rotieren (2). Wird diese option aktiviert, stehen die Optionen Pause bei Mouse-Over (3) und Unterbrechung (4) zur Verfügung. Die Unterbrechung (4) gibt in Millisekunden an, wie lange der Slider sich nicht bewegen soll, woraufhin er dann eine Rotationsbewegung mit der Geschwindigkeit (5) in Millisekunden durchführt. Die Geschwindigkeit gibt also an, wie lange es dauert, bis die Rotation den Slide wechselt - je höher diese Angabe, desto langsamer die Rotationsbewegung.
Im Bereich Modus (6) kann der Slider als typischer Karussell Slider oder als Galerie mit einfachem Bildwechsel ohne Rotation betrieben werden. Über die Achse (7) bestimmst Du, im Karussell-Modus, ob sich der Slider horizontal oder vertikal bewegen soll.
Der Slider kann über Mehrere Slides anzeigen (8) mehrere Elemente auf einmal darstellen. Sobald die Option aktiv ist, kannst Du für jeden Viewport die Anzahl der gleichzeitig sichtbaren Slides einstellen.
Der Randabstand (9) legt fest, wie viel Platz zwischen dem äußeren Rand des Sliders und den sichtbaren Elementen im Slider bleibt. Dies ermöglicht es, einen Teil des nächsten oder vorherigen Elements bereits am Rand des Sliders sichtbar zu machen, was dem Nutzer zeigt, dass weitere Inhalte vorhanden sind, durch die er navigieren kann.
Der Abstand (10) bestimmt den Abstand zwischen den einzelnen Slides, wenn diese durch die Einstellungen Mehrere Sides anzeigen (8) oder Randabstand (9) sichtbar sind.
Die Einstellung Schleife (11) sorgt dafür, dass der Slider nach dem letzten Slide wieder mit dem ersten beginnt - optisch läuft der Slider dadurch unendlich. Für diesen Effekt werden die Slides kopiert und immer wieder hinten angehängt.
Wird die Option Zurückspulen (12) aktiviert, wird nach dem erreichen des letzten Slides der Slider wieder an den Anfang "gespult".
Sind die Einstellungen Schleife (11) und Zurückspulen (12) inaktiv, bleibt der Slider beim letzten Slide stehen.
Beispiele:
Die Slides sind die einzelnen Elemente, welche durch das Slider-Element rotieren.
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 (1) den WYSIWYG-Editor durch einen reinen Code-Editor wechseln. Deine Inhalte werden in dem Code-Editor nicht bereinigt.
Über den Editor (2) können Text-Inhalte auf dem Slider platziert werden. Diese liegen formatiert auf dem zuvor ausgewählten Slider-Bild. Die Darstellung von Buttons ist ebenso über den Editor realisierbar wie das Einbinden eines weiteren Bildes.
Für die erweiterte Formatierung von Texten und Buttons im Editor kannst Du dich an den Inhalten des Bootstrap Frameworks orientieren. Dieses ist in der Storefront implementiert und kann daher vollumfänglich genutzt werden.
Die Verlinkung (3) des Slides ist optional - die Verlinkung des gesamtes Slides kann auch zu Gunsten eines Call-To-Action Buttons im Editor weggelassen werden.
Die Textfarbe (4) 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 (5) wird für den Bereich des Text-Elements gesetzt.
Mit Hintergrund weichzeichnen (6) 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 Vertikale Ausrichtung (7) bestimmt in Verbindung mit der horizontalen Ausrichtung (8) die grundlegende Platzierung des Text-Elementes auf dem Bild.
Die Minimale Breite (9) bestimmt, wie breit das Text-Element mindestens sein darf. Diese Einstellung erzeugt in Verbindung mit der maximalen Breite (10) eine dynamische Breite zwischen minimaler und maximaler Breite.
Individuelle Innenabstände (11) bestimmen den Abstand im Text-Element und macht sich überwiegend bemerkbar, wenn eine Hintergrundfarbe (12) eingestellt wurde.
Individuelle Außenabstände (13) sorgen dafür, dass das Text-Element nicht am Bildrand klebt und bestimmt darüber hinaus die genaue Positionierung in Abhängigkeit der vertikalen und horizontalen Ausrichtung (7, 8).
Abgerundete Ecken (13) sind nur sichtbar, wenn eine Hintergrundfarbe (5) oder Unschärfe über die Einstellung Hintergrund weichzeichnen (6) definiert wurde.
Über die Horizontale Bildausrichtung (14) und Vertikale Bildausrichtung (15) wird das Hintergrundbild im Element ausgerichtet. Die Einstellung wird nur im Anzeigemodus (1) Füllen des Einstellungen-Tabs benötigt.
Abgerundete Ecken (17) rundet die Ecken des Bildes im Slide ab. Alternativ kann auch im Einstellungen-Tab das gesamte Slider-Element mit abgerundeten Ecken versehen werden.
Durch die Option Hintergrundbild mit Farbe überlagern (16) dämpfst Du das Hintergrund nach belieben mit einer Teiltransparenten Farbe ab und gestalte so den Text lesbarer.
Eine Eingangsanimation (18) blendet den Text beim Slide-Wechsel animiert ein. In Verbindung mit den Aufmerksamkeits-Animationen (19) wirkt das Element weniger statisch.
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.
Beispiel:
In diesem Beispiel liegt der Text im Text-Element auf einer teiltransparenten Hintergrundfarbe.
Um eine teiltransparente Hintergrundfarbe (1) zu definieren, wähle im Color-Picker der Hintergrundfarbe im Alpha-Kanal einen Wert < 100.
Neben der vertikalen Ausrichtung (2) und der horizontalen Ausrichtung (3) sind die Einstellungen der Abstände entscheidend. Die Innenabstände (6) sind im nachfolgenden Bild grün markiert und bestimmen den Abstand zwischen Text und äußerer Begrenzung des Text-Elementes.
Die Außenabstände (7), hier orange markiert, sind links und rechts in Prozent gesetzt. Zusätzlich zur allgemeinen vertikalen (2) und horizontalen Ausrichtung (3) wird das Text-Element also immer einen Abstand von 10% nach links und rechts zum Rand des Sliders erhalten.
Abweichend zum vorigen Beispiel wäre es denkbar, das gesamte Slider-Bild mit einer Hintergrundfarbe zu überlagern und so die Lesbarkeit des Textes auf einem Bild zu verbessern.
Das Feld für die Hintergrundfarbe (1) sowie individuelle Innenabstände (2) und abgerundete Ecken (4) werden hierbei genullt bzw. ausgeschaltet.
Sobald die Option Hintergrundbild mit Farbe überlagern (5) aktiviert wurde, stehen zusätzliche Felder für die Farbe und die Sichtbarkeit zur Verfügung.
