# Runder Teaser
Der Teaser **ThemeWare® "Runder 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.
ThemeWare® "Runder Teaser"
{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}
***
## Element konfigurieren
Den ThemeWare® Teaser "Runder 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  "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.
ThemeWare® "Runder Teaser" konfigurieren
***
## Konfiguration
Die Konfiguration vom "Runden Teaser" ist recht selbsterklärend. Die **Beschriftung** und das **Bild** sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
{% hint style="info" %}
**Hinweis**: Nutze für den "Runden Teaser" quadratische Bilder.
{% endhint %}
### 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.\
> **Hinweis**: Nutze für den "Runden Teaser" quadratische Bilder.
>
> **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 "Layout" kannst du das **Padding** (den Innenabstand), die **maximale Breite** und die **allgemeine Hintergrundfarbe** (1) konfigurieren.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kann die **Text-Ausrichtung** vom Titel (2) konfiguriert werden.
>
> **Titel**
>
> Im Abschnitt "Titel" kann die **Schriftart**, **Textfarbe**, **Strichstärke**, **Textformatierung** und **Hintergrundfarbe** vom Titel (2) konfiguriert werden.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" kannst du die **vertikale Ausrichtung**, die **horizontale Ausrichtung** und die **maximale Breite** (z.B. 90% oder 740px) des Inhaltes (=Titel) (2) konfigurieren.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** für den Inhalt (=Titel) auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.
Elemente vom "Runder Teaser"
### SEO & Pagespeed
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel 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.
> **Experten-Einstellungen**
>
> Im Abschnitt "Experten-Einstellungen" können eine oder mehrere, mit Leerzeichen getrennte, CSS-Klassen eingetragen werden. Diese Klassen werden Spalten in bestimmten CMS-Blöcken hinzugefügt.
{% hint style="info" %}
**Hinweis**: Die "Experten-Einstellungen" in CMS-Elementen **richten sich an Experten** die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen!
{% endhint %}
***
## Layout-Tipps
Der Teaser "Runder Teaser" rundet die Ecken von Bildern ab. Du musst die entsprechenden Motive also nicht selber in einem Bildbearbeitungsprogramm abrunden. Damit der Look kreisrund wird, nutze quadratische Bilder.
Abhängig von der Breite des Blocks (dies gilt besonders bei einspaltigen Blöcken), kann der Teaser sehr groß werden. Wir empfehlen den Teaser daher in mehrspaltigen Blöcken zu nutzen oder die maximale Breite des Teasers zu konfigurieren.
#### Maximale Breite
In einspaltigen Blöcken empfiehlt sich die Konfiguration "Maximale Breite" zu nutzen. Hiermit kannst du die Breite des Teasers begrenzen. Zusätzlich kannst du den Teaser mit im Tab "Allgemein" horizontal und vertikal ausrichten.
***
## 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="" %}
ThemeWare® Demoshop => Runder Teaser
{% endembed %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/runder-teaser.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.