Teaser

Feature der Pro Version

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

Inhalt

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

Die Option Lazy Loading (4) sorgt dafür dass das Bild eager oder lazy geladen wird. Die Option Vererbt übernimmt die globale Einstellung aus den Grundeinstellungen der Erweiterung. Bilder als ausschließlich dekorativ kennzeichnen (5) bestimmt im Sinne der Barrierefreiheit, ob das Bild nur dekorativ verwendet wird und nicht von Screenreadern erfasst werden soll.

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, so dass das Bild vollständig sichtbar wird.

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.