> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/content/erlebniswelten/bloecke/elemente/teaser.md). # 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 ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-c53656bf206f88f0d5705c6db0dbcb448d3e960e%2Fdocs-de-teaser-element.jpg?alt=media) 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 einfache URL zu hinterlegen oder auch direkt Produkte oder Kategorien auszuwählen. Die **Linkbeschreibung (8)** wird zum Auslesen des Links von Screenreadern genutzt und ist ein wichtiger Bestandteil für die Barrierefreiheit. Verschiedene **Mouse-Over und Mouse-Out Effekte (10)** 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 (11)** 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 ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-941a8903064e63db93cd869b8e2f8b77ea5c5279%2Fdocs-de-teaser-element-button-example.png?alt=media) Die Standard-Darstellung des Teasers. Neben dem Teaser-Bild, Text und optionalen Animationen wurden keine Einstellungen verändert. ### Teaser mit Transparenzen und abgerundeten Ecken ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-2a20ba2a98c3ab2ef48a93e961ce05b4336d20bd%2Fdocs-de-teaser-element-transparent-example.png?alt=media) In diesem Beispiel sind die Einstellungen der **minimalen Breite (5)** und der **maximalen Breite (6)** entscheidend. ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-58aaf1071946ceb69a6fb995aedae65dedc5e576%2Fdocs-teaser-element-transparent-example-text-config%20\(1\).png?alt=media) 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. ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-a7f8462851109d9fb9ce4d16e67902bcabc2bccb%2Fdocs-teaser-element-transparent-example-image-config.png?alt=media) 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.