# Teaser Der **ThemeWare® "Teaser"** ist unabhängig von seinem CMS-Block. Du kannst ihn auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten. Der Teaser zeigt ein Bild mit einer Caption-Leiste am unteren Rand, die eine Überschrift, einen Untertitel und optional ein Pfeil-Icon enthält.

{% hint style="success" %} **Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag). {% endhint %} {% hint style="warning" %} **Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar. {% endhint %} *** ## Element konfigurieren Den ThemeWare® "Teaser" kannst du wie folgt konfigurieren: 1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren 2. Fahre mit der Maus über das gewünschte CMS-Element 3. Klicke auf das  "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren 4. Es öffnet sich das Pop-up "Element-Einstellungen" 5. Nehme die gewünschten Änderungen vor 6. Speichere deine Änderungen Du hast das CMS-Element nun konfiguriert.

*** ## Konfiguration Die Konfiguration vom "Teaser" ist recht selbsterklärend. Die **Überschrift** und das **Bild** sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren. ### Allgemein Im Tab "Allgemein" konfigurierst du den Content des Elementes. > **Content (Inhalt)** > > Im Abschnitt "Content" kannst du die **Überschrift** und den **Untertitel** für den Teaser eingeben. Die Überschrift ist ein Pflichtfeld. > > **Bild** > > Im Abschnitt "Bild" definierst du das **Hintergrundbild** (1) des Teasers. Das Bild ist ein Pflichtfeld. Du kannst den **Anzeigemodus** (Cover/Contain/Stretch), die **Minimale Höhe** (Standard: `340px`) und die **Ausrichtung** konfigurieren. > > **Barrierefreiheit** > > Im Abschnitt "Barrierefreiheit" kannst du einen **Alt-Text** für das Bild eingeben und festlegen, ob das Bild als **dekoratives Bild** behandelt werden soll. > > **Link** > > Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird. Du kannst festlegen, ob der Link in einem **neuen Tab** geöffnet werden soll und ob der **gesamte Teaser** als Link fungiert ("Voller Link").

### Layout Im Tab "Layout" kannst du die **Caption-Leiste** (2), die **Überschrift**, den **Untertitel**, das **Bild**, **Hover-Effekte** und ein **Farb-Overlay** konfigurieren. > **Allgemein** > > Im Abschnitt "Allgemein" kannst du das **Padding**, den **Border-Radius** und die **Hintergrundfarbe** konfigurieren. {% hint style="info" %} **Hinweis**: Beim Hover-Effekt "Grow" wird das Padding durch den Effekt gesteuert. {% endhint %} > **Überschrift** > > Im Abschnitt "Überschrift" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung** und die **Textfarbe** für die Überschrift konfigurieren. > > **Untertitel** > > Im Abschnitt "Untertitel" kannst du die **Schriftart** und die **Textfarbe** für den Untertitel konfigurieren. > > **Caption-Leiste** > > Im Abschnitt "Caption-Leiste" kannst du die **Hintergrundfarbe** und den **Hintergrund-Effekt** (Backdrop) der Caption-Leiste konfigurieren. > > **Icon** > > Im Abschnitt "Icon" kannst du ein **Pfeil-Icon** auswählen, das auf der rechten Seite der Caption-Leiste angezeigt wird. > > **Bild** > > Im Abschnitt "Bild" kannst du die gewünschte horizontale **Positionierung** des Bildes im Anzeigemodus 'Cover' auswählen. > > **Hover-Effekte** > > Im Abschnitt "Hover-Effekte" kannst du einen **Hover-Effekt** auswählen und festlegen, ob der **CTA bei Hover** angezeigt werden soll. Folgende Hover-Effekte stehen zur Verfügung: > > * **Grow** - Das Padding der Caption-Leiste vergrößert sich beim Hover > * **Fade in** - Die Caption-Leiste blendet ein > * **Fade out** - Die Caption-Leiste blendet aus > * **Slide in up** - Die Caption-Leiste gleitet von unten herein > * **Slide in down** - Die Caption-Leiste gleitet von oben herein > > **Farb-Overlay** > > Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden. Du kannst eine **Farbe**, einen **Farbverlauf** und den **Farbverlaufswinkel** festlegen. ### SEO & Pagespeed Im Tab "SEO & Pagespeed" kannst du den **HTML-Tag** für die Überschrift, eine **HTML-Tag-Klasse**, die **Fetch-Priorität** sowie das **Lazy Loading** vom Bild konfigurieren. ### Erweitert Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen. Im Tab "Erweitert" stehen dir CSS-Klassen für das **Element** und die **Caption-Leiste** zur Verfügung. Zudem wird die **Element-ID** angezeigt. *** ## Datenzuordnung (folgt) Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden: * **Bild** - z.B. Kategoriebild oder Produktbild * **Titel** - z.B. Kategoriename oder Produktname