> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/hover-teaser.md). # Hover-Teaser Der **ThemeWare® "Hover-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 Hover-Teaser ist ein Teaser mit 11 einzigartigen Hover-Effekten. Jeder Effekt bietet eine individuelle visuelle Behandlung mit unterschiedlichen Animationen für Überschrift, Untertitel und dekorative Elemente.

{% 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® "Hover-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 ![](/files/5URCkVnh55QbNfBAp6e7) "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 "Hover-Teaser" ist recht selbsterklärend. Das **Bild** ist ein Pflichtfeld. 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** (2) und den **Titel (Suffix)** eingeben. Der Suffix wird in Fettschrift an die Überschrift angehängt. Mit der Option **Leerzeichen** kannst du ein Leerzeichen zwischen Überschrift und Suffix einfügen. > > **Untertitel** > > Im Abschnitt "Untertitel" kannst du den **Untertitel** (3) für den Teaser eingeben. > > **Bild** > > Im Abschnitt "Bild" definierst du das **Hintergrundbild** (1) des Teasers. Das Bild ist ein Pflichtfeld. Du kannst den **Anzeigemodus**, die **Minimale Höhe** 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").

{% hint style="info" %} **Hinweis:** Die Teaser sollten stets eine Höhe von mindestens 200 px haben, damit sich die Hover-Effekte optimal entfalten können. {% endhint %} ### Layout Im Tab "Layout" kannst du den **Hover-Effekt**, die **Überschrift**, den **Untertitel**, die **Akzentfarbe**, das **Bild**, **Hover-Verhalten** und ein **Farb-Overlay** konfigurieren. > **Allgemein** > > Im Abschnitt "Allgemein" kannst du den **Hover-Effekt**, die **Hintergrundfarbe** und die **maximale Breite** konfigurieren. > > **Überschrift** > > Im Abschnitt "Überschrift" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung**, die **Textfarbe** und den **Textschatten** (Klein/Normal/Groß) für die Überschrift konfigurieren. > > **Untertitel** > > Im Abschnitt "Untertitel" kannst du die **Schriftart** und die **Textfarbe** für den Untertitel konfigurieren. > > **Akzentfarbe** > > Im Abschnitt "Akzentfarbe" kannst du die **Farbe** für die Akzentelemente (Linien, Ränder) der Hover-Effekte konfigurieren. > > **Bild** > > Im Abschnitt "Bild" kannst du die gewünschte horizontale **Positionierung** des Bildes, die **Hintergrundfarbe** und **Bildeffekte** konfigurieren. Folgende Bildeffekte stehen zur Verfügung: Blur, Helligkeit, Kontrast, Graustufen, Deckkraft, Sättigung und Skalierung. > > **Hover** > > Im Abschnitt "Hover" kannst du die **Übergangsdauer** (Schnell 0,2s / Normal 0,35s / Langsam 0,5s), den **Bild-Hover-Effekt** und den **Farb-Overlay-Hover-Effekt** konfigurieren. > > **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 die **HTML-Tags** für die Überschrift und den Untertitel, 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**, die **Überschrift** und den **Untertitel** zur Verfügung. Zudem wird die **Element-ID** angezeigt. *** ## Hover-Effekte Folgende Hover-Effekte stehen für den "Hover-Teaser" zur Verfügung: * Chloe * Eve * Holly (ohne Untertitel) * Luna * Mia * Mila * Olivia * Ruby * Sophie * Stella