> 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-box.md).

# Hover-Box

Die **ThemeWare® "Hover-Box"** ist unabhängig von ihrem CMS-Block. Du kannst sie auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.

<figure><img src="/files/j5Dblfz73uy2TM8awKms" alt=""><figcaption><p>ThemeWare® "Hover-Box"</p></figcaption></figure>

{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Element konfigurieren

Die ThemeWare® "Hover-Box" 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.

<figure><img src="/files/YtSeMtjLsdxUZdQAYpV4" alt=""><figcaption><p>ThemeWare® "Hover-Box" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration der "Hover-Box" ist recht selbsterklärend. Der **Text** 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 (3) und den Text (4) für den Teaser eingeben. Der Text ist ein Pflichtfeld.
>
> **Bild**
>
> Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
>
> **Link**
>
> Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.

{% hint style="info" %}
**Hinweis**: Das Textfeld ist **HTML**-fähig. Links `<a>` sollten allerdings nicht verwendet werden, da dies die eigentliche Verlinkung des Elementes stört.
{% endhint %}

### Layout

Im Tab "Layout" kannst du das **Overlay** (2), den **Text** (3, 4) im Overlay, und den **Hover-Effekt** vom Overlay konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die **allgemeine Hintergrundfarbe** (1) konfigurieren.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du die gewünschte **Textausrichtung** auswählen.
>
> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart** und **Textfarbe** für die Überschrift (3) konfigurieren.
>
> **Text**
>
> Im Abschnitt "Text" kannst du die **Schriftart** und **Textfarbe** sowohl für den Text (4) konfigurieren.
>
> **Layout**
>
> Im Abschnitt "Layout" kannst du die **horizontale Ausrichtung** und **vertikale Ausrichtung** des Textes konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" konfigurierst du, wie der Name schon sagt, das Overlay (2) der Hover-Box. Hier kannst du die **Hintergrundfarbe** vom Overlay konfigurieren.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** für den Inhalt bzw. das Overlay auswählen. Mit der Option **Hover-Verhalten umkehren** kannst du das Hover-Verhalten invertieren, sodass das Overlay standardmäßig angezeigt und beim Hover ausgeblendet wird.

<figure><img src="/files/FC1Vo6LhXSumgkYMx3wS" alt=""><figcaption><p>Elemente der "Hover-Box"</p></figcaption></figure>

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift 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.

***

## 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
* **Überschrift** - z.B. Kategoriename oder Produktname
* **Text** - z.B. Kategoriebeschreibung oder Produktbeschreibung

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Elemente/Hover-Box/>" %}
ThemeWare® Demoshop => Hover-Box
{% endembed %}