# Modern-Teaser

Der **ThemeWare® "Modern-Teaser"** ist der Standard-Teaser vom Modern-Theme für Shopware 6. Er ist unabhängig von seinem CMS-Block. Du kannst den Teaser 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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FbjvG1CpCusgLqNSAyLHg%2Fcms-element--modern-teaser.png?alt=media&#x26;token=cc6912d9-f850-4b93-9b44-f852d3b4ac44" alt=""><figcaption><p>ThemeWare® "Modern-Teaser"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Modern-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 ![](https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FIZM6GLQF0MWHOXpClvGX%2Ficon-cog.png?alt=media\&token=b20c0af0-cbac-4884-89df-58b77f274c9d) "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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F2bLyYsNQOkebPNtt6AQ8%2Fimage.png?alt=media&#x26;token=5aa7ec61-1727-4289-9cd4-3dca5526acea" alt=""><figcaption><p>ThemeWare® "Modern-Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Modern-Teaser" ist recht selbsterklärend. Die **Beschriftung** 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 Beschriftung (2) für den Teaser eingeben. Dies 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.

### Layout

Im Tab "Layout" kannst du die **Beschriftung** (2) konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die **allgemeine Hintergrundfarbe** (1) konfigurieren.
>
> **Beschriftung**
>
> Im Abschnitt "Beschriftung" kann die **Schriftart**, **Strichstärke**, **Textformatierung**, **Textfarbe** und **Hintergrundfarbe** der Beschriftung (2) konfiguriert werden.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" kannst du den **Schlagschatten** und die **abgerundeten Ecken** des Content-Overlays konfigurieren.
>
> **Layout**
>
> Im Abschnitt "Layout" kannst du die **horizontale Ausrichtung** und **vertikale Ausrichtung** des Inhaltes (=Beschriftung) (2) auswählen.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.

<figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2F9MFMHnpcRwzYEJqvRsxs%2Fcms-element--modern-teaser-components.png?alt=media&#x26;token=cd65462d-df29-47d6-9dd3-9a2d63eabef6" alt=""><figcaption><p>Elemente vom "Modern-Teaser"</p></figcaption></figure>

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du 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
* **Titel** - z.B. Kategoriename oder Produktname

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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