> 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/image-teaser.md).

# Image-Teaser

Die **ThemeWare® "Image-Teaser"** 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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FkUmgLKN7L7g5uJepFTwZ%2Fcms-element--image-teaser.png?alt=media&amp;token=83da4821-25bf-4956-ba09-f1fd3c07a27a" alt=""><figcaption><p>ThemeWare® "Image-Teaser"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Image-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%2FJq7QYjHInR8k48LNlPK7%2Fcms-image-teaser--configure.png?alt=media&amp;token=4e4363b3-8b59-4779-b155-d9c910e840e7" alt=""><figcaption><p>ThemeWare® "Image-Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Image-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.

> **Bild**
>
> Im Abschnitt "Bild" definierst du das Hintergrundbild 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 das **Bild** und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die **allgemeine Hintergrundfarbe** konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kann ein **Bild-Effekt** (siehe [#bild-effekte](#bild-effekte "mention")) ausgewählt und festgelegt werden, **wann** der Bild-Effekt (sofern der Teaser verlinkt wurde) angewendet werden soll.
>
> Du kannst außerdem die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

### 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.

***

## Bild-Effekte

Derzeit stehen dir 7 verschiedene Bild-Effekte (siehe Screenshots unten) zur Verfügung:

* Weichzeichnen
* Helligkeit
* Kontrast
* Graustufen
* Deckkraft
* Sättigung
* Skalierung

### Screenshots

<div><figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FVwAXV5zBGgQD1psCInha%2Fimage.png?alt=media&amp;token=2bac0fb7-206c-4ce8-a54a-9dfca2cf5cd1" alt=""><figcaption><p>Weichzeichnen</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FB1aSmjsK873DOSQ2y7jL%2Fimage.png?alt=media&amp;token=9cbbd991-7fa5-434a-bd70-7eb3dc994325" alt=""><figcaption><p>Helligkeit</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FSOboKf80BeFIYDbLUJsR%2Fimage.png?alt=media&amp;token=e8178e21-00e8-4da9-a8fb-33ae52c10b3b" alt=""><figcaption><p>Kontrast</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FDTUhjS6NDxdELlAS06mD%2Fimage.png?alt=media&amp;token=9af9a4db-37cb-4ef6-ac42-97e09d540cc9" alt=""><figcaption><p>Graustufen</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FTiGDnVfIx8xrGng10g2u%2Fimage.png?alt=media&amp;token=ac8fb62a-c7f0-454c-87f2-10f67524efff" alt=""><figcaption><p>Deckkraft</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FCbVNixiBhWVyNystfyH1%2Fimage.png?alt=media&amp;token=99a3927b-ef68-48c1-b470-d30617a4c999" alt=""><figcaption><p>Sättigung</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2Fr05IxNBqehUh3bsg3HW6%2Fimage.png?alt=media&amp;token=106952da-2f0f-467e-a913-75c2496aea49" alt=""><figcaption><p>Skalierung</p></figcaption></figure></div>

***

## Datenzuordnung (folgt)

Auf Kategorie- und Produktseiten kann folgendes Feld per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:

* **Bild** - z.B. Kategoriebild oder Produktbild

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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