Teaser

Ab Theme Version 2.5.0 steht Dir zur Bearbeitung der Erlebniswelten das Teaser Element zur Verfügung - exklusiv für die Pro Version der Themes auf Shopware Self-managed Systemen.

Feature der Pro Version

Teaser Elemente werden dazu genutzt um Kategorien oder andere wichtige Bereiche bildlich zu verlinken.

Inhalt

Im Tab Inhalt befindet sich ein Textfeld (1) zum Hinterlegen des Textes auf dem Teaser Bild (2).

Mit der Option Lazy Loading (3) kannst du festlegen, ob das Bild sofort (eager) oder erst beim Scrollen in den sichtbaren Bereich (lazy) geladen wird. Wählst du Vererbt, wird automatisch die globale Einstellung aus den Grundeinstellungen der Erweiterung übernommen.

Bilder als ausschließlich dekorativ kennzeichnen (4) bestimmt im Sinne der Barrierefreiheit, ob das Bild nur dekorativ verwendet wird und nicht von Screenreadern erfasst werden soll.

Mit der Option Bild priorisiert laden (5) wird das Bild mit einer hohen Ladepriorität (fetchpriority="high") im HTML markiert. Dadurch wird das Bild bevorzugt vom Browser geladen und erscheint schneller sichtbar im sichtbaren Bereich – ideal für Above-the-Fold-Elemente.

Du kannst einen Link auf dem Teaser hinterlegen. Dazu besteht mit Link-Typ (6) die Möglichkeit eine einfach URL zu hinterlegen oder auch direkt Produkte oder Kategorien auszuwählen.

Verschiedene Mouse-Over und Mouse-Out Effekte (7) 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, sodass das Bild vollständig sichtbar wird.

Benutzerdefinierte Klassen lassen sich im Feld CSS-Klassen (8) hinterlegen. Das erlaubt es das Element mit eigenem CSS Code zielsicher zu selektieren oder bereits vorhandenes Styling per Klasse an das Element zu binden.

Konfigurationsbeispiele

Mit Hilfe der Element-Konfiguration lassen sich sehr viele sehr unterschiedliche Teaser-Looks erstellen. Wir haben uns einmal ein paar grundlegend unterschiedlichen Teaser-Konfiguration herausgesucht und erläutert.

Teaser als Button-Teaser

Die Standard-Darstellung des Teasers. Neben dem Teaser-Bild, Text und optionalen Animationen wurden keine Einstellungen verändert.

Teaser mit Transparenzen und abgerundeten Ecken

In diesem Beispiel sind die Einstellungen der minimalen Breite (5) und der maximalen Breite (6) entscheidend.

Eine etwas größere Schriftgröße (1) und Schriftgewicht (2) machen den text etwas kräftiger.

Die weiße Textfarbe (3) wird auf einen teiltransparenten Hintergrund (4) gesetzt. Beachte, dass im Color-Picker im Feld Alpha die Sichtbarkeit auf 80 gestellt wurde.

Die minimale Breite (5) von 100% sorgt dafür, dass der Text-Container über die gesamte Breite des Teasers gestreckt wird. Die maximale Breite (6) muss dann ebenfalls 100% betragen oder leer sein.

Individuelle Innenabstände (7) sorgen für mehr Raum in der gewählten Hintergrundfarbe (4) um den Text herum. Damit der Text-Container bis an den Rand des Teaser geht, müssen die Außenabstände (8) genullt werden.

Soll das gesamte Teaser-Element abgerundete Ecken (1) erhalten, können diese aktiviert und eingestellt werden.

Ein optionaler Zoom Effekt als Bild Mouse-Over (2) bringt noch ein wenig Bewegung ins Spiel.