# Classic-Teaser

Der **ThemeWare® "Classic-Teaser"** ist ein Teaser mit Designs aus Shopware 5 bzw. unseren Themes für Shopware 5. 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%2F8MFqMrS1kZCbLcUX5GFd%2Fcms-element--classic-teaser.png?alt=media&#x26;token=d624dc7e-3724-4fc9-8c5c-dbd98213cf96" alt=""><figcaption><p>ThemeWare® "Classic-Teaser"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Classic-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%2F8OPFSzOG2V4aM0kqRHNq%2Fimage.png?alt=media&#x26;token=f3ba4271-f08b-4767-8350-0c9f3714d9ab" alt=""><figcaption><p>ThemeWare® "Classic-Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Classic-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 zwischen verschiedenen **Darstellungsarten** wählen (siehe Screenshots unten) und die **allgemeine Hintergrundfarbe** (1) konfigurieren.. Die verschiedenen Darstellungsarten haben, wie die ursprünglichen Teaser aus ThemeWare® für Shopware 5, eine vordefinierte Farbkonfiguration. Du kannst mit der Konfiguration "**Benutzerdefiniertes Styling aktivieren**" eine individuelle Konfiguration aktivieren.
>
> #### Beschriftung
>
> Im Abschnitt "Beschriftung" kannst du die **Schriftart** der Beschriftung (2) konfigurieren.&#x20;
>
> Zudem hast du, je nach Darstellungsart, die Möglichkeit die **Textfarbe**, die **Textausrichtung**, die **Rahmenfarbe**, die **Hintergrundfarbe** und **Hover-Farben** (sofern der Teaser verlinkt wurde) zu konfigurieren.
>
> #### 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%2FWnRwG2m1mlPtqFIwHbxv%2Fcms-element--classic-teaser-components.png?alt=media&#x26;token=728e510a-a189-44d5-b0bb-d6ce7ad5927f" alt=""><figcaption><p>Elemente vom "Classic-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.&#x20;

{% hint style="info" %}
**Hinweis**: Hover-Farben sind nur konfigurierbar, wenn das Element verlinkt ist.
{% endhint %}

***

## Darstellungsarten

Derzeit stehen dir 7 verschiedene Darstellungsarten (siehe Screenshots unten) für den Counter zur Verfügung:

* Standard
* Effekt 1
* Effekt 2
* Effekt 3 (z.B. ThemeWare® Clean)
* Effekt 4 (z.B. ThemeWare® Bike)
* Effekt 5 (z.B. ThemeWare® Strong)
* Effekt 6 (z.B. ThemeWare® Ladieswear)
* Effekt 7 (z.B. ThemeWare® Global)

### Screenshots

<div align="left"><figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2Fh55CEeXLE4SBj2X0skM4%2Fcms-element--classic-teaser-0.png?alt=media&#x26;token=300ed19d-e1cc-4596-b77d-461278b914a2" alt=""><figcaption><p>Standard</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FpD4cQZglBtBEoLhYLmTH%2Fcms-element--classic-teaser-1.png?alt=media&#x26;token=98ad629f-b498-4c24-9602-9d6913a9a1d3" alt=""><figcaption><p>Effekt 1</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FpJmtiAguQgJi42YgJ6G1%2Fcms-element--classic-teaser-2.png?alt=media&#x26;token=6851b039-f62f-4c9a-8239-81c2065a7dc6" alt=""><figcaption><p>Effekt 2</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FLvb8KpCcxmLs2QNz2ozY%2Fcms-element--classic-teaser-3.png?alt=media&#x26;token=aaf7db62-92ed-4621-b7c5-ee7966d55c99" alt=""><figcaption><p>Effekt 3</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FSHmNvhSeUIGDeGGmvGpF%2Fcms-element--classic-teaser-4.png?alt=media&#x26;token=6403dc98-1c0d-480a-b0cf-7b8a836286c4" alt=""><figcaption><p>Effekt 4</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FSnrlTBv6O7TVUBS943ul%2Fcms-element--classic-teaser-5.png?alt=media&#x26;token=6d535e39-0582-4382-bf04-551473a80fdf" alt=""><figcaption><p>Effekt 5</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FCf7clVR9tu7HkaxX3JwD%2Fcms-element--classic-teaser-6.png?alt=media&#x26;token=7e4f1e79-47e2-4af4-af61-326e268a73a6" alt=""><figcaption><p>Effekt 6</p></figcaption></figure> <figure><img src="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FjWyrV78WQ6E1jztulj4D%2Fcms-element--classic-teaser-7.png?alt=media&#x26;token=6bcc4a64-e0d2-4b8c-9ac0-b6e69e584961" alt=""><figcaption><p>Effekt 7</p></figcaption></figure></div>

{% hint style="info" %}
**Hinweis**: Bitte beachte, dass die Theme-Variablen nicht in der Administration zur Verfügung stehen. Die **blaue Farbe** in der Vorschau (nur bei bestimmten Darstellungsarten) wird in der Storefront durch deine konfigurierte Primärfarbe ersetzt.
{% endhint %}

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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