# Willkommen

**Willkommen im ThemeWare® Handbuch und vielen Dank, dass du dich für ThemeWare® entschieden hast!**

{% hint style="info" %}
**Hinweis**: Bitte beachte, dass das Handbuch derzeit in Arbeit ist und wir noch an der Fertigstellung arbeiten.
{% endhint %}

Die Dokumentation von ThemeWare® für Shopware 6 basiert auf 3 "Säulen":

1. Das **Service Portal**
   * Das Service Portal ist stets deine **erste Anlaufstelle** bei allen Anliegen rund um ThemeWare®. Es ist quasi dein persönliches Dashboard für ThemeWare®.
   * Dort findest du **immer alle relevanten Links und Informationen** zu ThemeWare®, das ThemeWare® Video-Tutorial, die ThemeWare® Utilities, die ThemeWare® Suchmaschine, den ThemeWare® Config-Finder, Assistenten, Rabattaktionen, nützliche Tools, Feedback- und Kontaktformulare und vieles mehr.
   * Das Service Portal erreichst du unter: [service.themeware.design](https://service.themeware.design)
2. Die **ThemeWare® Wissensdatenbank**
   * In der ThemeWare® Wissensdatenbank findest du die **ThemeWare® Einführung**, viele **Anleitungen** und **Tutorials**, das ThemeWare® Lexikon, **Antworten** auf die häufigsten Fragen, **Lösungen** für die häufigsten Fehler, **Profiwissen** für Agenturen und Freelancer und viele nützliche Informationen zu Shopware 6.
   * Die ThemeWare® Wissensdatenbank erreichst du unter: [wiki.themeware.design](https://wiki.themeware.design)
3. Das **ThemeWare® Handbuch**
   * Im ThemeWare® Handbuch findest du Informationen zu allen **Funktionen und Features** von ThemeWare®.
   * Das ThemeWare® Handbuch erreichst du unter: [doku.themeware.design](https://doku.themeware.design/)

## Das ThemeWare® Handbuch

Das **ThemeWare® Handbuch** ist das Nachschlagewerk für alle Konfigurationen und Features von ThemeWare**®**.

{% hint style="info" %}
**Hinweis**: Die Dokumentation von mehr als 1.000 Konfigurationsfeldern und über 400 Zusatzfunktionen benötigt leider einiges an Zeit, wir arbeiten aber täglich daran das Handbuch zu befüllen. 🚀
{% endhint %}

Im Bereich "Handbuch" findest du die gesamte Theme-Konfiguration von ThemeWare**®**. Damit du dich schnell zurecht findest haben wir den Aufbau der Dokumentation der Theme-Konfiguration nachempfunden.

### Aufbau der ThemeWar&#x65;**®**-Konfiguration <a href="#aufbau-der-themeware-r-konfiguration" id="aufbau-der-themeware-r-konfiguration"></a>

Die Theme-Konfiguration gliedert sich in 4 Elemente:

1. Tabs in der Tab-Navigation
2. Bereiche in den einzelnen Tabs (Akkordeon-Elemente zum aufklappen)
3. Abschnitte die einen Bereich gliedern
4. Konfigurationsfelder in den einzelnen Abschnitten

![Aufbau der ThemeWare®-Konfiguration](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FCavSeUJaMiySTkunn5lb%2Fimage.png?alt=media\&token=62b07080-3dfa-4022-8c8f-e06bff3bf4b2)

### Aufbau des ThemeWar&#x65;**®** Handbuchs <a href="#aufbau-des-themeware-r-handbuchs" id="aufbau-des-themeware-r-handbuchs"></a>

In diesem Handbuch haben wir diese 4 Elemente wie folgt dargestellt:

1. Tabs
2. Bereiche
3. Abschnitte
4. Konfigurationsfelder

<figure><img src="/files/ViLyBZaR1Khxj8OzKfYO" alt=""><figcaption><p>Aufbau des ThemeWare<strong>®</strong> Handbuchs</p></figcaption></figure>


# Elemente in der Storefront

In diesem Bereich erfährst du welche Elemente – je nach Konfiguration – in der Shopware Storefront angezeigt werden damit du in der Theme-Konfiguration schneller die entsprechenden Konfigurationen finden kannst.

Bei der Suche nach Konfigurationsfeldern kannst du damit noch einfacher unseren [ThemeWare® Config-Finder](https://config.themeware.design/) nutzen. Ergänzend dazu empfehlen wir dir auch unser [ThemeWare® Lexikon](https://wiki.themeware.design/mehr-wissen/lexikon) in der ThemeWare® Wissensdatenbank.

## **Übersicht**

* [Header](/elemente-in-der-storefront/header)
* [Footer](/elemente-in-der-storefront/footer)
  * [Footer](/elemente-in-der-storefront/footer#footer-elemente)
* [Kategorieseiten](/elemente-in-der-storefront/kategorieseiten)
  * [Kategorieseiten](/elemente-in-der-storefront/kategorieseiten#sidebar)
  * [Kategorieseiten](/elemente-in-der-storefront/kategorieseiten#produkt-boxen)
* [Produktseiten](/elemente-in-der-storefront/produktseiten)
  * [Produktseiten](/elemente-in-der-storefront/produktseiten#galerie)
  * [Produktseiten](/elemente-in-der-storefront/produktseiten#buybox)


# Header

![ThemeWare® Header](/files/lc8ERzClHJVb17FMOJlb)

1. ThemeWare® USP-Bar
2. ThemeWare® Ankündigungsbanner
3. Shop-Logo
4. Suche
5. Aktions-Buttons (Merkzettel-Button, "Mein Konto"-Button, Warenkorb-Button)
6. Top-Bar (Sprachauswahl, Währungsauswahl, Service-/Hilfe-Menü)
7. Top-Navigation


# Footer

![ThemeWare® Footer](/files/Gar1T8aFBZET4xy2c60W)

1. ThemeWare® USP-Bar
2. ThemeWare® Oberer Bereich
3. ThemeWare® Mittlerer Bereich
4. ThemeWare®Unterer Bereich
5. Logos-Footer
6. Copyright-Footer
7. "Scroll-Up"-Button

## Footer-Elemente

Footer-Elemente sind genau genommen "Platzhalter" in den Spalten des Footer-Bereiches. Diese Footer-Elemente kannst du mit ThemeWare® Widgets befüllen.

![ThemeWare® Footer-Elemente](/files/PYEiy5DssBTG5Df78CdF)

1. ThemeWare® "Newsletter"-Widget
2. Service-Hotline
3. Footer-Navigation
4. ThemeWare® "Vorteile"-Widget
5. ThemeWare® "Versandarten"-Widget
6. ThemeWare® "Zahlungsarten"-Widget
7. ThemeWare® "Standort bzw. Ladengeschäft"-Widget
8. ThemeWare® "Auszeichnungen, Siegel oder Zertifikate"-Widget
9. ThemeWare® "Über uns"-Widget
10. ThemeWare® "Communities bzw. Social Media"-Widget


# Kategorieseiten

![ThemeWare® Kategorieseiten](/files/EIK5kOMIq6uZYy5Mo07G)

1. [#sidebar](#sidebar "mention") <mark style="color:orange;">(CMS-Layout mit Sidebar)</mark>
2. Listing <mark style="color:orange;">(CMS-Block "</mark><mark style="color:orange;">**Drei Spalten, Produkt-Boxen**</mark><mark style="color:orange;">" von Shopware)</mark>
3. Produktlisten-Aktionen

## Sidebar <a href="#sidebar" id="sidebar"></a>

![ThemeWare® Kategorieseiten: Sidebar](/files/o3HBgedgs10Sii1dSLaq)

1. CMS-Block "Bild, zentriert"
2. CMS-Block "Kategorie-Navigation"
3. CMS-Block "Text"
4. CMS-Block "Produkt-Filter"
5. ThemeWare® Sidebar-Widget (Inhalt "Vorteile")
6. ThemeWare® Sidebar-Widget (Inhalt "Communities bzw. Social Media")

## Produkt-Boxen <a href="#produkt-boxen" id="produkt-boxen"></a>

![ThemeWare® Kategorieseiten: Produkt-Boxen](/files/JcP9Z51ZXiX4o4tuChZj)

1. Produktbild (Cover-Bild)
2. Bewertung bzw. Bewertungs-Sterne
3. Produktname
4. Variantenmerkmale
5. Günstigster Preis
6. Merkzettel-Button
7. Produkt-Beschreibung
8. Preiseinheit
9. Aktions-Buttons (Kaufen-Button / Details-Button)
10. Rabatt-Badge
11. Topseller-Badge
12. Produkt-Preis
13. Strichpreis
14. ThemeWare® Versandkostenfrei-Badge
15. ThemeWare® Lagerbestand-Badge (mit ausreichend Lagerbestand)
16. ThemeWare® Lagerbestand-Badge (mit geringem Lagerbestand)


# Produktseiten

![ThemeWare® Produktseiten](/files/Vr7S9vpAElEjizqOfHZ6)

1. Breadcrumb
2. <mark style="color:orange;">CMS-Block "</mark><mark style="color:orange;">**Produktname & Hersteller-Logo**</mark><mark style="color:orange;">" von Shopware</mark>
3. Produktname
4. Hersteller-Logo
5. <mark style="color:orange;">CMS-Block "</mark><mark style="color:orange;">**Galerie und Buybox**</mark><mark style="color:orange;">" von Shopware</mark>
6. [#galerie](#galerie "mention")
7. [#buybox](#buybox "mention")
8. <mark style="color:orange;">CMS-Block "</mark><mark style="color:orange;">**Produktbeschreibung und -bewertungen**</mark><mark style="color:orange;">" von Shopware</mark>

## Galerie <a href="#galerie" id="galerie"></a>

![ThemeWare® Produktseiten: Galerie](/files/AIpOI6uaKR8a008x4AfJ)

1. ThemeWare® Produkt-Badges
2. Produktbild
3. Pfeil-Navigation
4. ThemeWare® Hinweistext "Abbildung ähnlich"
5. Punkt-Navigation
6. Thumbnails

## Buybox <a href="#buybox" id="buybox"></a>

![ThemeWare® Produktseiten: Buybox](/files/ZvyUHGT20WP4UgP5yAWW)

1. Preis
2. Versandkostenfrei-Hinweis
3. Varianten-Auswahl (Layout "Text")
4. Varianten-Auswahl (Layout "Farbe")
5. Mengenauswahl und Kaufen-Button

![ThemeWare® Produktseiten: Buybox](/files/FI44XoEG6ddmJOX2j79o)

1. Angebotspreis/Rabattpreis (+Streichpreis)
2. ThemeWare® Lagerbestand-Hinweis
3. ThemeWare® Individuelle Ankündigung
4. ThemeWare® Zahlungsarten auf der Artikelseite
5. Produktnummer + ThemeWare® Produkt-Spezifikationen
6. ThemeWare® Teilen-Links


# Add-ons

ThemeWare® Add-ons erweitern dein Theme um zusätzliche Funktionen, die du bei Bedarf einzeln freischalten kannst. Jedes Add-on ist ein eigenständiges Abo und kann unabhängig von den anderen gebucht oder gekündigt werden.

> ### Warum Add-ons?
>
> Wir möchten den Preis für ThemeWare® bewusst stabil halten und das Theme gleichzeitig wie gewohnt kontinuierlich weiterentwickeln.
>
> Viele neue Funktionen gehören klar zum klassischen Theme-Umfang und werden weiterhin direkt in ThemeWare® integriert. Darüber hinaus entstehen jedoch auch Features und Feature-Requests, die deutlich über den üblichen Umfang eines Themes hinausgehen.
>
> Solche erweiterten Funktionen bieten wir als optionale Add-ons an. So kannst du sie gezielt freischalten, wenn du sie benötigst — und alle Käufer behalten die Freiheit, nur für den Funktionsumfang zu zahlen, den sie wirklich nutzen möchten.

{% hint style="info" %}
**Hinweis**: Add-ons in der Administration gehören zu den ThemeWare® Anpassungen der Administration und stehen daher nur in der **Pro-Edition** zur Verfügung.
{% endhint %}

***

## Verfügbare Add-ons

### Backup-Manager

Theme-Konfiguration sichern, übertragen und direkt bearbeiten. Datei-Export, geführter Import mit automatischer Pre-Backup-Sicherung und ein Inline-JSON-Editor mit Live-Validierung und Änderungs-Zähler.

{% content-ref url="/pages/mk9qPacltI0FioVCslhi" %}
[Backup-Manager](/zusatzfunktionen/add-ons/backup-manager)
{% endcontent-ref %}

### Verschachtelte Unterkategorien

CMS-Element für Kategorie- und Landingpages: Präsentiere mehrere Unterkategorien gemeinsam mit ihren direkten Unterkategorien in einem aufgeräumten Card- oder Clean-Layout.

{% content-ref url="/pages/EU77ZEupuu1SnRvodv5P" %}
[Verschachtelte Unterkategorien](/zusatzfunktionen/add-ons/verschachtelte-unterkategorien)
{% endcontent-ref %}

***

## So funktioniert der Kauf

Add-ons werden als In-App-Kauf direkt im Shopware-Admin freigeschaltet. Der gesamte Kauf-Prozess läuft über deinen Shopware-Account — Endpreis, Zahlungsdaten und Abrechnung kommen aus dem Shopware-Store.

**Ablauf:**

1. Im ThemeWare® Hub auf das gewünschte Add-on klicken (Tab "Add-ons" oder "Varianten").
2. Auf "**Freischalten →**" klicken — Shopwares Kauf-Modal öffnet sich.
3. Falls du den "**Shopware Extension Store**" noch nicht aktiviert hast und dein Shop noch nicht mit deinem Shopware-Account verbunden ist, wirst du im Modal zur Verbindung geleitet. Das passiert automatisch.
4. Buchung bestätigen — das Add-on ist sofort aktiv.

**Abrechnung:** Monatlich, jederzeit kündbar, über deinen Shopware-Account.

{% hint style="info" %}
**Endpreis im Kauf-Dialog**\
Die im Hub angezeigten Preise sind Richtwerte. Der tatsächliche Endpreis inklusive länderspezifischer Anpassungen wird dir direkt im Shopware-Kauf-Modal vor der Bestätigung angezeigt.
{% endhint %}

{% hint style="info" %}
**Support zu Käufen, Lizenzen und Abrechnung**\
Bei Fragen zu Käufen, Lizenzen, Buchungen oder Abrechnungen wende dich bitte direkt an Shopware. Wir haben darauf keinen Einfluss.
{% endhint %}

#### Kauf-Modal

<figure><img src="/files/o9wGHxk3cpMHcjkh34KJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/W4RHjZipJj0N6QBQodNY" alt=""><figcaption></figcaption></figure>

***

## Gebuchte Add-ons

Gekaufte bzw. gebuchte Add-ons werden dir entsprechend gekennzeichnet.

<figure><img src="/files/LDjJboTkEwgKjBvU9iTn" alt=""><figcaption></figcaption></figure>

Du kannst sie kündigen, indem du die Lizenz in deinem Shopware-Account (Händler → Shops → \[Dein Shop] → Lizenzen) entfernst.

{% hint style="info" %}
**Support zu Käufen, Lizenzen und Abrechnung**\
Bei Fragen zu Käufen, Lizenzen, Buchungen oder Abrechnungen wende dich bitte direkt an Shopware. Wir haben darauf keinen Einfluss.
{% endhint %}

***

## Inklusive Add-ons

Fünf Designvarianten — Bike, Kids, Global, Fit und Plants — sind im Theme ohne Aufpreis enthalten. Wechsle den Look deines Shops per Klick, ganz ohne zusätzliche Lizenz.

{% content-ref url="/pages/9r2kJi9NnhoNZmA8CEC1" %}
[Designvarianten](/zusatzfunktionen/add-ons/designvarianten)
{% endcontent-ref %}

***

## Support & Sponsoring

Pixel-Kaffee und Pixel-Patenschaft sind freiwillige Beiträge zur Unterstützung der ThemeWare®-Entwicklung. Sie schalten keine zusätzlichen Funktionen frei, sondern bedanken sich mit einem offiziellen "Pixel-Friend"- bzw. "Pixelpate"-Status. – Vielen Dank! 💙


# Backup-Manager

Der **Backup-Manager** sichert, überträgt und bearbeitet deine Theme-Konfiguration direkt im Tab **"Backup"** des ThemeWare® Hubs. Er bündelt drei Funktionen: den **Export** der Konfiguration als JSON-Datei, einen geführten **Import** mit verpflichtender Pre-Backup-Sicherung und einen **erweiterten Modus** mit Inline-JSON-Editor für die Direkt-Bearbeitung.

{% hint style="warning" %}
**Wichtig**: Der Backup-Manager ist ein Add-on und muss separat freigeschaltet werden. [Warum Add-ons?](/zusatzfunktionen/add-ons#warum-add-ons)
{% endhint %}

## Theme-Konfiguration

### Exportieren

Lädt die Konfigurationswerte des Themes als JSON-Datei herunter. Geeignet für Sicherungen vor größeren Änderungen oder zum Übertragen zwischen Shops.

**Schritt für Schritt:**

1. Im Backup-Tab das gewünschte Theme suchen.
2. Auf "Exportieren" klicken.
3. Der Browser lädt eine Datei mit dem Schema `tcinn-<theme-name>-<datum>.json`.

{% hint style="info" %}
**Was wird exportiert?**\
Nur die Theme-Konfigurationswerte (configValues) – also alle Anpassungen am Theme. Hochgeladene Medien (Logos, Bilder) sind als Verweise enthalten, die Mediendateien selbst werden im aktuellen Format nicht mit exportiert.
{% endhint %}

### Importieren

Spielt eine zuvor exportierte JSON-Datei in das gewählte Theme ein. Bestehende Konfigurationswerte werden dabei vollständig ersetzt, daher führt der Import-Dialog vorab durch ein Backup.

**Schritt für Schritt:**

1. Im Backup-Tab beim Ziel-Theme auf "Importieren" klicken. Das Modal "Theme-Konfiguration importieren" öffnet sich.
2. Im Modal "Backup herunterladen" klicken (Schritt 1). Die aktuelle Konfiguration wird zur Sicherheit als JSON gespeichert.
3. "Datei wählen …" klicken (Schritt 2) und die zu importierende JSON-Datei auswählen.
4. Falls das Theme die Datei akzeptiert, "Konfiguration importieren" klicken.

Das Theme wird automatisch neu kompiliert.

{% hint style="warning" %}
**Bestehende Konfiguration wird ersetzt**\
Der Import überschreibt die bisherigen Konfigurationswerte komplett. Deshalb ist das Backup in Schritt 1 verpflichtend – fehlt es, bleibt der Importieren-Button deaktiviert.
{% endhint %}

{% hint style="info" %}
**Cross-Variant-Import**\
Stammt die Import-Datei aus einer anderen ThemeWare®-Variante (z.B. Plants-Datei in Modern-Theme), erkennt der Import das automatisch und zeigt einen Hinweis. Deine Anpassungen werden übernommen, nicht angepasste Felder nutzen die Defaults der aktuellen Variante.
{% endhint %}

{% hint style="info" %}
**Medien-Hinweis**\
Enthält die Datei Verweise auf Medien-IDs (Logos, Bilder), existieren diese ggf. nicht im Ziel-Shop und müssen nach dem Import manuell zugewiesen werden.
{% endhint %}

***

## Erweiterter Modus

**Für fortgeschrittene Nutzer**: ein JSON-Editor direkt unter jedem Theme, mit dem die Konfiguration ohne Umweg über die Standard-Oberfläche bearbeitet werden kann.

**Schritt für Schritt:**

1. Im Backup-Tab oben auf "Erweiterten Modus aktivieren" klicken.
2. Unter jedem Theme erscheint ein JSON-Editor mit der aktuellen Konfiguration.
3. Vor dem Speichern beim betroffenen Theme zwingend "Exportieren" klicken (Backup-Pflicht).
4. Änderungen im JSON-Feld vornehmen.
5. Auf "Speichern" klicken.

Das Theme wird automatisch neu kompiliert.

{% hint style="danger" %}
**Vorsicht beim Editieren**\
Fehlerhafte JSON-Eingaben können das Theme beschädigen oder die Storefront beeinträchtigen. Der "Speichern"-Button bleibt deshalb so lange deaktiviert, bis ein Backup für das Theme erstellt wurde und die Eingabe gültiges JSON ist.
{% endhint %}

{% hint style="info" %}
**Erweiterter Modus deaktivieren**\
Über "Erweiterten Modus beenden" oben auf der Seite. Die Editoren werden ausgeblendet, ungespeicherte Änderungen gehen dabei verloren.
{% endhint %}

***

## Anwendungsfälle

Typische Szenarien für die Backup-Funktionen:

### Sichern und Wiederherstellen

* **Sicherung vor größeren Änderungen** — Vor einem Plugin-Update, einer umfangreichen Theme-Anpassung oder dem Aktivieren des "Erweiterten Modus" eine Sicherung herunterladen.
* **Wiederherstellung nach einem Fehler** — Eine Änderung hat das Theme beschädigt oder unerwünschte Effekte verursacht? Die zuvor exportierte JSON-Datei einfach in das betroffene Theme zurückimportieren.

### Übertragen zwischen Themes oder Shops

* **Konfiguration in ein anderes Theme reinschreiben** — Du hast ein bestehendes Custom-Duplikat und möchtest die Konfiguration einer anderen Variante (z.B. aus Plants) dort einfließen lassen. Im Quell-Theme exportieren, im Ziel-Theme importieren.
* **Setup von Test-Shop auf Live-Shop übertragen** — Du entwickelst auf einem Test-Shop und möchtest das fertige Theme-Setup im Produktiv-Shop einspielen. Export auf Test, Datei herunterladen, Import auf Live.

### Direkt-Bearbeitung

* **Detail-Anpassungen am JSON für Power-User** — Einzelne Konfigurationswerte sollen schnell und gezielt geändert werden, ohne den Umweg über die Standard-Oberfläche im Theme-Manager. Dafür den "Erweiterten Modus" aktivieren.


# Designvarianten

#### 15 Looks für deinen Shop

Von der modernen Allzweck-Variante bis zum dunklen Outdoor-Look — gib deinem Shop mit einem Klick einen komplett neuen Charakter. Fünf Varianten sind direkt im Theme enthalten, zehn weitere Designs lassen sich als monatliches Add-on freischalten. Inkl. Cards-, Boxed- oder Clean-Layouts, hellen und dunklen Themes.

***

## Add-on-Varianten

Zehn zusätzliche Designvarianten, einzeln freischaltbar.

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><h4>Modern</h4></td><td>Klares, helles Design mit reduzierten Akzenten — moderner Allrounder für Lifestyle-Shops.</td></tr><tr><td><h4>Clean</h4></td><td>Aufgeräumt und reduziert — viel Weißraum für Mode, Beauty und Lifestyle.</td></tr><tr><td><h4>Strong</h4></td><td>Kräftige Akzente und prägnante Typografie — für selbstbewusste Marken.</td></tr><tr><td><h4>Outdoor</h4></td><td>Dunkles, robustes Design — für Outdoor-, Sport- und Reise-Shops.</td></tr><tr><td><h4>Living</h4></td><td>Warmes, einladendes Look-and-Feel — Wohnen, Lifestyle, Geschenke.</td></tr><tr><td><h4>Bio</h4></td><td>Erdig-grünes Design mit natürlichem Look — Bio, Öko, Naturkost.</td></tr><tr><td><h4>Exquisite</h4></td><td>Edles, dunkles Design mit Premium-Anmutung — Schmuck, Mode, Luxusartikel.</td></tr><tr><td><h4>Bath</h4></td><td>Helles, ruhiges Design mit weicher Optik — Wellness, Pflege, Bad.</td></tr><tr><td><h4>Lights</h4></td><td>Helles, freundliches Design — Beleuchtung, Elektronik, Technik.</td></tr><tr><td><h4>Electric</h4></td><td>Modernes Design im Box-Layout — Elektronik, Tech und Gadgets.</td></tr></tbody></table>

***

## Inklusive Varianten

Fünf Varianten sind im Theme ohne Aufpreis enthalten.

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><h4>Bike</h4></td><td>Frisches, sportliches Design in Grün — Fahrrad, E-Bike und Outdoor-Sport.</td></tr><tr><td><h4>Kids</h4></td><td>Verspieltes, freundliches Design — Spielzeug, Kindermode und Babyartikel.</td></tr><tr><td><h4>Global</h4></td><td>Klassisches, kraftvolles Design im Box-Layout — international, Großhandel, Industrie.</td></tr><tr><td><h4>Fit</h4></td><td>Energetisches Design mit kräftigen Akzenten — Fitness, Sport-Nahrung, Workout.</td></tr><tr><td><h4>Plants</h4></td><td>Naturnahes, dunkelgrünes Design — Pflanzen, Garten, Naturprodukte.</td></tr></tbody></table>

***

## So funktioniert der Kauf

Add-on-Varianten kosten je 14,99 € pro Monat, jederzeit kündbar. Der Kauf läuft über deinen Shopware-Account.

{% hint style="info" %}
**Variante anlegen ist eine Einmal-Aktion**\
Das Anlegen einer Variante als Duplikat ist ein Einmal-Vorgang. Da Shopware aktuell nur Abo-Modelle erlaubt (keine Einmalkäufe), läuft die Freischaltung als monatliches Abo. Wenn du deine Variante angelegt hast, kannst du das Abo in deinem Shopware-Account jederzeit kündigen — das angelegte Duplikat bleibt in deinem Shop bestehen.
{% endhint %}

{% content-ref url="/pages/FIwQZmHJt6kIE4cRa9jK" %}
[Add-ons](/zusatzfunktionen/add-ons)
{% endcontent-ref %}

***

## Variante anlegen

Aus jeder Variante lässt sich im Hub mit einem Klick ein Theme-Duplikat erzeugen, das im Look der gewählten Variante erscheint. Dein bisheriges Theme bleibt dabei unverändert.

{% content-ref url="/pages/QSTv1UyjEgvoczVDkHx2" %}
[Varianten](/zusatzfunktionen/hub/varianten)
{% endcontent-ref %}


# Verschachtelte Unterkategorien

**Verschachtelte Unterkategorien** ist ein CMS-Element für Kategorie- und Landingpages. Es zeigt mehrere Unterkategorien gemeinsam mit ihren direkten Unter-Unterkategorien an – wahlweise im **Karten-** oder **Clean-Layout**.

***

Die ausführliche Beschreibung mit allen Konfigurationsmöglichkeiten findest du im CMS-Bereich:

{% content-ref url="/pages/NxyBAwIWzit2jpFuzU5c" %}
[Verschachtelte Unterkategorien](/zusatzfunktionen/cms-erweiterungen/cms-elemente/kategorieseite/verschachtelte-unterkategorien)
{% endcontent-ref %}


# ThemeWare® Hub

Der ThemeWare® Hub integriert die Vorteile und Funktionen des ThemeWare® Service-Portals direkt in deine Administration – genau dorthin, wo du sie brauchst.

Der Hub bündelt alle Funktionen in eigenen Tabs:

* **Dashboard** — Überblick, Einrichtungs-Assistent und Schnellzugriffe
* **Add-ons** — optionale Funktionen freischalten
* **Utilities** — kostenloses Extra-Paket anfordern
* **Varianten** — Theme-Varianten anlegen und Konfigurationen übernehmen
* **Backup** — Theme-Konfiguration sichern und wiederherstellen
* **News** — Neuigkeiten & Ankündigungen
* **Changelog** — Versionshistorie & Updates
* **Support** — Hilfe, Anleitungen & Kontakt

{% hint style="info" %}
**Hinweis**: Der ThemeWare® Hub in der Administration gehört zu den ThemeWare® Anpassungen der Administration und steht daher nur in der **Pro-Edition** zur Verfügung.
{% endhint %}

***

## ThemeWare® Hub aufrufen

Den ThemeWare® Hub erreichst du über die Hauptnavigation oder die Shopware-Einstellungen.

#### Hauptnavigation

Inhalte > ThemeWare® {Dein Theme}

<figure><img src="/files/nRtcaddAd9k6UI3sHjRo" alt=""><figcaption></figcaption></figure>

#### Shopware-Einstellungen

Einstellungen > Erweiterungen > ThemeWare® {Dein Theme} Dashboard

<figure><img src="/files/0w197KTVipwVYp0FFXvv" alt=""><figcaption></figcaption></figure>


# Dashboard

Das ThemeWare® Dashboard bietet dir alle wichtigen Informationen, Einrichtungshilfen und Schnellzugriffe auf einen Blick.

<figure><img src="/files/ueEwZ1QY58k0cfIX3UhV" alt=""><figcaption></figcaption></figure>

## Schnellzugriffe

Über die Kachel-Leiste springst du direkt zu den wichtigsten Bereichen und Ressourcen:

* **Wissensdatenbank** — Anleitungen, Tutorials und Profi-Wissen
* **ThemeWare® Utilities** — kostenlose Extras (öffnet den [Utilities-Tab](/zusatzfunktionen/hub/utilities))
* **Add-ons** — Erweiterungen für dein Setup (öffnet den [Add-ons-Tab](/zusatzfunktionen/hub/add-ons))
* **Video-Tutorial** — Schritt-für-Schritt-Videos
* **Handbuch**, **News**, **Changelog** und **Feedback einsenden** — Doku, Aktuelles und Verbesserungsvorschläge

## Erste Schritte (Einrichtungs-Assistent)

Der Einrichtungs-Assistent führt dich durch die wichtigsten Schritte; eine Fortschrittsanzeige zeigt dir, wie weit du bist:

1. **Plugin installiert** — bereits erledigt, sobald das Theme in deiner Administration aktiv ist.
2. **Einstellungen konfigurieren** — Theme-Konfiguration für deinen Verkaufskanal anpassen.
3. **Kostenloses ThemeWare® Utilities-Paket holen** — Erlebniswelten, 100+ Logos und Customizing-Plugin, etc.
4. **Deinen Shop personalisieren** — Texte für Top-Bar, Footer und Social Media anpassen.

Jeden Schritt kannst du aufklappen und als erledigt markieren oder den ganzen Assistenten über das **×** ausblenden.

## Support & Bewertungen

In der Seitenleiste findest du:

* **Support & Hilfe** — direkter Zugang zum Support-Chat und zur Ticket-Erstellung.
* **Das sagen unsere Nutzer** — Bewertungen anderer Shopbetreiber sowie die Möglichkeit, selbst eine Bewertung abzugeben.

## Weitere Bereiche

Im unteren Bereich des Dashboards findest du zusätzliche Karten:

* **Footer-Hinweis entfernen** — Entfernung des Brandings beantragen.
* **Für Agenturen & Partner** — Prioritäts-Support und Partnerprogramm.


# Add-ons

Im Add-ons-Tab im ThemeWare® Hub findest du alle verfügbaren Erweiterungen für dein ThemeWare® Theme. Jedes Add-on lässt sich einzeln freischalten und unabhängig von den anderen verwalten.

Eine ausführliche Beschreibung der einzelnen Add-ons findest du in der [Add-ons-Übersicht](/zusatzfunktionen/add-ons).

<figure><img src="/files/28wC6RS1K7RfXXtzNGBM" alt=""><figcaption></figcaption></figure>

> #### Warum Add-ons?
>
> Wir behalten den Theme-Preis bewusst stabil und entwickeln das Theme kontinuierlich mit neuen Funktionen weiter. Features, die deutlich über den klassischen Theme-Umfang hinausgehen, bieten wir als optionale Add-ons an — so kannst du sie freischalten, wenn du sie brauchst, und die Wahl bleibt bei dir, ohne dass alle Käufer den erweiterten Funktionsumfang mittragen müssen.

## Add-on freischalten

1. Im Add-ons-Tab das gewünschte Add-on suchen.
2. Auf "Freischalten →" klicken — Shopwares Kauf-Modal öffnet sich.
   * **Hinweis**: Du musst den "Shopware Extension Store" aktiviert und deinen Shop mit deinem Shopware-Account verknüpft haben um InApp-Käufe tätigen zu können.
3. Den Kauf im Modal bestätigen.

Nach erfolgreichem Kauf ist das Add-on sofort aktiv.

Details zu den verfügbaren Add-ons, zum Kaufmodell und zur Abrechnung findest du in der [Add-ons-Übersicht](/zusatzfunktionen/add-ons).


# Utilities

Die ThemeWare® Utilities sind ein kostenloses Paket mit Extras für Design, Individualisierung und Conversion. Du forderst es einmalig per Formular an und erhältst sofort Zugang zu allen Ressourcen.

<figure><img src="/files/oc7PnsryYcTGfPFs6gsW" alt=""><figcaption></figcaption></figure>

## Anfordern

1. Im Formular deine **E-Mail-Adresse** eintragen.
2. Deine **Shopware-6-Version** wählen (Self-hosted oder Cloud).
3. Angeben, ob du **Shopbetreiber** oder **Shopware-Agentur** bist.
4. Die Datenschutzerklärung bestätigen und auf "Jetzt kostenfrei registrieren" klicken.

Mit der Eintragung meldest du dich zu unserem Newsletter an, über den wir dir die Ressourcen und gelegentlich relevante Informationen zusenden. Du kannst dich jederzeit mit einem Klick wieder abmelden.

{% hint style="success" %}
**Tipp**: Die Utilities umfassen unter anderem eine fertige Erlebniswelt, die du dank One-Click-Import in Sekunden installierst.
{% endhint %}

***

#### Mehr Informationen

Du findest mehr Informationen zu den ThemeWare® Utilites auch im ThemeWare® Service Portal:

{% embed url="<https://service.themeware.design/themeware-utilities>" %}


# Varianten

Wechsle den Look deines Shops mit einer anderen Variante oder übernimm deine Anpassungen. Beide Funktionen legen ein Duplikat an — dein Theme bleibt unverändert.

Im Varianten-Tab siehst du alle 15 ThemeWare® Varianten. Beim Erstellen einer Variante entsteht ein neues Theme-Duplikat im Look der gewählten Variante. Dein bisheriges Theme bleibt natürlich unverändert bestehen.

{% hint style="info" %}
**Welche Funktion brauchst du?**

**Variante erstellen** — frische Variante anlegen, schnell und sauber, **ohne** deine bisherigen Anpassungen.

**Konfiguration übernehmen** — Variante anlegen und deine Anpassungen (Logos, Farben, Texte) aus einem bestehenden Theme **mitnehmen**.
{% endhint %}

<figure><img src="/files/RjaD3m7fAN3ZjIw7l3kj" alt=""><figcaption></figcaption></figure>

***

## Filter & Tags

Im Varianten-Tab im Hub kannst du die Übersicht nach folgenden Kategorien filtern:

* **Topseller** — die meistverkauften fünf Varianten
* **Beliebt** — beliebte Varianten quer durch alle Stile
* **Hell** — Designs mit hellem, freundlichem Look
* **Dunkel** — Designs mit dunkler Anmutung
* **Boxed** — Designs im Box-Layout
* **Inklusive** — die fünf bereits enthaltenen Varianten
* **Add-on** — die zehn freischaltbaren Varianten

***

## Variante erstellen

1. *Optional*: Filter wählen (z.B. Topseller, Hell, Dunkel, Boxed), um die Auswahl einzugrenzen.
2. Auf die gewünschte Variant-Karte klicken. Das Modal "Variante als Duplikat anlegen" öffnet sich.
3. Im Modal die Auswahl prüfen (Quelle und Ziel).
4. Auf "Variante anlegen" klicken.

Das neue Duplikat erscheint danach in deinem Theme-Manager.

{% hint style="warning" %}
**Sales-Channel-Zuweisung**\
Das frisch angelegte Duplikat ist noch keinem Sales-Channel zugewiesen. Öffne den Theme-Manager und weise das Theme dem gewünschten Sales-Channel zu, damit es im Storefront aktiv wird.
{% endhint %}

{% hint style="info" %}
**Logos**\
Logos werden vom Plugin-Theme deiner aktuellen Variante übernommen — eigene hochgeladene Logos sind dabei enthalten. Du kannst sie im Theme-Manager nach dem Anlegen austauschen.
{% endhint %}

{% hint style="info" %}
**Hintergrundbilder**\
Folgende Varianten nutzen werkseitige Hintergrundbilder: **Bath, Bike, Bio, Electric, Exquisite, Fit, Global, Kids, Living, Outdoor, Plants, Strong**.

**Wenn du in eine Variante ohne Hintergrund wechselst** (z.B. Bike → Modern), bleibt das alte Hintergrundbild der Quell-Variante zunächst sichtbar — das ist eine [bekannte Einschränkung in Shopware](https://github.com/shopware/shopware/issues/10702), die wir aktuell nicht automatisch lösen können.

Du hast zwei einfache Wege, das Hintergrundbild im neuen Theme zu entfernen:

1. **Anzeige ausschalten** (empfohlen): Im Theme-Manager findest du zu jedem Hintergrundbild eine Anzeigen/Nicht-Anzeigen-Option. Setze sie auf "nicht anzeigen" — das Bild verschwindet sofort, ohne dass du das Medium löschen musst.
2. **Eigenes Bild hochladen**: Einfach ein anderes Bild im Theme-Manager hinterlegen — das überschreibt den vererbten Werks-Hintergrund.
   {% endhint %}

***

## Konfiguration übernehmen (Migration)

Übernimm Look und Anpassungen aus einer anderen installierten ThemeWare® Variante (Pro oder Cloud) in dein aktuelles Theme. Sinnvoll zum Beispiel beim Wechsel von der Cloud-App auf die Pro-Variante oder wenn du eine andere Variante als Basis weiterführen möchtest.

{% hint style="info" %}
**Hinweis**: Diese Funktion befindet sich noch in der Entwicklung. Wir freuen uns über konstruktives [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}

**Voraussetzung:** Mindestens eine zweite ThemeWare® Variante (Pro oder Cloud) ist im Shop installiert. Andernfalls erscheint ein Hinweis statt der Auswahlfelder.

**Schritt für Schritt:**

1. Im Bereich "Konfiguration übernehmen" die Quelle aus dem Dropdown auswählen. Verfügbar sind alle anderen ThemeWare® Varianten (Pro/Cloud) sowie deren Duplikate.
2. Das Ziel ist automatisch dein aktuelles Theme (rechts daneben angezeigt).
3. Auf "Konfiguration übernehmen" klicken.

Es entsteht ein neues Duplikat unter deinem aktuellen Theme als Parent. Look und Anpassungen der Quelle (Logo, Farben, Typografie usw.) bleiben erhalten.

{% hint style="warning" %}
**Sales-Channel-Zuweisung**\
Das frisch angelegte Duplikat ist noch keinem Sales-Channel zugewiesen. Öffne den Theme-Manager und weise das Theme dem gewünschten Sales-Channel zu, damit es im Storefront aktiv wird.
{% endhint %}

{% hint style="info" %}
**Cloud-App als Quelle**\
Auch ThemeWare® Cloud-Editionen (Apps) können als Quelle dienen. Praktisch beim Wechsel von Cloud auf Pro: Cloud-Konfiguration einmal übernehmen, danach die Cloud-App deinstallieren.
{% endhint %}

{% hint style="info" %}
**Quelle = Duplikat**\
Wenn du ein Duplikat als Quelle wählst, werden auch die Anpassungen des darunterliegenden Plugin- oder App-Themes mit übernommen.
{% endhint %}

{% hint style="success" %}
**Quelle deinstallieren**\
Nach erfolgreicher Übernahme wird das Quell-Plugin oder die Quell-App nicht mehr für das übernommene Theme benötigt — du kannst es bedenkenlos deinstallieren.
{% endhint %}

***

## Premium-Varianten (Add-on)

Details zu den verfügbaren Add-on-Varianten, Tags und Preisen findest du in der Add-ons-Übersicht.

{% content-ref url="/pages/9r2kJi9NnhoNZmA8CEC1" %}
[Designvarianten](/zusatzfunktionen/add-ons/designvarianten)
{% endcontent-ref %}

***

## Anwendungsfälle

Typische Szenarien für die beiden Funktionen:

### Variante erstellen

* **Variante ausprobieren** — Du möchtest sehen, wie eine andere Variante (z.B. Plants) bei deinem Setup aussehen würde, ohne dein bestehendes Theme zu verändern.
* **Verschiedene Looks pro Sales-Channel** — Du betreibst mehrere Sales-Channels und möchtest jedem eine eigene Variante zuweisen.
* **Frischer Start** — Du möchtest mit den Werks-Einstellungen einer Variante neu beginnen, ohne deine bisherigen Anpassungen.

### Konfiguration übernehmen

* **Wechsel zwischen zwei Pro-Plugins** — Du hast z.B. ThemeWare® Plants und Modern parallel installiert und möchtest deine Plants-Konfiguration in Modern weiterführen.
* **Wechsel von Cloud (App) auf Pro (Plugin)** — Du hast die Cloud-App installiert, kaufst zusätzlich das Pro-Plugin und möchtest deine Cloud-Konfiguration übernehmen. Anschließend kann die Cloud-App deinstalliert werden.
* **Variante wird im Store nicht mehr angeboten** — Deine bisherige Variante steht nicht mehr zum Kauf bereit. Du wechselst auf eine aktive Variante und nimmst dein Setup mit.
* **Custom-Duplikat als Basis weiterführen** — Du hast ein gepflegtes Custom-Duplikat unter einer Variante und möchtest dessen Look unter einer anderen Variante weiterführen.

{% hint style="info" %}
**Du möchtest in ein bestehendes Theme reinschreiben statt ein neues anzulegen?**\
Dafür gibt es den [Backup-Tab](/zusatzfunktionen/hub/backup): Konfiguration aus der Quelle exportieren, in das Ziel-Theme importieren. Dort gibt es zudem ein Sicherheitsnetz mit verpflichtendem Backup vor dem Überschreiben.
{% endhint %}


# Backup

Überblick über alle Themes deiner ThemeWare®-Familie: Verkaufskanal-Zuweisung sehen, das passende Theme konfigurieren und die Konfiguration sichern.

Im Backup-Tab erhältst du einen Überblick über alle Themes deiner ThemeWare®-Familie (Basis-Theme + Duplikate) – inklusive Verkaufskanal-Zuweisung, direktem Sprung in die Konfiguration und natürlich der Sicherung der Theme-Konfiguration.

<figure><img src="/files/Dl7LDXTzhPTwLQ9J6hc3" alt=""><figcaption></figcaption></figure>

***

## Übersicht & Konfigurieren

Jede Theme-Zeile zeigt, welchem Verkaufskanal das Theme zugewiesen ist (oder dass es noch keinem zugewiesen ist). Über **"Konfigurieren"** springst du direkt in den Theme-Manager genau dieses Themes – bei Duplikaten also gezielt in das Theme, das im jeweiligen Verkaufskanal live ist.

***

## Backup erstellen

Mit der praktischen **"Kopieren"**-Funktion sicherst du die Konfiguration eines Themes mit nur einem Klick und erleichterst dir manuelle Backups deutlich. Aufklappen, JSON kopieren, fertig.

**Schritt für Schritt:**

1. Im Backup-Tab das gewünschte Theme suchen.
2. Theme-Bereich aufklappen.
3. Auf "Kopieren" klicken.
   * Die Theme-Konfiguration befindet sich nun in der Zwischenablage.
4. Füge Sie in eine TXT-Datei ein und speichere diese.

***

## Backup-Manager (Add-on)

Details zum Funktionsumfang und Preis des Backup-Managers findest du in der Add-ons-Übersicht.

{% content-ref url="/pages/mk9qPacltI0FioVCslhi" %}
[Backup-Manager](/zusatzfunktionen/add-ons/backup-manager)
{% endcontent-ref %}

***

{% hint style="info" %}
**Du möchtest stattdessen ein neues Duplikat aus einer Quelle anlegen?**\
Dafür gibt es im [Varianten-Tab](/zusatzfunktionen/hub/varianten) die Funktion "Konfiguration übernehmen". Sie erstellt ein neues Theme mit den Anpassungen aus einer beliebigen ThemeWare® Edition (Pro oder Cloud) und lässt dein bestehendes Setup unverändert.
{% endhint %}


# News

Im News-Tab findest du aktuelle Neuigkeiten, Updates und Ankündigungen rund um ThemeWare®. Die Beiträge werden bei jedem Aufruf direkt aus dem ThemeWare® Service-Portal (via RSS-Feed) geladen.

<figure><img src="/files/vbXjQZw9nmlKJXdOMrdS" alt=""><figcaption></figcaption></figure>

***

## Neuigkeiten und Ankündigungen

{% embed url="<https://service.themeware.design/news>" %}


# Changelog

Im Changelog-Tab verfolgst du die komplette Versionshistorie von ThemeWare® — mit allen Highlights, Änderungen und Hinweisen je Version. Die Daten werden bei jedem Aufruf direkt aus dem ThemeWare® Service-Portal (via JSON-Feed) geladen, du verpasst also kein Release.

{% hint style="info" %}
**Hinweis**: Es werden nur Daten gelesen — es werden keine Daten an das Service-Portal übertragen.
{% endhint %}

<figure><img src="/files/kl56h3pg7IkGQKerQ9vP" alt=""><figcaption></figcaption></figure>

## Aufbau

Die Einträge sind nach Hauptversionen gruppiert (z.B. 4.x, 3.x). Jeder Versionseintrag lässt sich aufklappen und zeigt:

* **Highlights** — die wichtigsten Neuerungen
* **Änderungen** — alle weiteren Anpassungen
* **Hinweise** — wichtige Informationen zur Version

Badges am Eintrag kennzeichnen die Art der Version (Feature, Premium-Request, Bugfix, Hinweis). Marker wie `Pro` oder `Cloud` zeigen, für welche Edition eine Änderung gilt.

## Bedienung

* **Zu Version springen** — über die Versions-Buttons (z.B. "4.x") oben gelangst du direkt zur gewünschten Hauptversion.
* **Alle ausklappen / einklappen** — zeigt oder versteckt die Details aller Einträge.
* Die neueste Version ist beim Öffnen automatisch aufgeklappt.

***

## Installierte Version

Deine aktuell installierte Version wird im Changelog mit einem blauen Rahmen und dem Hinweis "Installiert" hervorgehoben.

<figure><img src="/files/iYt9bSshtuD0EiaTKRtA" alt=""><figcaption><p>Installierte Version hervorgehoben</p></figcaption></figure>

Gibt es eine neuere Version, erscheint oben ein Hinweis "Update empfohlen" mit deiner installierten und der aktuellsten Version.

<figure><img src="/files/fMnWT4H6WiHhGNClw9cL" alt=""><figcaption><p>"Update empfohlen"-Hinweis</p></figcaption></figure>

***

## Changelog

{% embed url="<https://service.themeware.design/changelog>" %}


# Support

Im Support-Tab bündeln wir alle Wege zu Hilfe, Anleitungen und Kontakt — von der Selbsthilfe bis zum persönlichen Support.

<figure><img src="/files/y8ttQZHLI64mp1pyTZLl" alt=""><figcaption></figcaption></figure>

## Live-Chat

Über "Chat starten" öffnest du unseren Support-Chat direkt im Hub und erhältst ohne Wartezeit Antworten auf deine Fragen.

## Wissen, Antworten & Lösungen

Karten mit den wichtigsten Selbsthilfe-Ressourcen:

* **Wissensdatenbank** — Tutorials, Tipps & Expertenwissen
* **Handbuch** — Features & Konfigurationen
* **Shopware Doku** — Grundfunktionen von Shopware
* **Video-Tutorial** — Schritt-für-Schritt-Videos
* **Config-Finder** — Konfigurationen schnell finden
* **Häufige Fragen (FAQ)** — Fragen & Antworten
* **Update-Leitfaden** — Schritt für Schritt zum Update
* **ThemeWare® Utilities** — führt direkt in den [Utilities-Tab](/zusatzfunktionen/hub/utilities)

## Kontakt & Feedback

* **Ticket erstellen** — individuelle Hilfe (öffnet ein Auswahl-Modal mit Chat oder Ticket im Shopware-Account)
* **Beschwerde** — Anliegen offiziell melden
* **Verbesserungsvorschlag** — Vorschläge & Feature-Requests
* **Community** — Austausch im Forum

## Services & Partnerschaft

* **Services** — individuelle Anpassungen und Auftragsarbeiten
* **Branding entfernen** — Entfernung des Footer-Hinweises beantragen
* **Partner & Agenturen** — Prioritäts-Support und Partnerprogramm

## Weiteres & Aktuelles

* **Service-Portal** — deine zentrale Anlaufstelle
* **News** — Neuigkeiten & Ankündigungen
* **Changelog** — Versionshistorie & Updates
* **Kompatibilität** — Shopware- & ThemeWare®-Versionen


# Config-Finder

Konfigurationsfelder schnell finden - im Theme-Manager, über die Suchleiste der Administration und im Browser.

Die ThemeWare® Theme-Konfiguration umfasst mehr als tausend Konfigurationsfelder. Der **Config-Finder** sorgt dafür, dass du trotzdem in Sekunden bei der richtigen Einstellung landest.

Er steht dir an drei Stellen zur Verfügung:

* **Im Theme-Manager** — filtert die Konfiguration live, während du tippst
* **In der Suchleiste der Administration** — findet Konfigurationsfelder von jeder Stelle der Administration aus
* **Im Browser** — die Feldsuchmaschine unter [config.themeware.design](https://config.themeware.design/) zum Nachschlagen

{% hint style="info" %}
**Hinweis**: Der Config-Finder in der Administration gehört zu den ThemeWare® Anpassungen der Administration und steht daher nur in der **Pro-Edition** zur Verfügung.
{% endhint %}

***

## Suche in der Theme-Konfiguration

Den Config-Finder öffnest du über den Button **"Config-Finder"** oben rechts im Theme-Manager. Auf schmalen Bildschirmen zeigt der Button nur die Lupe.

**Schritt für Schritt:**

1. Öffne die Theme-Konfiguration deines ThemeWare® Themes.
2. Klicke oben rechts auf den Button "**Config-Finder**".
3. Tippe ein, wonach du suchst – zum Beispiel "`usp hintergrundfarbe`". (1)
4. Wechsle in einen Tab mit Treffern und nimm deine Einstellung direkt vor. (2, 3)

<figure><img src="/files/9ASXUEf3zDZrBnqsPXoz" alt=""><figcaption></figcaption></figure>

Sobald du zwei Zeichen eingegeben hast, filtert der Theme-Manager die Konfiguration:

* **Konfigurationsfelder ohne Treffer werden ausgeblendet.** Es bleiben nur die Felder stehen, die zu deinem Suchbegriff gehören.
* **Bereiche und Abschnitte ohne Treffer verschwinden** ebenfalls, sodass keine leeren Karten übrig bleiben.
* **Alle verbleibenden Bereiche sind aufgeklappt.** Du musst also nichts erst öffnen, um einen Treffer zu sehen.
* **Tabs ohne Treffer verschwinden aus der Tab-Leiste.** Hinter den übrigen Tabs steht die Anzahl der Treffer, zum Beispiel "Header (14)".
* **Der Willkommens-Bereich und die Theme-Informationen blenden sich aus**, damit die Treffer oben stehen.

Die Gesamtzahl der Treffer siehst du rechts im Suchfeld. Beendet wird die Suche über das Kreuz im Suchfeld; solange der Cursor im Suchfeld steht, tut die Taste **"Esc"** dasselbe. Danach ist die Konfiguration wieder vollständig sichtbar, und ein eventuell gesetzter Suchbegriff verschwindet auch aus der Adresszeile.

### Wonach gesucht wird

| Suchziel                                 | Bedeutung                                                                                                                                                                            |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Bezeichnung des Konfigurationsfeldes** | Der Text, den du in der Konfiguration siehst – in der Sprache deiner Administration                                                                                                  |
| **Technischer Name**                     | Zum Beispiel `twt-header-type`. Praktisch, wenn eine Anleitung, ein Changelog oder eine Support-Antwort den technischen Namen nennt                                                  |
| **Überschrift eines Bereichs**           | Ein Treffer auf einer Bereichs-Überschrift zeigt den kompletten Bereich mit allen Konfigurationsfeldern – "Header" führt dich damit zum ganzen Bereich statt zu einem einzelnen Feld |

Gibst du mehrere Wörter ein, müssen **alle** davon passen. So grenzt du das Ergebnis Schritt für Schritt ein: "`usp`" zeigt alles zur USP-Bar, "`usp farbe`" deutlich weniger, "`usp farbe hintergrund`" nur noch die Hintergrundfarben. Die Reihenfolge der Wörter spielt dabei keine Rolle.

Gesucht wird immer nach enthaltenen Zeichenfolgen. "`bild`" findet daher auch "Bilder" und "Bildausschnitt", umgekehrt funktioniert es nicht – nimm im Zweifel den kürzeren Wortstamm.

### Keine Treffer

Liegt kein Treffer im gerade geöffneten Tab, tritt an dessen Stelle die Trefferzahl mit einer kurzen Wegbeschreibung: "14 Treffer gefunden – du findest sie in den Tabs oben, jeweils mit ihrer Trefferzahl." In der Tab-Leiste stehen dann nur noch die Tabs mit Treffern.

Findet die Suche im gesamten Theme nichts, bleibt die Tab-Leiste unverändert und du bekommst den Hinweis "Keine Treffer" – so stehst du nie vor einer leeren Oberfläche.

***

## Suche über die Suchleiste der Administration

Du musst den Theme-Manager nicht geöffnet haben, um ein Konfigurationsfeld zu suchen. In der Suchleiste der Administration steht dafür der eigene Suchtyp **"ThemeWare®"** bereit.

**Schritt für Schritt:**

1. Klicke oben in der Suchleiste der Administration auf die Typ-Auswahl links im Suchfeld (voreingestellt ist "Alle").
2. Wähle in der Liste den Suchtyp "**ThemeWare®**".
   * Alternativ tippst du `#` in die Suchleiste, gefolgt von einem Teil des Namens – zum Beispiel `#themeware`.
3. Gib deinen Suchbegriff ein.
4. Die Treffer erscheinen mit ihrem vollständigen Pfad: Theme, Tab und Bereich.
5. Ein Klick auf einen Treffer öffnet den Theme-Manager des passenden Themes – die Suche ist dort bereits gesetzt.

<figure><img src="/files/eieCXqNq1BGjLtTVORZR" alt=""><figcaption></figcaption></figure>

Diese Suche berücksichtigt **alle installierten ThemeWare® Themes**. Der Theme-Name in der Trefferzeile zeigt dir, zu welchem Theme ein Konfigurationsfeld gehört. Das ist besonders dann hilfreich, wenn du mehrere ThemeWare® Themes oder Duplikate im Einsatz hast.

{% hint style="info" %}
**Hinweis**: Der Config-Finder ist bewusst **nicht** Teil der allgemeinen Suche ("Alle") in der Suchleiste. Ein breiter Suchbegriff wie "Header" liefert schnell dreistellig viele Konfigurationsfelder – die würden deine Produkte, Bestellungen und Kunden in der Trefferliste verdrängen. Du erreichst ihn deshalb nur über die gezielte Auswahl des Suchtyps.
{% endhint %}

***

## Config-Finder im Browser

Unabhängig von deiner Administration gibt es den Config-Finder weiterhin als Feldsuchmaschine im Browser. Sie eignet sich vor allem zum Nachschlagen, denn sie zeigt zu jedem Konfigurationsfeld zusätzlich den technischen Namen, den Pfad zur Einstellung, einen Beispielwert und den Hilfe-Text.

{% embed url="<https://config.themeware.design/>" %}
ThemeWare® Config-Finder
{% endembed %}

***

{% hint style="success" %}
**Tipp**: Eine schrittweise Anleitung zur Suche im Theme-Manager findest du in unserer [ThemeWare® Wissensdatenbank](https://wiki.themeware.design/wissensdatenbank/einfuehrung/konfiguration-finden).
{% endhint %}


# CMS-Erweiterungen

Mit ThemeWare® 0.5.0 haben wir unser großes CMS-Update und damit unsere ersten **ThemeWare® CMS-Erweiterungen** veröffentlicht. Alle CMS-Erweiterungen wurden mit dem Schwerpunkt Verkaufsförderung und Anpassbarkeit ausgewählt und entwickelt. Die vielen Layout-Möglichkeiten sprechen für sich.

Wir haben extrem viel Herzblut in jede einzelne CMS-Erweiterung gesteckt und sind auf diese wirklich stolz. Besonders freuen wir uns daher über das positive Feedback. Vielen Dank!

{% hint style="info" %}
**Hinweis**: Die CMS-Erweiterungen in der Administration gehören zu den ThemeWare® Anpassungen der Administration und stehen daher nur in der **Pro-Edition** zur Verfügung.
{% endhint %}

Wir arbeiten, wie du es wahrscheinlich bereits von uns gewohnt bist, fleißig weiter an neuen CMS-Erweiterungen bzw. an Verbesserungen für bestehende CMS-Erweiterungen. Freu dich also noch auf viel mehr.

{% hint style="success" %}
**Tipp**: Wenn du einen Vorschlag für eine neue oder bestehende CMS-Erweiterung hast, senden uns gerne einen [Verbesserungsvorschlag](https://service.tc-innovations.de/themeware/sw6/ticket-feedback-improvement) über unser Service Portal.
{% endhint %}

## ThemeWare® CMS-Erweiterungen

In der Regel besteht eine **CMS-Erweiterung** aus einem CMS-Block und einem CMS-Element.

Ein **CMS-Block** bildet quasi den Rahmen bzw. Container für CMS-Elemente. CMS-Blöcke haben einen oder mehrere **Slots**. In jedem Slot wird ein **CMS-Element** platziert.

<div><figure><img src="/files/1ZP3C1mi7ukhPvXnYKHd" alt=""><figcaption><p>CMS-Block</p></figcaption></figure> <figure><img src="/files/AadHkqbvnqXFNNBe3c6y" alt=""><figcaption><p>CMS-Element</p></figcaption></figure> <figure><img src="/files/aaqKbYwVg5Gu3tpZqgFV" alt=""><figcaption><p>Element austauschen</p></figcaption></figure></div>

In den meisten CMS-Blöcken kannst du nahezu jedes beliebige CMS-Element platzieren. Ein Beispiel dafür sind die ThemeWare® Grid- und Spalten-Blöcke.

Es gibt aber auch CMS-Blöcke in welchen das CMS-Element nicht ausgetauscht werden kann (z.B. die ThemeWare® "Unterkategorie-Navigation") und CMS-Elemente, welche nur mit bestimmten CMS-Blöcken funktionieren (z.B. die ThemeWare® "Hero-Slider"-Elemente).

Neben universellen CMS-Blöcken gibt es auch universelle CMS-Elemente. Diese funktionieren in nahezu allen CMS-Blöcken (z.B. die ThemeWare® "Teaser"-Elemente).

Da aber nicht zu jedem CMS-Block ein CMS-Element gehören muss und umgekehrt, sprechen wir von allgemein von "CMS-Erweiterungen". Und das schöne an den ThemeWare® CMS-Erweiterungen ist: **Es sind keine weiteren Plugins oder Apps nötig**! Du erhältst alles direkt mit deinem ThemeWare® Theme.

{% hint style="info" %}
**Hinweis**: Aufgrund von technischen Limitationen im App-System von Shopware gibt es die meisten CMS-Erweiterungen derzeit nur in der **Pro-Edition**.
{% endhint %}

***

## Mehrsprachigkeit

Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.

![Erlebniswelt: Sprache wechseln](/files/2e0f8UKAkKZNGAXn9PIO)

***

## Installation/Updates/Deinstallation

> Stand: Shopware 6.5.x

#### **Installation**

* Die CMS-Blöcke bzw. CMS-Element erhältst du mit entsprechenden ThemeWare®-Updates. Es gibt keine spezielle Update-/Installationsroutine in ThemeWare® – Shopware 6 regelt dies automatisch.
* Sollten die CMS-Blöcke bzw. CMS-Elemente nicht im Erlebniswelt-Editor erscheinen, leere bitte einmal den Shopware- sowie die Browser-Cache vollständig. Hilft dies nicht, deaktiviere (nicht deinstallieren!) ThemeWare® einmal und aktiviere es danach wieder.
* Grundsätzlich werden die CMS-Blöcke bzw. CMS-Elemente beim Aktivieren von Themes hinzugefügt bzw. werden beim Deaktivieren wieder aus der Administration entfernt.

#### **Updates**

* Bei Theme-Updates aktualisieren sich die CMS-Blöcke bzw. CMS-Elemente ggf. automatisch.

#### **Deaktivieren**

* Das Deaktivieren von Themes entfernt lediglich die CMS-Blöcke bzw. CMS-Elemente aus der Erlebniswelt, aber nicht aus der Datenbank.

#### **Deinstallation**

* Die Deinstallation von Themes löscht derzeit keine Daten von CMS-Blöcken bzw. CMS-Elementen aus der Datenbank. Auch die Option "Alle App-Daten endgültig entfernen" hat derzeit keinen Einfluss.
* **Wichtig**: CMS-Blöcke bzw. CMS-Elemente sollten vor dem "Deaktivieren" von ThemeWare® aus allen CMS-Seiten entfernt werden damit sie nicht "leer" in der Storefront dargestellt werden!

{% hint style="info" %}
**Hinweis**: Nutzt du mehr als ein ThemeWare®-Theme in deinem Shop, gibt es jeden CMS-Block bzw. jedes CMS-Element nur einmal in der Administration auch wenn diese mehrfach angezeigt werden. Die Blöcke bzw. Elemente funktionieren dann solange, bis du das letzte ThemeWare®-Theme deaktivierst.
{% endhint %}

***

## Weiterführende Informationen

Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" findest du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/grundwissen/erlebniswelten>" %}
ThemeWare® Wissensdatenbank => Erlebniswelten
{% endembed %}


# CMS-Blöcke

In diesem Bereich findest du alles über die **ThemeWare® CMS-Blöcke** welche du in den "Block-Kategorien" auswählen und deiner Erlebniswelt hinzufügen kannst.

## ThemeWare® CMS-Blöcke

Mit ThemeWare® erhältst du eine umfangreiche und wachsende Auswahl an CMS-Blöcken um deinen Shop zu individualisieren. Die ThemeWare® CMS-Blöcke sind ab Version 0.5.0 in der **Pro-Edition** und teilweise in der **Cloud-Edition** verfügbar.

Weitere CMS-Blöcke sind sowohl für die Pro-Edition als auch für die Cloud-Edition in Arbeit und folgen mit kommenden Updates. Sei gespannt!

{% hint style="success" %}
**Tipp**: Wenn du weitere Ideen oder Wünsche zu bestehenden oder neuen Blöcken hast, sende uns gerne [Verbesserungsvorschläge](https://service.themeware.design/verbesserungsvorschlag) über unser Service Portal.
{% endhint %}

***

## ThemeWare® CMS-Block hinzufügen

1. Klicke auf das Plus-Icon um einen CMS-Block auszuwählen.
2. Wähle im Dropdown "Block-Kategorie" den gewünschten CMS-Block aus.
3. Ziehe den CMS-Block per Drag'n'Drop in deine Erlebniswelt.

![ThemeWare® CMS-Block hinzufügen](/files/l7BtBTjPKBm454pXaEf5)

### **Pro-Edition**

In der ThemeWare® Pro-Edition haben die ThemeWare® CMS-Blöcke eigene Kategorien und sind nach dem folgenden Muster gegliedert:

* **ThemeWare® Allgemein**
  * Enthält grundlegende Gestaltungsblöcke wir Slider, Teaser und Banner.
* **ThemeWare® Spalten**
  * Enthält Spalten-Blöcke die beliebig befüllt werden können.
* **ThemeWare® Grids**
  * Enthält Grid-Blöcke die mit Bildelementen befüllt werden können.
* **ThemeWare® Kategorieseite**
  * Enthält CMS-Blöcke für Kategorieseiten.
* **ThemeWare® Produktseite**
  * Enthält CMS-Blöcke für Produktseiten.
* **ThemeWare® Sidebar**
  * Enthält CMS-Blöcke für die Sidebar.
* **ThemeWare® Verschiedenes**
  * Enthält weitere seitenübergreifende CMS-Blöcke.

<figure><img src="/files/AFEzOr4H6weLNQTfAnmK" alt="" width="336"><figcaption><p>ThemeWare® Pro-Edition</p></figcaption></figure>

### **Cloud-Edition**

In der ThemeWare® Cloud-Edition findest du die ThemeWare® CMS-Blöcke in den Standard-Kategorien von Shopware (siehe "Text & Bild").

![ThemeWare® Cloud-Edition](/files/f96zG8zz0onDADkBHbId)

***

## Block-Einstellungen

Die CMS-Blöcke in Shopware 6 verfügen über verschiedene Konfigurationsfelder. Im Abschnitt "Layout" findest du beispielsweise die Möglichkeit "CSS-Klassen" zu ergänzen und das Padding des Blocks zu definieren.

<figure><img src="/files/Fx69wEPCH8KPHtJN4aLA" alt="" width="347"><figcaption><p>Block-Einstellungen</p></figcaption></figure>

### CSS-Klassen

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren. ThemeWare® bietet dir eine Reihe von CSS-Klassen, die du in deinen Erlebniswelten nutzen kannst.

Für alle CMS-Blöcke sind folgende CSS-Klassen interessant:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/css-abstandsklassen-fuer-erlebniswelten>" %}
ThemeWare® Wissensdatenbank => CSS-Abstandsklassen für Erlebniswelten
{% endembed %}

Weitere Klassen findest du im Bereich "Anleitungen > Erlebniswelten" in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten>" %}
ThemeWare® Wissensdatenbank => Erlebniswelten
{% endembed %}

***

## CMS-Block individuell stylen

Du kannst einen bestimmten CMS-Block individuell stylen, indem du ihm in den Block-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst.

***

## CMS-Element austauschen

Du kannst die CMS-Elemente in den meisten CMS-Blöcken austauschen. Mehr dazu erfährst du im Bereich [CMS-Elemente](/zusatzfunktionen/cms-erweiterungen/cms-elemente).

***

## Weiterführende Informationen

Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Blöcken" findest du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/grundwissen/erlebniswelten/cms-block>" %}
ThemeWare® Wissensdatenbank
{% endembed %}


# Block-Konfiguration

ThemeWare® erweitert ausgewählte CMS-Blöcke um eine **Block-Konfiguration** in der CMS-Sidebar (2). Die Block-Konfiguration ermöglicht es dir, das responsive Verhalten deiner CMS-Blöcke komfortabel zu steuern - ohne CSS-Klassen manuell eingeben zu müssen.

<figure><img src="/files/evxZwTEr3BkV2KfVTzcZ" alt=""><figcaption></figcaption></figure>

Die Konfiguration gliedert sich in zwei Bereiche: das **Responsive Block-Layout** (3 – Spaltenabstand und Ausrichtung) und das **Responsive Spalten-Layout** (4 – Spaltenanordnung, Sichtbarkeit und Experten-Modus).

{% hint style="success" %}
Dies ist die erste Iteration dieser Funktion. Wir haben bereits weitere Ideen für zusätzliche Konfigurationen, möchten uns zunächst aber auf dein Feedback zur aktuellen Umsetzung konzentrieren.

**Tipp:** Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das **ThemeWare Service Portal:**

* [Verbesserungsvorschlag (Feature-Request)](https://service.themeware.design/verbesserungsvorschlag)
  {% endhint %}

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

***

## Responsive Block-Layout

Im Bereich "Responsive Block-Layout" (3) konfigurierst du den Spaltenabstand (Gutter) und die Ausrichtung der Spalten innerhalb des Blocks.

> **Spaltenabstand (Gutter)**
>
> Legt den horizontalen und vertikalen Abstand zwischen den Spalten fest. Du kannst aus verschiedenen vordefinierten Abstandswerten oder "Standard" wählen.
>
> **Ausrichtung**
>
> Wähle die horizontale Ausrichtung der Spalten innerhalb der Zeile:
>
> * **Standard (links)** - Standardausrichtung
> * **Zentriert** - Spalten werden zentriert
> * **Rechts** - Spalten werden rechtsbündig ausgerichtet
> * **Gleichverteilt (between)** - Gleichmäßiger Abstand zwischen den Spalten
> * **Gleichverteilt (around)** - Gleichmäßiger Abstand um die Spalten
> * **Gleichverteilt (evenly)** - Vollständig gleichmäßig verteilter Abstand

### Erweiterte Konfiguration

Mit dem Schalter "Erweiterte Konfiguration" kannst du Gutter und Ausrichtung für jeden Viewport einzeln konfigurieren. Folgende Viewports stehen zur Verfügung:

* **Desktop Groß** (≥1200px)
* **Desktop** (≥992px)
* **Tablet** (≥768px)
* **Mobil Querformat** (≥576px)
* **Mobil Hochformat** (<576px)

{% hint style="info" %}
**Hinweis**: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.
{% endhint %}

***

## Responsive Spalten-Layout

Im Bereich "Responsive Spalten-Layout"(4) konfigurierst du die Spaltenanordnung und Sichtbarkeit der einzelnen Spalten.

> **Spaltenanordnung**
>
> Legt fest, wie viele Spalten in einem bestimmten Viewport nebeneinander statt untereinander dargestellt werden. So kannst du z.B. auf einem Tablet drei Spalten auf zwei reduzieren.
>
> **Sichtbarkeit**
>
> Steuert, ob eine Spalte in einem bestimmten Viewport sichtbar oder ausgeblendet ist.
>
> **Asymmetrisch ab**
>
> Nur verfügbar bei asymmetrischen Spalten-Blöcken (z.B. Zwei Spalten 3-9, Drei Spalten 3-3-6). Legt fest, ab welchem Viewport die Spalten in der vordefinierten asymmetrischen Aufteilung des Blocks dargestellt werden. Unterhalb dieses Viewports werden die Spalten gleichmäßig oder untereinander angeordnet.
>
> **Experten-Modus**
>
> Ermöglicht die manuelle Eingabe von CSS-Klassen pro Spalte (z.B. `col-12 col-md-6`). Der Experten-Modus überschreibt die Spaltenanordnung und die Sichtbarkeits-Konfiguration.

### Erweiterte Konfiguration

Mit dem Schalter "Erweiterte Konfiguration" kannst du Spaltenanordnung und Sichtbarkeit für jeden Viewport einzeln festlegen.

{% hint style="info" %}
**Hinweis**: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.
{% endhint %}

***

## Unterstützte Blöcke

Nicht alle CMS-Blöcke unterstützen alle Bereiche der Block-Konfiguration. Die folgende Übersicht zeigt, welche Block-Typen welche Konfigurationsbereiche bieten:

### Spalten-Blöcke (symmetrisch)

Symmetrische Spalten-Blöcke wie "Zwei Spalten", "Drei Spalten", "Vier Spalten" und "Sechs Spalten" unterstützen:

* Responsive Block-Layout (Gutter + Ausrichtung)
* Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit)

### Asymmetrische Spalten-Blöcke

Asymmetrische Spalten-Blöcke wie "Zwei Spalten 3-9", "Zwei Spalten 4-8", "Drei Spalten 3-3-6" usw. unterstützen:

* Responsive Block-Layout (Gutter + Ausrichtung)
* Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit + Asymmetrisch ab)

### Grid-Blöcke

Grid-Blöcke wie "Grid One", "Grid Two", "Grid Modern" usw. unterstützen:

* Responsive Block-Layout (nur Gutter, keine Ausrichtung)

### Eine Spalte

Der Block "Eine Spalte" unterstützt:

* Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit, kein Gutter, keine Ausrichtung)

{% hint style="success" %}
**Tipp:** Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das **ThemeWare Service Portal:**

* [Verbesserungsvorschlag (Feature-Request)](https://service.themeware.design/verbesserungsvorschlag)
  {% endhint %}


# Hero-Slider

Die **ThemeWare® "Hero-Slider"-Blöcke** sind CMS-Blöcke die mit den entsprechenden Slider CMS-Elementen befüllt werden müssen. Andere CMS-Elemente funktionieren nicht im Hero-Slider.

Die Slider-Blöcke haben daher spezielle CMS-Elemente.

***

## Verfügbare "Hero-Slider"-Blöcke

* [Hero-Slider (2x)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider/hero-slider-2x)
* [Hero-Slider (3x)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider/hero-slider-3x)
* [Hero-Slider (4x)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider/hero-slider-2x-1)

***

## "Hero-Slider"-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Den "Hero-Slider" findest du in der Rubrik "ThemeWare® Allgemein" \[Pro]

!["Hero-Slider" CMS-Block hinzufügen](/files/6W7VPZhMs5HSZZ2J1f0Q)

***

## Autoplay und Barrierefreiheit

Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Du kannst diese Funktion über die Theme-Konfiguration aktivieren.

{% hint style="danger" %}
**Bedenken hinsichtlich der Barrierefreiheit**: Das Aktivieren dieser Funktion kann dazu führen, dass Teile Deiner Storefront für Menschen mit Einschränkungen nicht zugänglich sind. Dies kann eine Nichteinhaltung der in Deiner Gerichtsbarkeit geltenden Barrierefreiheitsgesetze darstellen (z.B. des Europäischen Rechtsakts zur Barrierefreiheit).

**Bitte beachte**: Mit dem Aktivieren erkennst du dieses Risiko an und übernimmst die volle Verantwortung.
{% endhint %}

***

## CSS-Klassen

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel ([Dokumentation](https://getbootstrap.com/docs/5.2/components/carousel/)) basiert, sind folgende CSS-Klassen besonders interessant:

#### Überblenden (Crossfade)

Füge die CSS-Klasse `carousel-fade` dem Block hinzu, um Slides mit einem Fade-Übergang anstelle eines Slides zu animieren.

#### Dunkle Bedienelemente (Controls)

Füge die CSS-Klasse `carousel-dark` dem Block hinzu, um Steuerelemente dunkler zu gestalten.

#### Flache Bedienelemente (Controls)

Für eine optimale Sichtbarkeit haben die Bedienelemente vom "Hero-Slider" einen Schlagschatten. Dies hilft besonders, wenn die Farbigkeit der Bilder im Slider stark variiert. Möchtest du diese Schlagschatten nicht, füge dem entsprechenden Block einfach die CSS-Klasse `flat-controls` hinzu.

***

## Demos

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Hero-Slider (2x)

Der ThemeWare® CMS-Block "**Hero-Slider (2x)**" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (2x)" bietet dir die Möglichkeit 2 Slides zu nutzen – nicht mehr und nicht weniger.

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

***

## Verfügbare CMS-Elemente

* [Call-to-Action-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/call-to-action-hero-slider)
* [Text-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/text-hero-slider)
* [Image-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/image-slide-hero-slider)

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Hero-Slider (3x)

Der ThemeWare® CMS-Block "**Hero-Slider (3x)**" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (3x)" bietet dir die Möglichkeit 3 Slides zu nutzen – nicht mehr und nicht weniger.

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

***

## Verfügbare CMS-Elemente

* [Call-to-Action-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/call-to-action-hero-slider)
* [Text-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/text-hero-slider)
* [Image-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/image-slide-hero-slider)

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Hero-Slider (4x)

Der ThemeWare® CMS-Block "**Hero-Slider (4x)**" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (4x)" bietet dir die Möglichkeit 4 Slides zu nutzen – nicht mehr und nicht weniger.

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

***

## Verfügbare CMS-Elemente

* [Call-to-Action-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/call-to-action-hero-slider)
* [Text-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/text-hero-slider)
* [Image-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/image-slide-hero-slider)

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Teaser

Die **ThemeWare® Teaser-Blöcke** haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr Informationen zu den ThemeWare® Teaser-Elementen findest du hier: [Teaser](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/teaser)
{% endhint %}

***

## Verfügbare Teaser-Blöcke

* Text-Teaser
* Text-Teaser (verziert)
* Button-Teaser
* Call-to-Action
* Hover-Box
* Image-Teaser
* Hero-Teaser
* Advanced-Teaser
* Classic-Teaser
* Modern-Teaser
* Runder Teaser

{% hint style="warning" %}
**Wichtig**: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Teaser-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" \[Pro]

![Teaser CMS-Block  hinzufügen](/files/Df6at8opXUq3UP1zPsrr)

***

## CSS-Klassen

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Für die ThemeWare® Teaser-Blöcke sind folgende CSS-Klassen besonders interessant:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern>" %}
ThemeWare® Wissensdatenbank => Bilder in CMS-Blöcken verschönern
{% endembed %}


# Banner

Die **ThemeWare® Banner-Blöcke** selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® Banner-Elementen findest du hier: [Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/banner)
{% endhint %}

***

## Verfügbare Banner-Blöcke

* Image-Banner
* Parallax-Banner
* Hero-Banner
* Advanced-Banner

{% hint style="warning" %}
**Wichtig**: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Banner-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Banner-Blöcke findest du in der Rubrik "ThemeWare® Banner" \[Pro]

<figure><img src="/files/rOiSEqrPWWVkolopiSJT" alt=""><figcaption><p>Banner CMS-Block hinzufügen</p></figcaption></figure>


# Spalten

Die **ThemeWare® Spalten-Blöcke** sind universelle CMS-Blöcke. In diesen Blöcken kannst du verschiedene CMS-Elemente platzieren.

Die Spalten-Blöcke haben daher keine speziellen CMS-Elemente.

***

## Verfügbare Spalten-Blöcke

* [Eine Spalte](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/eine-spalte)
* [Zwei Spalten](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten)
* [Zwei Spalten (auf Handys getauscht)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-auf-handys-getauscht)
* [Zwei Spalten, 3-9](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-3-9)
* [Zwei Spalten, 4-8](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-4-8)
* [Zwei Spalten, 5-7](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-5-7)
* [Zwei Spalten, 7-5](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-7-5)
* [Zwei Spalten, 8-4](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-8-4)
* [Zwei Spalten, 9-3](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten-9-3)
* [Drei Spalten](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten)
* [Drei Spalten, 2-2-8](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten-2-2-8)
* [Drei Spalten, 2-8-2](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten-2-8-2)
* [Drei Spalten, 3-3-6](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten-3-3-6)
* [Drei Spalten, 3-6-3](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten-3-6-3)
* [Drei Spalten, 6-3-3](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten-6-3-3)
* [Drei Spalten, 8-2-2](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/drei-spalten-8-2-2)
* [Vier Spalten](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/vier-spalten)
* [Fünf Spalten](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/fuenf-spalten)
* [Sechs Spalten](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/sechs-spalten)

***

## Spalten-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Spalten" \[Pro] bzw. in der Rubrik "Text & Bild" \[Cloud]

![Pro Edition](/files/FeYxAgQ9VYHAd7aDknq9) ![Cloud Edition](/files/8omnZrwa6jscqdzXUAkH)

***

## Elemente austauschen

Die ThemeWare® Spalten-Blöcke sind mit Platzhalter-Elementen befüllt. Du kannst diese Elemente durch beliebige CMS-Elemente austauschen:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Klicke auf das gewünschte Platzhalter-Element (2) um ein neues CMS-Element auszuwählen
3. Es öffnet sich das Pop-up "Element auswählen"
4. Wähle das gewünschte CMS-Element aus (3)

Du hast nun das CMS-Element ausgetauscht.

<div><figure><img src="/files/Q84KhQdcaozGWjGQjz16" alt=""><figcaption><p>ThemeWare® Spalten-Blöcke: Element austauschen</p></figcaption></figure> <figure><img src="/files/YGjhISIeb9cnWQ7ohgi9" alt=""><figcaption></figcaption></figure></div>

***

## Bildgrößen

Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.

Wir empfehlen daher für Bild-Elemente in Spalten-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Alternativ funktioniert auch der Darstellungsmodus "Strecken" recht gut, wenn alle Bilder einer Spalte die selbe Größe/Proportion haben.

***

## CSS-Klassen

In den Block-Einstellungen hast du die Möglichkeit CSS-Klasssen für den entsprechenden CMS-Block zu definieren.

Für die ThemeWare® Spalten-Blöcke sind folgende CSS-Klassen besonders interessant:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen>" %}
ThemeWare® Wissensdatenbank => Spaltenabstände in CMS-Blöcken anpassen
{% endembed %}

***

## Demos

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Eine Spalte

Der ThemeWare® CMS-Block "**Eine Spalte**" (100%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/0ns7VYBqk9mEYCEFJHIN" alt=""><figcaption><p>ThemeWare® CMS-Block "Eine Spalte" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/qMsbJ6Lwg5wdUx0UzNMy" alt=""><figcaption><p>ThemeWare® CMS-Block "Eine Spalte"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten

Der ThemeWare® CMS-Block "**Zwei Spalten**" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/jyvx6fzHqMHcOpGTqtWm" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/0Ff8k6fJrnmjUitEx3W6" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten (auf Handys getauscht)

Der ThemeWare® CMS-Block "**Zwei Spalten (auf Handys getauscht)**" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/jyvx6fzHqMHcOpGTqtWm" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)" [Pro]</p></figcaption></figure>

Der CMS-Block "Zwei Spalten (auf Handys getauscht)" ist eine Variante vom CMS-Block "Zwei Spalten" (siehe [Zwei Spalten](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten/zwei-spalten)). Hier unterscheidet sich lediglich die Anordnung der beiden Spalten in mobilen Viewports. In dieser Variante wird die zweite Spalte oberhalb der ersten Spalte angeordnet und nicht darunter.

## Beispiel

<figure><img src="/files/rFDAIBlWPTzi0zKBvAWl" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)"</p></figcaption></figure>

<figure><img src="/files/DQbfZLLh7uiXbnBPfdPB" alt=""><figcaption><p>Links: "Zwei Spalten" | Rechts: "Zwei Spalten (auf Handys getauscht)"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten, 3-9

Der ThemeWare® CMS-Block "**Zwei Spalten, 3-9**" (25% | 75%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/NXYJugRF4Sm0kmwsGg5Z" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 3-9" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/rTJWRE8CcPKjpAeGHCQG" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 3-9"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten, 4-8

Der ThemeWare® CMS-Block "**Zwei Spalten, 4-8**" (ca. 33.333% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/0Qs2YPDQTcA5Ah5ovpXc" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 4-8" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/TgA4IwTiRZrkxO9o7fgA" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 4-8"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten, 5-7

Der ThemeWare® CMS-Block "**Zwei Spalten, 5-7**" (ca. 41.667% | ca. 58.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/XHP41lsrsPRdzGZ1bFgT" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 5-7" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/EVtE96Pg9sHx02ce6bcZ" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 5-7"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten, 7-5

Der ThemeWare® CMS-Block "**Zwei Spalten, 7-5**" (ca. 58.333% | ca. 41.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/Mxld5pP9L5L4qJsGWkk5" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 7-5" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/GJKgMHFzjtg2DIpsqnDj" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 7-5"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten, 8-4

Der ThemeWare® CMS-Block "**Zwei Spalten, 8-4**" (ca. 66.667% | ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/MRijB2gD8WCOhRCDMGlJ" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 8-4" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/zjrn7BfAfWs4mUwdbRfM" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 8-4"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Zwei Spalten, 9-3

Der ThemeWare® CMS-Block "**Zwei Spalten, 9-3**" (75% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/hKyu3PfDDgkavhUZSHBS" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 9-3" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/pF9PMjBLsy7DMxc4oltj" alt=""><figcaption><p>ThemeWare® CMS-Block "Zwei Spalten, 9-3"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten

Der ThemeWare® CMS-Block "**Drei Spalten**" (jeweils ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/DqNH0MhZW5JJoFfhaaCU" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/clLUPg8tjtE6t70bL1TW" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten, 2-2-8

Der ThemeWare® CMS-Block "**Drei Spalten, 2-2-8**" (ca. 16.667% | ca. 16.667% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/GNg5S0BGjUvJafjBmq6g" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 2-2-8" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/06sptScxNrPdrkD6qsBx" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 2-2-8"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten, 2-8-2

Der ThemeWare® CMS-Block "**Drei Spalten, 2-8-2**" (ca. 16.667% | ca. 66.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/lqSegsMJvn9K7vSO69iV" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 2-8-2" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/loSJGfqUov7gSj5nNwn6" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 2-8-2"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten, 3-3-6

Der ThemeWare® CMS-Block "**Drei Spalten, 3-3-6**" (25% | 25% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/eU16rDVXwTaBbPYlECwJ" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 3-3-6" [Pro}</p></figcaption></figure>

## Beispiel

<figure><img src="/files/FkBp9dhhwSacvIJmE8ig" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 3-3-6"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten, 3-6-3

Der ThemeWare® CMS-Block "**Drei Spalten, 3-6-3**" (25% | 50% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/30sEzsDzsXUezkN9JXAo" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 3-6-3" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/KgP5KSZkjEIY9RUOXbTx" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 3-6-3"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten, 6-3-3

Der ThemeWare® CMS-Block "**Drei Spalten, 6-3-3**" (50% | 25% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/jwFvoS8LnHsospl4ieET" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 6-3-3" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/6wUnc553n2BaF5K9r8f6" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 6-3-3"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Drei Spalten, 8-2-2

Der ThemeWare® CMS-Block "**Drei Spalten, 8-2-2**" (ca. 66.667% | ca. 16.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/5HUbdWJy7Es3SxkngL65" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 8-2-2" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/R4fkX0ElyWRQ4maSBMZN" alt=""><figcaption><p>ThemeWare® CMS-Block "Drei Spalten, 8-2-2"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Vier Spalten

Der ThemeWare® CMS-Block "**Vier Spalten**" (jeweils 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/UQrjaXxbZCn4coQp5YhX" alt=""><figcaption><p>ThemeWare® CMS-Block "Vier Spalten" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/l9SGjFqJL4r9jIdGTVuw" alt=""><figcaption><p>ThemeWare® CMS-Block "Vier Spalten"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Fünf Spalten

Der ThemeWare® CMS-Block "**Fünf Spalten**" (jeweils 20%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/P601ug4VkLIALdJVBC6m" alt=""><figcaption><p>ThemeWare® CMS-Block "Fünf Spalten" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/Npy2hWnaZAfqLQId7WqG" alt=""><figcaption><p>ThemeWare® CMS-Block "Fünf Spalten"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Sechs Spalten

Der ThemeWare® CMS-Block "**Sechs Spalten**" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/YDXLhJw3ejrE9syMkq2c" alt=""><figcaption><p>ThemeWare® CMS-Block "Sechs Spalten" [Pro]</p></figcaption></figure>

## Beispiel

<figure><img src="/files/kVuaLPF9GhRXNvRFzUXV" alt=""><figcaption><p>ThemeWare® CMS-Block "Sechs Spalten"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Spalten-Bloecke/>" %}
ThemeWare® Demoshop => Spalten-Blöcke
{% endembed %}


# Sechs Spalten (Individuell)

Der ThemeWare® CMS-Block "**Sechs Spalten (Individuell)**" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/9kjflIZ78aXWwPfVgCQo" alt=""><figcaption><p>ThemeWare® CMS-Block "Sechs Spalten (Individuell)" [Pro]</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Dieser Block **richtet sich an Experten** die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen und mit diesem Block umfangreiche individuelle Anpassungen umgehen können.
{% endhint %}

{% hint style="warning" %}
**Wichtig**: Bitte beachte, dass sich dieser Block derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.
{% endhint %}

#### Individuelle Spaltenbreiten

Dieser Block kann die Experten-Konfiguration "CSS-Klasse (Spalte)" bestimmter CMS-Elemente berücksichtigen.

Mehr Informationen zu den CSS-Klassen findest du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/profiwissen/spalten-css-klassen-in-themeware-cms-elementen>" %}
ThemeWare® Wissensdatenbank
{% endembed %}

## Beispiel

<figure><img src="/files/RrGZG3BlkA2iyLqLpEu0" alt=""><figcaption><p>ThemeWare® CMS-Block "Sechs Spalten (Individuell)"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

Folgt...


# Grids

Die **ThemeWare® Grid-Blöcke** sind universelle CMS-Blöcke. In diesen Blöcken kannst du verschiedene CMS-Elemente platzieren.

Die Grid-Blöcke haben daher keine speziellen CMS-Elemente.

***

## Verfügbare Grid-Blöcke

* [Grid 'Modern'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-modern)
* [Grid 'Modern' (getauscht)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-modern-getauscht)
* [Grid 'One'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-one)
* [Grid 'One' (getauscht)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-one-getauscht)
* [Grid 'Two'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-two)
* [Grid 'Two' (swapped)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-two-swapped)
* [Grid 'Three'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-three)
* [Grid 'Three' (swapped)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-three-swapped)
* [Grid 'Four'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-four)
* [Grid 'Four' (swapped)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-four-swapped)
* [Grid 'Five'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-five)
* [Grid 'Five' (swapped)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-five-swapped)
* [Grid 'Six'](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-six)
* [Grid 'Six' (swapped)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/grids/grid-six-swapped)

***

## Grid-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Grids" \[Pro]

![Grid CMS-Block hinzufügen](/files/mmkgl0vZDQ4OIRbxFeFZ)

***

## Bildgrößen

Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.

Wir empfehlen daher für Bild-Elemente in Grid-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Die Größe der Elemente selber kannst du über die Konfiguration "Minimale Höhe" definieren, mehr Informationen dazu findest du im folgenden Abschnitt.

***

## Bild-Elemente

Als Bild-Elemente kannst du die Teaser von ThemeWare® in den Grids nutzen. (Das Bild-Element von Shopware funktioniert ebenfalls.)

Die Größe der Elemente definierst du über die Konfiguration "Minimale Höhe" im Modus "Füllen" der entsprechenden Elemente. Damit Grids gut funktionieren ist hier etwas Mathematik nötig: Die "Minimale Höhe" der Elemente auf der linken Seite sollte in Summe dieselbe Höhe haben wie die Summe der "Minimale Höhe" aller Elemente auf der rechten Seite. Addiere etwaige Lücken (Standard: `40px`) zwischen den Elementen noch dazu.

<figure><img src="/files/uWeDUcxastFHCvShJJPo" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Ohne "vertikale" und "horizontale" Ausrichtung werden die ThemeWare® Teaser auf die volle Höhe gestreckt. Dadurch kannst du für einzelne Elemente in asymmetrischen Grids (z.B. "Grid 'One'") auch von der oben genannten Rechnung abweichen und musst nicht auf eine identische Höhe beider Spalten achten.
{% endhint %}

***

## CSS-Klassen

In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Für die ThemeWare® Grid-Blöcke sind folgende CSS-Klassen für die Abstände der Elemente im Block interessant:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen>" %}
ThemeWare® Wissensdatenbank => Abstände in CMS-Blöcken anpassen
{% endembed %}

***

## Demos

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Grid-Bloecke/>" %}
ThemeWare® Demoshop => Grid-Blöcke
{% endembed %}


# Grid 'Modern'

Der ThemeWare® CMS-Block "**Grid 'Modern'**" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/aeAXbQsBEbBXrd54zkV9" alt=""><figcaption><p>ThemeWare® CMS-Block "Grid 'Modern'"</p></figcaption></figure>

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

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `300 px`.
* Die beiden großen Bild-Element haben eine minimale Höhe von `640 px`.
* Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Grid-Bloecke/>" %}
ThemeWare® Demoshop => Grid-Blöcke
{% endembed %}


# Grid 'Modern' (getauscht)

Der ThemeWare® CMS-Block "**Grid 'Modern '(getauscht)**" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/XV14hcWtuvtLruBQLVJz" alt=""><figcaption><p>ThemeWare® CMS-Block "Grid 'Modern' (getauscht)"</p></figcaption></figure>

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

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `300 px`.
* Die beiden großen Bild-Element haben eine minimale Höhe von `640 px`.
* Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}


# Grid 'One'

Der ThemeWare® CMS-Block "**Grid 'One'**" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/IJ50crffOnhBSBd7QR9p" alt=""><figcaption><p>ThemeWare® CMS-Block "Grid 'One'"</p></figcaption></figure>

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

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `320 px`.
* Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. `640 px`).
* Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. `20px`) einem Element zu addieren.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Grid-Bloecke/>" %}
ThemeWare® Demoshop => Grid-Blöcke
{% endembed %}


# Grid 'One' (getauscht)

Der ThemeWare® CMS-Block "**Grid 'One' (getauscht)**" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

<figure><img src="/files/dgnXdsrM8EEpFSMYpDOW" alt=""><figcaption><p>ThemeWare® CMS-Block "Grid 'One' (getauscht)"</p></figcaption></figure>

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

#### Standard-Einstellungen

* Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
* Die kleinen Bild-Elemente haben eine minimale Höhe von `320 px`.
* Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. `640 px`).
* Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. `20px`) einem Element zu addieren.

{% hint style="success" %}
**Tipp**: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe [Spaltenabstände in CMS-Blöcken anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)) modifizieren.
{% endhint %}

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

{% embed url="<https://demo.themeware.design/modern/Features/ThemeWare-CMS-Bloecke/Grid-Bloecke/>" %}
ThemeWare® Demoshop => Grid-Blöcke
{% endembed %}


# Grid 'Two'

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/fECArAVQN4UWfWU3Pqq3" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Two'</p></figcaption></figure>

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


# Grid 'Two' (swapped)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/RY1MpKAHgQsBr59EISIi" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Two' (swapped)</p></figcaption></figure>

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


# Grid 'Three'

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/UkMO8VMkuuToU6I7rANY" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Three'</p></figcaption></figure>

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


# Grid 'Three' (swapped)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/uhdxy0banBtsBqQLIiwJ" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Three' (swapped)</p></figcaption></figure>

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


# Grid 'Four'

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/cIm0HgCyPnx0RYkw1WAE" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Four'</p></figcaption></figure>

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


# Grid 'Four' (swapped)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/5XWKVy8wGuOMCtJSQvHo" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Four' (swapped)</p></figcaption></figure>

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


# Grid 'Five'

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/BCe4uiw1IQSA6XGjj5Kj" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Five'</p></figcaption></figure>

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


# Grid 'Five' (swapped)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/h2lcSg0fSO8MVA0XhvRh" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Five' (swapped)</p></figcaption></figure>

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


# Grid 'Six'

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/9L0WoSvxxa2oSFb4ZHka" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Six'</p></figcaption></figure>

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


# Grid 'Six' (swapped)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/ZHYq82nL7BkydscJSIYz" alt=""><figcaption><p>ThemeWare® CMS-Block Grid 'Six' (swapped)</p></figcaption></figure>

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


# Text & Bild

Die **ThemeWare® "Text & Bild"-Blöcke** selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® "Text & Bild"-Elementen findest du hier: [Text & Bild](/zusatzfunktionen/cms-erweiterungen/cms-elemente/text-und-bild)
{% endhint %}

***

## Verfügbare Blöcke

* [Bild & Text überlagernd](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/text-und-bild/bild-and-text-ueberlagernd)

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: "Text & Bild"-Blöcke findest du in der Rubrik "ThemeWare® Text & Bild" \[Pro]

<figure><img src="/files/YszI4HEerWFeiqckZn5G" alt=""><figcaption><p>"Text &#x26; Bild" CMS-Block hinzufügen</p></figcaption></figure>


# Bild & Text überlagernd

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/COOIPPK9BNGOKzS1eJyT" %}
[Bild & Text überlagernd](/zusatzfunktionen/cms-erweiterungen/cms-elemente/text-und-bild/text-und-bild-ueberlagernd)
{% endcontent-ref %}

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


# Kategorie-Teaser

Die **ThemeWare® Kategorie-Teaser-Blöcke** haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr Informationen zu den ThemeWare® Kategorie-Teaser-Elementen findest du hier: [Kategorie-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/kategorie-teaser)
{% endhint %}

***

## Verfügbare Kategorie-Teaser-Blöcke

* Kategorie-Teaser
* Kategorie-Teaser (Advanced)
* Kategorie-Teaser (Modern)

{% hint style="warning" %}
**Wichtig**: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Kategorie-Teaser-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Kategorie-Teaser-Blöcke findest du in der Rubrik "ThemeWare® Kategorie-Teaser" \[Pro]

<figure><img src="/files/i11DeYEj8zH3yqvcv5w3" alt=""><figcaption></figcaption></figure>


# Kategorieseite

Die **ThemeWare® CMS-Blöcke für Kategorieseiten** selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® Elementen für Kategorien findest du hier: [Kategorieseite](/zusatzfunktionen/cms-erweiterungen/cms-elemente/kategorieseite)
{% endhint %}

***

## Verfügbare Blöcke

* Unterkategorien im Listing
* Unterkategorien im Listing (Modern)

{% hint style="warning" %}
**Wichtig**: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Kategorieseite" \[Pro]

<figure><img src="/files/uxvCVa52GZ54EsSH7PQk" alt=""><figcaption><p>CMS-Block hinzufügen</p></figcaption></figure>


# Produktseite

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Die **ThemeWare® CMS-Blöcke für Produktseiten** haben keine spezielle Funktion. Du kannst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® Elementen für Produktseiten findest du hier: [Produktseite](/zusatzfunktionen/cms-erweiterungen/cms-elemente/produktseite)
{% endhint %}

***

## Verfügbare Blöcke

* [Produktname (ohne Hersteller-Logo)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/produktseite/produktname-ohne-hersteller-logo)
* [Galerie und Buybox (mit Produktname)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/produktseite/galerie-und-buybox-mit-produktname)
* [Galerie und Buybox (mit Produktname & Hersteller-Logo)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/produktseite/galerie-und-buybox-mit-produktname-and-hersteller-logo)
* [Produktbeschreibung und -bewertungen (Accordion)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/produktseite/produktbeschreibung-und-bewertungen-accordion)

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Produktseite" \[Pro]

<figure><img src="/files/5tVH5Qa14HLCEZYhyt64" alt=""><figcaption><p>CMS-Block hinzufügen</p></figcaption></figure>


# Produktname (ohne Hersteller-Logo)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Produktname (ohne Hersteller-Logo)**" ist eine Variante vom Shopware CMS-Block "Produktname & Hersteller-Logo" nur ohne Hersteller-Logo.

<figure><img src="/files/5fw9jBMhGg3ZQjr1MOu5" alt=""><figcaption><p>ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)"</p></figcaption></figure>

Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

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

Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

#### Beispiel

<figure><img src="/files/DQchSw8V21hajIoM0rbS" alt=""><figcaption></figcaption></figure>

***

## **Demo**

Anwendungsbeispiele findest du in unseren Demoshops:

> Demo folgt...


# Galerie und Buybox (mit Produktname)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Galerie und Buybox (mit Produktname)**" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen über der Buybox dar.

<figure><img src="/files/B5irShenPKvGWn7jAUbI" alt=""><figcaption><p>ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)"</p></figcaption></figure>

Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

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

Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

#### Beispiel

<figure><img src="/files/P5FLP53MMfKJOIi6OIaH" alt=""><figcaption></figcaption></figure>

***

## **Demo**

Anwendungsbeispiele findest du in unseren Demoshops:

> Demo folgt...


# Galerie und Buybox (mit Produktname & Hersteller-Logo)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Galerie und Buybox (mit Produktname & Hersteller-Logo)**" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen samt Hersteller-Logo über der Buybox dar.

<figure><img src="/files/vTslYuuJDA1uB9arZl6l" alt=""><figcaption><p>ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname &#x26; Hersteller-Logo)"</p></figcaption></figure>

Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

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

Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

#### Beispiel

<figure><img src="/files/Bzr6v6PTN9PMpm7HIkJY" alt=""><figcaption></figcaption></figure>

***

## **Demo**

Anwendungsbeispiele findest du in unseren Demoshops:

> Demo folgt...


# Produktbeschreibung und -bewertungen (Accordion)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

<figure><img src="/files/tQjuwXOPGyIbyviiJZYZ" alt=""><figcaption><p>ThemeWare® CMS-Block "Produktbeschreibung und -bewertungen (Accordion)"</p></figcaption></figure>

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/66wy2pNPjs5lMWsvKaS3" %}
[Produktbeschreibung und -bewertungen (Accordion)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/produktseite/produktbeschreibung-und-bewertungen-accordion)
{% endcontent-ref %}


# Sidebar

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Die **ThemeWare® CMS-Blöcke für die Sidebar**.

...

***

## Verfügbare Sidebar-Blöcke

* [Unterkategorie-Navigation (Sidebar)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/sidebar/unterkategorie-navigation-sidebar)

***

## Sidebar-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in die Sidebar-Sektion deiner Erlebniswelt.

> **Hinweis**: Sidebar-Blöcke findest du in der Rubrik "ThemeWare® Sidebar" \[Pro]

![Sidebar CMS-Block hinzufügen](/files/fPnIadeoUVOjEsBOltqq)


# Unterkategorie-Navigation (Sidebar)

Der ThemeWare® CMS-Block "**Unterkategorie-Navigation (Sidebar)**" ist eine Variante vom Shopware CMS-Block "Kategorie-Navigation".

Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

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

***

## Weiterführende Informationen

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/9YZJKxn6r6yn1y49UJJJ" %}
[Unterkategorie-Navigation](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sidebar/unterkategorie-navigation)
{% endcontent-ref %}


# Sale

Die **ThemeWare® "Sale"-CMS-Blöcke** selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

{% hint style="info" %}
**Hinweis**: Mehr zu den ThemeWare® "Sale"-Elementen findest du hier: [Sale](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale)
{% endhint %}

***

## Verfügbare "Sale"-Blöcke

* [Hero-Countdown](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/sale/hero-countdown)
* [Countdown-Banner](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/sale/countdown-banner)
* [Countdown-Banner (kompakt)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/sale/countdown-banner-kompakt)
* [Discount-Banner](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/sale/discount-banner)

***

## "Sale"-Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: "Sale"-CMS-Blöcke findest du in der Rubrik "ThemeWare® Sale" \[Pro]

<figure><img src="/files/m5kPfD4DjrcHJj2K3ASd" alt=""><figcaption><p>"Sale" CMS-Block hinzufügen</p></figcaption></figure>


# Hero-Countdown

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Hero-Countdown**" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

<figure><img src="/files/vckR8IJ0ZcbzrVNdke6K" alt=""><figcaption><p>ThemeWare® "Hero-Countdown"</p></figcaption></figure>

Der CMS-Block "**Hero-Countdown**" besteht aus zwei CMS-Elementen:

1. [Hero-Countdown (Überschrift)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/hero-countdown)
2. [Countdown-Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner)

...

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

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# Countdown-Banner

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Countdown-Banner**" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

<figure><img src="/files/3QcFuZxtuMEpkYIv2M2w" alt=""><figcaption><p>ThemeWare® "Countdown-Banner"</p></figcaption></figure>

...

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/mwlzxSm8CbZrqnwBHwkM" %}
[Countdown-Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner)
{% endcontent-ref %}

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# Countdown-Banner (kompakt)

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Countdown-Banner (kompakt)**" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

<figure><img src="/files/HoB1CzDFFL0QVw94hJXI" alt=""><figcaption><p>ThemeWare® "Countdown-Banner (kompakt)"</p></figcaption></figure>

...

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/PGxMvd2Sq9QqjmdUBBJl" %}
[Countdown-Banner (kompakt)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/countdown-banner-kompakt)
{% endcontent-ref %}

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# Discount-Banner

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Discount-Banner**" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

<figure><img src="/files/00nkGAwVFHSiAd9Vqwnx" alt=""><figcaption><p>ThemeWare® "Discount-Banner"</p></figcaption></figure>

...

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/bGRZUFvCotpSxqQxeZb8" %}
[Discount-Banner](/zusatzfunktionen/cms-erweiterungen/cms-elemente/sale/discount-banner)
{% endcontent-ref %}

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# Verschiedenes

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Weitere ThemeWare® CMS-Blöcke.

...

***

## Verfügbare Blöcke

* [Breadcrumb-Navigation](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/verschiedenes/breadcrumb-navigation)
* [Testimonial (Kundenrezension)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/verschiedenes/testimonial-kundenrezension)
* [Testimonials (Vier Spalten)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/verschiedenes/testimonials-vier-spalten)
* [Individueller Code (HTML/CSS/JS)](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/verschiedenes/individueller-code-html-css-js)


# Breadcrumb-Navigation

{% hint style="info" %}
**Hinweis**: Dieser Artikel ist in Arbeit.
{% endhint %}

Der ThemeWare® CMS-Block "**Breadcrumb-Navigation**" ist eine Variante vom Shopware CMS-Block "Breadcrumb-Navigation".

Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/iODF8FddattTq2iPlBbD" %}
[Breadcrumb-Navigation](/zusatzfunktionen/cms-erweiterungen/cms-elemente/verschiedenes/breadcrumb-navigation)
{% endcontent-ref %}

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" \[Pro]

<figure><img src="/files/svvcZi451mI5WlPYNWmp" alt=""><figcaption><p>CMS-Block "Breadcrumb-Navigation" hinzufügen</p></figcaption></figure>

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# Testimonial (Kundenrezension)

Der **ThemeWare® CMS-Block "Testimonial (Kundenrezension)"** hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

<figure><img src="/files/uOxzMCyxjXR1kOMI1t20" alt=""><figcaption><p>ThemeWare® CMS-Block "Testimonial (Kundenrezension)"</p></figcaption></figure>

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/CbMo5sObUjR3C14wRQMC" %}
[Testimonial (Kundenrezension)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/verschiedenes/testimonial-kundenrezension)
{% endcontent-ref %}

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" \[Pro]

<figure><img src="/files/SDAjEntMsL8SJ3G8mHGH" alt=""><figcaption><p>CMS-Block "Testimonial (Kundenrezension)" hinzufügen</p></figcaption></figure>

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

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


# Testimonials (Vier Spalten)

Der **ThemeWare® CMS-Block "Testimonials (Vier Spalten)"** hat keine spezielle Funktion. Der Block symbolisiert die Flexibilität des CMS-Elementes "Testimonial (Kundenrezension)", welches in verschiedenen (Spalten-) Blöcken genutzt werden kann.

<figure><img src="/files/x5LhIM5rJcMLFBMeFQ4H" alt=""><figcaption><p>ThemeWare® CMS-Block "Testimonials (Vier Spalten)"</p></figcaption></figure>

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/CbMo5sObUjR3C14wRQMC" %}
[Testimonial (Kundenrezension)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/verschiedenes/testimonial-kundenrezension)
{% endcontent-ref %}

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" \[Pro]

<figure><img src="/files/cNgxrs4w4Dz38pTsbQRD" alt=""><figcaption><p>CMS-Block "Testimonials (Vier Spalten)" hinzufügen</p></figcaption></figure>

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

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


# Individueller Code (HTML/CSS/JS)

Der ThemeWare® CMS-Block "**Individueller Code (HTML/CSS/JS)**" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

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

Mehr Informationen zum CMS-Element findest du hier:

{% content-ref url="/pages/EY31jcjkPfhMR7X8JJQK" %}
[Individueller Code (HTML/CSS/JS)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/verschiedenes/individueller-code-html-css-js)
{% endcontent-ref %}

***

## Block hinzufügen

Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

> **Hinweis**: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" \[Pro]

<figure><img src="/files/HLhaPtnlD8g1qK5nz9bb" alt=""><figcaption><p>CMS-Block "Individueller Code (HTML/CSS/JS)" hinzufügen</p></figcaption></figure>

***

## **Demo**

Eine Anwendungsbeispiel findest du in unseren Demoshops:

> Demo folgt...


# CMS-Elemente

In diesem Bereich der Dokumentation findest du alle **ThemeWare® CMS-Elemente** die du CMS-Blöcken hinzufügen kannst.

## ThemeWare® CMS-Elemente

Mit ThemeWare® erhältst du eine umfangreiche und wachsende Auswahl an CMS-Elementen um deinen Shop zu individualisieren. Die ThemeWare® CMS-Elemente sind ab Version 0.5.0 in der **Pro-Edition** verfügbar.

Weitere Elemente sind bereits in Arbeit und folgen bald. Sei gespannt!

{% hint style="success" %}
**Tipp**: Wenn du weitere Ideen oder Wünsche zu bestehenden oder neuen Elementen hast, sende uns gerne [Verbesserungsvorschläge](https://service.themeware.design/verbesserungsvorschlag) über unser Service Portal.
{% endhint %}

{% hint style="warning" %}
**Wichtig**: CMS-Elemente sind in der Shopware Cloud derzeit grundsätzlich leider nicht möglich! Die ThemeWare® Cloud-Edition enthält daher derzeit keine CMS-Elemente.
{% endhint %}

***

## ThemeWare® CMS-Element hinzufügen

Um ein CMS-Element platzieren zu können brauchst du einen geeigneten CMS-Block in deiner Erlebniswelt. Diesem CMS-Block kannst du dann ein CMS-Element zuweisen. Mehr dazu erfährst du im Abschnitt [CMS-Blöcke](/zusatzfunktionen/cms-erweiterungen/cms-bloecke).

***

## ThemeWare® CMS-Element austauschen

1. Fahre mit der Maus über den CMS-Block
2. Klicke auf auf das ![](/files/5ZVJpN4nqquzK3gXOAo6) "Austauschen"-Icon (1)
3. Es öffnet sich das Pop-up "Element auswählen"
4. Wähle hier das gewünschte CMS-Element aus (2)

<figure><img src="/files/ZIs4XvzYb3p598Hx6VKC" alt=""><figcaption><p>CMS-Element hinzufügen oder austauschen</p></figcaption></figure>

![CMS-Element-Auswahl](/files/hi7MvGhE7oK3PbNBF8ie)

***

## ThemeWare® CMS-Element konfigurieren

1. Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das gewünschte CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (1) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen" (2)
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

<figure><img src="/files/W1N0HFGK2G0KgswGIZws" alt=""><figcaption><p>CMS-Element konfigurieren bzw. bearbeiten</p></figcaption></figure>

![CMS-Element-Konfiguration](/files/LuugWkbkYQUXzHPdLTYi)

{% hint style="success" %}
**Tipp**: Achte darauf, dass alle Pflichtfelder "<mark style="color:blue;">\*</mark>" befüllt sind, sonst kannst du die Erlebniswelt nicht speichern. ThemeWare® zeigt dir alle Pflichtfelder mit einem kleinen blauen Sternchen hinter dem Feldnamen an.
{% endhint %}

{% hint style="info" %}
**Hinweis**: Mit der Shopware 6.5 wurde ein **HTML Sanitzer** implementiert. Dieser Sanitizer verbessert Sicherheit, Zuverlässigkeit und Benutzerfreundlichkeit des Editors, indem unsicherer HTML-Code entfernt wird.

Er säubert auch Styles und Attribute für konsistente und korrekte Darstellung des Codes unabhängig von Plattform und Browser. (siehe [HTML Sanitzer](https://wiki.themeware.design/wissensdatenbank/profiwissen/html-sanitizer))
{% endhint %}

***

## Allgemeines

Viele CMS-Elemente von ThemeWare® sind ähnlich aufgebaut. Sie bestehen aus verschiedenen "Schichten".

Die unterste Ebene ist dabei oftmals das Bild bzw. Hintergrundbild (1). Darüber kann oftmals ein "Farb-Overlay" (2) gelegt werden. Diese vollflächige Farbfläche überlagert das Bild darunter. Noch eine Ebene darüber befindet sich das "Content-Overlay" (3) bzw. in denglisch ausgedrückt "Inhalts-Overlay". Der "Content" ist der eigentliche Inhalt, also der Text bzw. die Beschriftung des Elements.

<figure><img src="/files/m9nWYm8joOSlGUsDnotf" alt=""><figcaption></figcaption></figure>

Auch in der Konfiguration von CMS-Elementen gibt es Gemeinsamkeiten. Nachfolgend findest du Einstellungen die in vielen CMS-Elementen zu finden sind:

***

### SEO- & Pagespeed-Einstellungen

In vielen CMS-Elementen findest du den Tab "SEO & Pagespeed". Hier kannst du den HTML-Tag (p, h1, h2, ...) von Überschriften definieren und damit die HTML-Hierarchie deiner Erlebniswelten optimieren.

{% hint style="success" %}
**Tipp**: Den "Alt-Text" und das "Title"-Attribut von Bildern kannst du in Shopware 6 in der Meidenverwaltung definieren.
{% endhint %}

#### Pagespeed

Im Abschnitt "Pagespeed" hast du die Möglichkeit das "Lazy Loading" des Bildes zu konfigurieren.

**eager** – Weist den Browser an, das Bild bevorzugt zu laden. Das wird vor allem bei Bildern "above the fold" (innerhalb des Sichtbereichs) eingesetzt.

**lazy** – Weist den Browser an, das Bild erst zu laden, wenn sich der Benutzer dem Bild beim Scrollen nähert. Das wird vor allem bei Bildern "below the fold" (außerhalb des Sichtbereichs) eingesetzt.

***

### Advanced Mode

Einige CMS-Elemente verfügen über einen "**Advanced Mode**" (Erweiterter Modus). Dieser wird über einen Schalter in der Element-Konfiguration aktiviert und blendet zusätzliche Konfigurationsfelder ein, die im Standardmodus ausgeblendet sind.

Dazu gehören je nach Element z.B.:

* **Padding** (Innenabstand) des Elementes
* **Eckenradius** (Border-Radius) des Elementes

{% hint style="info" %}
**Hinweis**: Die zusätzlichen Felder im Advanced Mode richten sich an Nutzer die mehr Kontrolle über das Erscheinungsbild eines CMS-Elementes haben möchten.
{% endhint %}

***

### Erweiterte Einstellungen

In vielen CMS-Elementen findest du den Tab "Erweitert". Hier kannst du CSS-Klassen konfigurieren und Experten-Einstellungen nutzen.

#### CSS-Klassen

Du kannst zwar jedes HTML-Element in einem CMS-Element über passende CSS-Klassen selektieren, falls du hingegen eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

Im Abschnitt "CSS-Klassen" kannst du verschiedenen Komponenten in einem CMS-Element eigene CSS-Klassen hinzufügen. Trenne mehrere CSS-Klassen jeweils mit einem Leerzeichen.

#### Experten-Einstellungen

In einigen CMS-Elementen findest du im Tab "Erweitert" den Abschnitt "**Experten-Einstellungen**".

Diese Einstellungen **richten sich an Experten** die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen!

{% hint style="info" %}
**Hinweis**: Mehr Informationen wie du diese nutzen kannst, erfährst du in der ThemeWare® Wissensdatenbank im Bereich "[Profiwissen](https://wiki.themeware.design/wissensdatenbank/profiwissen/experten-einstellungen-in-cms-elementen)".
{% endhint %}

***

## CMS-Element individuell stylen

Du kannst ein bestimmtes CMS-Element individuell stylen, indem du ihm in den Element-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst.

Darüber hinaus kannst du auch die automatisch generierte Element-ID nutzen – insbesondere bei CMS-Elementen, denen du keine eigene CSS-Klasse zuweisen kannst. Diese Element-ID findest du im HTML-Code der Storefront. Sie wird im `data-cms-element-id`-Attribut des entsprechenden Containers hinterlegt:

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
</strong>    &#x3C;div class="cms-element-twt-modern-teaser element ...">
    ...
</code></pre>

**Per CSS** kannst du dieses Attribut dann wie folgt selektieren:

```css
[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
    /* Eigene Styles hier */
}
```

{% hint style="info" %}
**Hinweis**: Bei **ThemeWare® CMS-Elementen** kannst du die automatisch generierte Element-ID auch direkt in der **Konfiguration des jeweiligen CMS-Elements** im Tab **"Erweitert"** einsehen. So musst du sie nicht erst aus dem HTML der Storefront herauslesen.
{% endhint %}

***

## Mehrsprachigkeit

Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.

![Erlebniswelt: Sprache wechseln](/files/2e0f8UKAkKZNGAXn9PIO)

***

## Weiterführende Informationen

Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Elementen" findest du in der ThemeWare® Wissensdatenbank:

{% embed url="<https://wiki.themeware.design/wissensdatenbank/grundwissen/erlebniswelten/cms-element>" %}
ThemeWare® Wissensdatenbank
{% endembed %}


# Datenzuordnung

Mit der **Datenzuordnung** kannst du Felder eines CMS-Elements dynamisch mit Daten der aktuellen Seiten-Entität (z.B. Kategorie) befüllen. So zeigt z.B. ein Teaser auf einer Kategorieseite automatisch das Kategoriebild und den Kategorienamen an - ohne manuelle Eingabe.

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

***

## Anleitung

#### Datenzuordnung zuweisen

1. Öffne die Erlebniswelt einer **Kategorieseite** im CMS-Editor
2. Füge ein unterstütztes CMS-Element ein (z.B. einen Teaser)
3. Klicke in der Element-Konfiguration beim gewünschten Feld auf den Button **"Datenzuordnung"** (1)
4. Wähle die gewünschte Entitäts-Eigenschaft aus (2 – z.B. `category.name` für den Kategorienamen)
5. Speichere die Erlebniswelt

Das Feld wird nun auf jeder Kategorieseite automatisch mit den Daten der jeweiligen Kategorie befüllt.

<figure><img src="/files/f904MuVzAhnRQHohSzEn" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Tipp**: Du kannst in dem Dropdown auch Zusatzfelder (abhängig vom CMS-Layout-Typ) auswählen.
{% endhint %}

#### Datenzuordnung entfernen

Wurden Daten zugewiesen, wird anstelle der Konfiguration ein entsprechender Hinweis (3) in der Element-Konfiguration angezeigt.

Über den Button "Datenzuordnung entfernen" (4) kannst du die Zuweisung jederzeit wieder aufheben.

<figure><img src="/files/u1gKu4FWlRIFuSCtncnz" alt=""><figcaption></figcaption></figure>

***

## Unterstützte Elemente und Felder

Die Datenzuordnung haben wir in möglichst vielen CMS-Elementen verfügbar gemacht. Ausgenommen sind nur die Elemente, die ohnehin eindeutig verlinkt werden müssen und bei denen eine dynamische Datenzuordnung deshalb keinen echten Mehrwert bringt.

> Dazu kommen noch ein paar Grenzfälle – zum Beispiel Teaser mit Buttons oder Banner, die grundsätzlich verlinkt sein sollten. Hier möchten wir euch bewusst etwas Spielraum lassen: Nicht jedes Element muss die Datenzuordnung nutzen, wenn sie im jeweiligen Fall einfach keinen Sinn ergibt.

### Teaser

| CMS-Element            | Bild | Überschrift/Titel | Text |
| ---------------------- | ---- | ----------------- | ---- |
| Advanced-Teaser        | x    | x                 | x    |
| Classic-Teaser         | x    | x                 |      |
| Hero-Teaser            | x    | x                 | x    |
| Hover-Box              | x    | x                 | x    |
| Image-Teaser           | x    |                   |      |
| Modern-Teaser          | x    | x                 |      |
| Runder Teaser          | x    | x                 |      |
| Teaser                 | x    | x                 |      |
| Text-Teaser            | x    | x                 |      |
| Text-Teaser (verziert) | x    | x                 |      |

### Banner

| CMS-Element     | Bild | Überschrift/Titel | Text |
| --------------- | ---- | ----------------- | ---- |
| Advanced-Banner | x    | x                 | x    |
| Hero-Banner     | x    | x                 | x    |
| Image-Banner    | x    |                   |      |
| Parallax-Banner | x    | x                 |      |

### Sonstiges

| CMS-Element             | Bild | Überschrift/Titel | Text |
| ----------------------- | ---- | ----------------- | ---- |
| Bild & Text überlagernd | x    | x                 | x    |

{% hint style="info" %}

#### Tipp: Zusatzfelder nutzen

Neben den Standard-Eigenschaften (z.B. `product.name` oder `category.media`) kannst du auch **ThemeWare® Zusatzfelder** per Datenzuordnung mappen. So lässt sich z.B. die Kurzbeschreibung statt der Standard-Produktbeschreibung verwenden.
{% endhint %}

***

## Einschränkungen

* Die Datenzuordnung funktioniert nur auf Seiten mit einer zugewiesenen Entität (z.B. Kategorie- oder Produktseiten)
* Auf statischen Erlebniswelten (z.B. Landingpages) steht keine Entität zur Verfügung - die Felder bleiben leer
* Felder mit aktiver Datenzuordnung können nicht gleichzeitig manuell befüllt werden
* Der "Datenzuordnung"-Button ist nur sichtbar, wenn die Erlebniswelt einem Seitentyp mit Entität zugewiesen ist (z.B. Kategorie- oder Produktseiten)


# Hero-Slider

Die **ThemeWare® Hero-Slider-Elemente** (Slides) sind explizit für die Verwendung im CMS-Block "**Hero-Slider (...)**" (siehe [Hero-Slider](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider)) vorgesehen. Die Elemente sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktionieren nicht in anderen CMS-Blöcken.

## Verfügbare Slider-Elemente

* [Call-to-Action-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/call-to-action-hero-slider)
* [Text-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/text-hero-slider)
* [Image-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/image-slide-hero-slider)

***

## "Hero-Slider" hinzufügen

Füge den CMS-Block des gewünschten Hero-Slider einfach per Drag’n’Drop deiner Erlebniswelt hinzu. Mehr Informationen dazu findest du in der folgenden Anleitung: [Hero-Slider](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider)

> **Hinweis**: Den Hero-Slider findest du in der Rubrik "ThemeWare® Allgemein" \[Pro]

***

## Slider-Element austauschen

Der ThemeWare® Hero-Slider ist mit [Text-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/text-hero-slider) Elementen befüllt. Du kannst diese gegen [Call-to-Action-Slide (Hero-Slider)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/hero-slider/call-to-action-hero-slider) austauschen:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
3. Klicke auf das ![](/files/5ZVJpN4nqquzK3gXOAo6) "Austauschen"-Icon (3) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element auswählen"
5. Wähle das gewünschte CMS-Element (z.B. "Call-to-Action-Slide (Hero-Slider)") aus (4)

Du hast nun das CMS-Element ausgetauscht.

<div><figure><img src="/files/ZTog8uYEgaAFIGzUfa6n" alt=""><figcaption><p>ThemeWare® Hero-Slider: Element austauschen</p></figcaption></figure> <figure><img src="/files/ht5738SqYjogy7JNLCHg" alt=""><figcaption></figcaption></figure></div>

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Call-to-Action-Slide (Hero-Slider)

{% hint style="info" %}
**Info**: Dieser Artikel ist in Arbeit...
{% endhint %}

Das ThemeWare® CMS-Element "**Call-to-Action-Slide (Hero-Slider)**" ist explizit für die Verwendung im CMS-Block "**Hero-Slider (...)**" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.

<figure><img src="/files/FYuDQUTbgIyJq2NfQgaa" alt=""><figcaption><p>ThemeWare® "Call-to-Action-Slide (Hero-Slider)"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
{% endhint %}

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

***

## Element konfigurieren

Das ThemeWare® Hero-Slider CMS-Element "Call-to-Action (Hero-Slider)" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (3) 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/GDOlYF2w9sA3BJ4hOdxP" alt=""><figcaption><p>ThemeWare® "Call-to-Action-Slide" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Call-to-Action-Slide" ist recht selbsterklärend. Das **Bild**, der **Text** und der **Button-Text** sind Pflichtfelder. 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** (1) des Slides. Dies ist ein Pflichtfeld.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du den **Teaser**-Text (3), die **Überschrift** (4), den **Text** (5) und den **Button-Text** (6) für den Slide eingeben. Der Text und der Button-Text sind Pflichtfelder.
>
> **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 wenn das "Gesamte Element anklickbar" ist, da dies die eigentliche Verlinkung des Slides stört.
{% endhint %}

### Layout

Im Tab "Layout" kannst du allgemeine Einstellungen, das **Overlay** (2), den **Text** (3, 4, 5) im Overlay, den **Button** (6) und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du das **Padding** (Innenabstand) und den **Eckenradius** (border-radius) konfigurieren.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" können Sie die **Textausrichtung** und den **Textschatten** konfigurieren.
>
> **Teaser**
>
> Im Abschnitt "Teaser" kannst du die **Schriftart** und **Textfarbe** vom Teaser (3) konfigurieren.
>
> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart** und **Textfarbe** der Überschrift (4) konfigurieren.
>
> **Text**
>
> Im Abschnitt "Text" kannst du die **Schriftart** und **Textfarbe** vom Text (5) konfigurieren.
>
> **Button**
>
> Im Abschnitt "Button" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button (6) gefüllt oder als Outline-Button dargestellt werden soll.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" konfigurierst du das Overlay (2). Hier kannst du die **horizontale Ausrichtung** und die **vertikale Ausrichtung** vom Overlay konfigurieren. Zudem kannst du eine Einblend-**Animation** auswählen und die **Breite** (z.B. 100%) sowie die **maximale Breite** (z.B. 50%) für das Overlay festlegen. Außerdem kannst du die **Overlay-Größe** konfigurieren und einen **Hintergrund-Effekt** (z.B. Blur) auswählen.
>
> Mit der Konfiguration "**Overlay-Styling anwenden**" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die **Hintergrundfarbe** festlegen, einen **Schlagschatten** und **abgerundete Ecken** auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

<figure><img src="/files/gb1fnOWGULSvhGJFrKQC" alt=""><figcaption><p>Elemente vom "Call-to-Action-Slide"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Bitte beachte, dass die Theme-Variablen nicht in der Administration zur Verfügung stehen. Die **Button-Farbe** der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
{% endhint %}

### Responsive

Im Tab "Responsive" kannst du die Darstellung für mobile Viewports optimieren. Hier kannst du **Breakpoints** für den Bild-Anzeigemodus und das Text-Overlay konfigurieren.

> **Bild**
>
> Im Abschnitt "Bild" kann der **Anzeigemodus** des Bildes konfiguriert werden. Mit dem **Breakpoint** kannst du definieren, ab wann der Anzeigemodus des Bildes wechseln soll (z.B. von 'cover' auf 'contain'). So kannst du beispielsweise eine **minimale Höhe** in mobilen Viewports gewährleisten.
>
> **Text**
>
> Im Abschnitt "Text" kann der **Breakpoint** für den Text konfiguriert werden. Ab diesem Breakpoint überlagert der Text das Bild. Außerdem kannst du eine **Hintergrundfarbe** für den Textbereich konfigurieren, die angezeigt wird wenn der Text unterhalb des Bildes dargestellt wird.

### Slide

Im Tab "Slide" kannst du das **Slide-Intervall** (Anzeigedauer in Millisekunden) konfigurieren. Außerdem kannst du im Abschnitt "Zeitsteuerung" optional ein **Startdatum** und **Enddatum** festlegen um den Slide nur in einem bestimmten Zeitraum anzuzeigen.

{% hint style="warning" %}
**Wichtig**: Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Mehr Informationen dazu findest du hier: [Hero-Slider](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider#autoplay-und-barrierefreiheit)
{% endhint %}

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für der Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.

### Erweitert

Du kannst zwar jedes HTML-Element unserer Slides über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

***

## Breakpoint

### Bild

Das Bild der Hero-Slides wird üblicherweise im Anzeigemodus '**contain**' (1) dargestellt. Es skaliert, unter Beibehaltung des Seitenverhältnisses, auf die volle Breite des Slides.

Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Anzeigemodus zu '**cover**' (2) wechseln soll. Im Anzeigemodus 'cover' musst du ergänzend die **minimale Höhe** (3) des Slides konfigurieren. Diese gibt dann die Höhe des Slides vor und das Bild füllt, unter Beibehaltung des Seitenverhältnisses, die angegebene Größe aus. Das Bild wird ggf. beschnitten (4) damit es passt.

<div><figure><img src="/files/T63ZvFPV9VwPOxrvlHIo" alt=""><figcaption><p>Anzeigemodus 'contain'</p></figcaption></figure> <figure><img src="/files/1PDSJ1UWtjmj2XkD4Sid" alt=""><figcaption><p>Anzeigemodus 'cover'</p></figcaption></figure> <figure><img src="/files/x7rUDOsBbB7EDVQXbItE" alt=""><figcaption><p>Anzeigemodus 'cover' im Detail</p></figcaption></figure></div>

### Text

Der Text in den Hero-Slides überlagert üblicherweise das Bild. In kleineren Viewports kann dies, insbesondere bei langen Texten, nicht mehr perfekt passen, daher wird der Text auf mobilen Geräten unterhalb des Bildes dargestellt.

Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Text das Bild überlagern soll.

<div><figure><img src="/files/0jXYgSibtVdINqd7Sqvm" alt=""><figcaption><p>Text unter dem Bild</p></figcaption></figure> <figure><img src="/files/PNKNUgmmkSsYyHUWSdkP" alt=""><figcaption><p>Text überlagert das Bild</p></figcaption></figure></div>

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Text-Slide (Hero-Slider)

{% hint style="info" %}
**Info**: Dieser Artikel ist in Arbeit...
{% endhint %}

Das ThemeWare® CMS-Element "**Text-Slide (Hero-Slider)**" ist explizit für die Verwendung im CMS-Block "**Hero-Slider (...)**" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.

<figure><img src="/files/wEvzsLwWyDKj8JNvvZ9f" alt=""><figcaption><p>ThemeWare® "Text-Slide (Hero-Slider)"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
{% endhint %}

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

***

## Element konfigurieren

Das ThemeWare® Hero-Slider CMS-Element "Text (Hero-Slider)" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (3) 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/u31KSsgJzIMxBEwMZlXQ" alt=""><figcaption><p>ThemeWare® "Text-Slide" konfigurieren</p></figcaption></figure>

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

***

## Konfiguration

Die Konfiguration vom "Text-Slide" ist recht selbsterklärend. Das **Bild** und der **Text** sind Pflichtfelder. 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** (1) des Slides. Dies ist ein Pflichtfeld.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du den **Teaser**-Text, die **Überschrift** (3) und den **Text** (4) für den Slide eingeben. Der Text 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 wenn das "Gesamte Element anklickbar" ist, da dies die eigentliche Verlinkung des Slides stört.
{% endhint %}

### Layout

Im Tab "Layout" kannst du allgemeine Einstellungen, das **Overlay** (2), den **Text** (3, 4, 5) im Overlay und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du das **Padding** (Innenabstand) und den **Eckenradius** (border-radius) konfigurieren.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" können Sie die **Textausrichtung** und den **Textschatten** konfigurieren.
>
> **Teaser**
>
> Im Abschnitt "Teaser" kannst du die **Schriftart** und **Textfarbe** vom Teaser (3) konfigurieren.
>
> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart** und **Textfarbe** der Überschrift (4) konfigurieren.
>
> **Text**
>
> Im Abschnitt "Text" kannst du die **Schriftart** und **Textfarbe** vom Text (5) konfigurieren.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" konfigurierst du das Overlay (2). Hier kannst du die **horizontale Ausrichtung** und die **vertikale Ausrichtung** vom Overlay konfigurieren. Zudem kannst du eine Einblend-**Animation** auswählen und die **Breite** (z.B. 100%) sowie die **maximale Breite** (z.B. 50%) für das Overlay festlegen. Außerdem kannst du die **Overlay-Größe** konfigurieren und einen **Hintergrund-Effekt** (z.B. Blur) auswählen.
>
> Mit der Konfiguration "**Overlay-Styling anwenden**" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die **Hintergrundfarbe** festlegen, einen **Schlagschatten** und **abgerundete Ecken** auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

<figure><img src="/files/GKaj3FKQhFfyA25GRr4q" alt=""><figcaption><p>Elemente vom "Text-Slide"</p></figcaption></figure>

### Responsive

Im Tab "Responsive" kannst du die Darstellung für mobile Viewports optimieren. Hier kannst du **Breakpoints** für den Bild-Anzeigemodus und das Text-Overlay konfigurieren.

> **Bild**
>
> Im Abschnitt "Bild" kann der **Anzeigemodus** des Bildes konfiguriert werden. Mit dem **Breakpoint** kannst du definieren, ab wann der Anzeigemodus des Bildes wechseln soll (z.B. von 'cover' auf 'contain'). So kannst du beispielsweise eine **minimale Höhe** in mobilen Viewports gewährleisten.
>
> **Text**
>
> Im Abschnitt "Text" kann der **Breakpoint** für den Text konfiguriert werden. Ab diesem Breakpoint überlagert der Text das Bild. Außerdem kannst du eine **Hintergrundfarbe** für den Textbereich konfigurieren, die angezeigt wird wenn der Text unterhalb des Bildes dargestellt wird.

### Slide

Im Tab "Slide" kannst du das **Slide-Intervall** (Anzeigedauer in Millisekunden) konfigurieren. Außerdem kannst du im Abschnitt "Zeitsteuerung" optional ein **Startdatum** und **Enddatum** festlegen um den Slide nur in einem bestimmten Zeitraum anzuzeigen.

{% hint style="warning" %}
**Wichtig**: Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Mehr Informationen dazu findest du hier: [Hero-Slider](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider#autoplay-und-barrierefreiheit)
{% endhint %}

### 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 Slides über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

***

## Breakpoint

### Bild

Das Bild der Hero-Slides wird üblicherweise im Anzeigemodus '**contain**' (1) dargestellt. Es skaliert, unter Beibehaltung des Seitenverhältnisses, auf die volle Breite des Slides.

Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Anzeigemodus zu '**cover**' (2) wechseln soll. Im Anzeigemodus 'cover' musst du ergänzend die **minimale Höhe** (3) des Slides konfigurieren. Diese gibt dann die Höhe des Slides vor und das Bild füllt, unter Beibehaltung des Seitenverhältnisses, die angegebene Größe aus. Das Bild wird ggf. beschnitten (4) damit es passt.

<div><figure><img src="/files/T63ZvFPV9VwPOxrvlHIo" alt=""><figcaption><p>Anzeigemodus 'contain'</p></figcaption></figure> <figure><img src="/files/1PDSJ1UWtjmj2XkD4Sid" alt=""><figcaption><p>Anzeigemodus 'cover'</p></figcaption></figure> <figure><img src="/files/x7rUDOsBbB7EDVQXbItE" alt=""><figcaption><p>Anzeigemodus 'cover' im Detail</p></figcaption></figure></div>

### Text

Der Text in den Hero-Slides überlagert üblicherweise das Bild. In kleineren Viewports kann dies, insbesondere bei langen Texten, nicht mehr perfekt passen, daher wird der Text auf mobilen Geräten unterhalb des Bildes dargestellt.

Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Text das Bild überlagern soll.

<div><figure><img src="/files/0jXYgSibtVdINqd7Sqvm" alt=""><figcaption><p>Text unter dem Bild</p></figcaption></figure> <figure><img src="/files/PNKNUgmmkSsYyHUWSdkP" alt=""><figcaption><p>Text überlagert das Bild</p></figcaption></figure></div>

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Image-Slide (Hero-Slider)

{% hint style="info" %}
**Info**: Dieser Artikel ist in Arbeit...
{% endhint %}

Das ThemeWare® CMS-Element "**Image-Slide (Hero-Slider)**" ist explizit für die Verwendung im CMS-Block "**Hero-Slider (...)**" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.

<figure><img src="/files/zYeSsD47wBRHiObptjME" alt=""><figcaption><p>ThemeWare® "Image-Slide (Hero-Slider)"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
{% endhint %}

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

***

## Element konfigurieren

Das ThemeWare® Hero-Slider CMS-Element "Image-Slide (Hero-Slider)" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (3) 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/OqKGW3tTJUbyLwhn56Oi" alt=""><figcaption><p>ThemeWare® "Image-Slide" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Image-Slide" 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** (1) des Slides. Dies ist ein Pflichtfeld.
>
> **Link**
>
> Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.

### Layout

Im Tab "Layout" kannst du allgemeine Einstellungen und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du den **Eckenradius** (border-radius) konfigurieren.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

<figure><img src="/files/gSsCpyC02VehVMZfRFoy" alt=""><figcaption><p>Elemente vom "Image-Slide"</p></figcaption></figure>

### Responsive

Im Tab "Responsive" kannst du die Darstellung für mobile Viewports optimieren. Hier kannst du den **Breakpoint** für den Bild-Anzeigemodus konfigurieren.

> **Bild**
>
> Im Abschnitt "Bild" kann der **Anzeigemodus** des Bildes konfiguriert werden. Mit dem **Breakpoint** kannst du definieren, ab wann der Anzeigemodus des Bildes wechseln soll (z.B. von 'cover' auf 'contain'). So kannst du beispielsweise eine **minimale Höhe** in mobilen Viewports gewährleisten.

### Slide

Im Tab "Slide" kannst du das **Slide-Intervall** (Anzeigedauer in Millisekunden) konfigurieren. Außerdem kannst du im Abschnitt "Zeitsteuerung" optional ein **Startdatum** und **Enddatum** festlegen um den Slide nur in einem bestimmten Zeitraum anzuzeigen.

{% hint style="warning" %}
**Wichtig**: Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Mehr Informationen dazu findest du hier: [Hero-Slider](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/hero-slider#autoplay-und-barrierefreiheit)
{% endhint %}

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du das "Lazy Loading" vom Bild konfigurieren.

### Erweitert

Du kannst zwar jedes HTML-Element unserer Slides über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.

***

## Breakpoint

### Bild

Das Bild der Hero-Slides wird üblicherweise im Anzeigemodus '**contain**' (1) dargestellt. Es skaliert, unter Beibehaltung des Seitenverhältnisses, auf die volle Breite des Slides.

Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Anzeigemodus zu '**cover**' (2) wechseln soll. Im Anzeigemodus 'cover' musst du ergänzend die **minimale Höhe** (3) des Slides konfigurieren. Diese gibt dann die Höhe des Slides vor und das Bild füllt, unter Beibehaltung des Seitenverhältnisses, die angegebene Größe aus. Das Bild wird ggf. beschnitten (4) damit es passt.

<div><figure><img src="/files/T63ZvFPV9VwPOxrvlHIo" alt=""><figcaption><p>Anzeigemodus 'contain'</p></figcaption></figure> <figure><img src="/files/1PDSJ1UWtjmj2XkD4Sid" alt=""><figcaption><p>Anzeigemodus 'cover'</p></figcaption></figure> <figure><img src="/files/x7rUDOsBbB7EDVQXbItE" alt=""><figcaption><p>Anzeigemodus 'cover' im Detail</p></figcaption></figure></div>

***

## Demo

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Teaser

Die **ThemeWare® CMS-Teaser** sind unabhängig von ihrem CMS-Block. Du kannst die Teaser auch in anderen CMS-Blöcken (z.B. den ThemeWare® [Spalten-Blöcken](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/spalten)) verwenden.

## Verfügbare Teaser-Elemente

* [Text-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/text-teaser)
* [Text-Teaser (verziert)](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/text-teaser-verziert)
* [Button-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/button-teaser)
* [Call-to-Action](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/call-to-action)
* [Hover-Box](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/hover-box)
* [Image-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/image-teaser)
* [Hero-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/hero-teaser)
* [Advanced-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/advanced-teaser)
* [Classic-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/classic-teaser)
* [Modern-Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/modern-teaser)
* [Runder Teaser](/zusatzfunktionen/cms-erweiterungen/cms-elemente/teaser/runder-teaser)

***

## Teaser-Element hinzufügen

Füge den CMS-Block des gewünschten Teaser-Elementes einfach per Drag’n’Drop deiner Erlebniswelt hinzu.

Mehr Informationen dazu findest du in der folgenden Anleitung: [Teaser](/zusatzfunktionen/cms-erweiterungen/cms-bloecke/teaser)

> **Hinweis**: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" \[Pro]

***

## Teaser-Element austauschen

Tausche alternativ ein bestehendes CMS-Element in einem CMS-Block gegen das gewünschte Teaser-Element aus.

Mehr Informationen dazu findest du in der folgenden Anleitung: [CMS-Elemente](/zusatzfunktionen/cms-erweiterungen/cms-elemente)


# Teaser

Der **ThemeWare® "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.

Der Teaser zeigt ein Bild mit einer Caption-Leiste am unteren Rand, die eine Überschrift, einen Untertitel und optional ein Pfeil-Icon enthält.

<figure><img src="/files/sxSXld6u9s0pdAunXl3F" alt=""><figcaption><p>ThemeWare® "Teaser"</p></figcaption></figure>

{% hint style="success" %}
**Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}

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

***

## Element konfigurieren

Den ThemeWare® "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 ![](/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/FMrHodqhwTj9hB9zFn0I" alt=""><figcaption><p>ThemeWare® "Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Teaser" ist recht selbsterklärend. Die **Überschrift** 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** und den **Untertitel** für den Teaser eingeben. Die Überschrift ist ein Pflichtfeld.
>
> **Bild**
>
> Im Abschnitt "Bild" definierst du das **Hintergrundbild** (1) des Teasers. Das Bild ist ein Pflichtfeld. Du kannst den **Anzeigemodus** (Cover/Contain/Stretch), die **Minimale Höhe** (Standard: `340px`) und die **Ausrichtung** konfigurieren.
>
> **Barrierefreiheit**
>
> Im Abschnitt "Barrierefreiheit" kannst du einen **Alt-Text** für das Bild eingeben und festlegen, ob das Bild als **dekoratives Bild** behandelt werden soll.
>
> **Link**
>
> Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird. Du kannst festlegen, ob der Link in einem **neuen Tab** geöffnet werden soll und ob der **gesamte Teaser** als Link fungiert ("Voller Link").

<figure><img src="/files/1d1cWTcBA8Jg1SdMpsWw" alt=""><figcaption><p>Elemente vom "Teaser"</p></figcaption></figure>

### Layout

Im Tab "Layout" kannst du die **Caption-Leiste** (2), die **Überschrift**, den **Untertitel**, das **Bild**, **Hover-Effekte** und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du das **Padding**, den **Border-Radius** und die **Hintergrundfarbe** konfigurieren.

{% hint style="info" %}
**Hinweis**: Beim Hover-Effekt "Grow" wird das Padding durch den Effekt gesteuert.
{% endhint %}

> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung** und die **Textfarbe** für die Überschrift konfigurieren.
>
> **Untertitel**
>
> Im Abschnitt "Untertitel" kannst du die **Schriftart** und die **Textfarbe** für den Untertitel konfigurieren.
>
> **Caption-Leiste**
>
> Im Abschnitt "Caption-Leiste" kannst du die **Hintergrundfarbe** und den **Hintergrund-Effekt** (Backdrop) der Caption-Leiste konfigurieren.
>
> **Icon**
>
> Im Abschnitt "Icon" kannst du ein **Pfeil-Icon** auswählen, das auf der rechten Seite der Caption-Leiste angezeigt wird.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst du die gewünschte horizontale **Positionierung** des Bildes im Anzeigemodus 'Cover' auswählen.
>
> **Hover-Effekte**
>
> Im Abschnitt "Hover-Effekte" kannst du einen **Hover-Effekt** auswählen und festlegen, ob der **CTA bei Hover** angezeigt werden soll. Folgende Hover-Effekte stehen zur Verfügung:
>
> * **Grow** - Das Padding der Caption-Leiste vergrößert sich beim Hover
> * **Fade in** - Die Caption-Leiste blendet ein
> * **Fade out** - Die Caption-Leiste blendet aus
> * **Slide in up** - Die Caption-Leiste gleitet von unten herein
> * **Slide in down** - Die Caption-Leiste gleitet von oben herein
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden. Du kannst eine **Farbe**, einen **Farbverlauf** und den **Farbverlaufswinkel** festlegen.

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den **HTML-Tag** für die Überschrift, eine **HTML-Tag-Klasse**, die **Fetch-Priorität** 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.

Im Tab "Erweitert" stehen dir CSS-Klassen für das **Element** und die **Caption-Leiste** zur Verfügung. Zudem wird die **Element-ID** angezeigt.

***

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


# Text-Teaser

Der **ThemeWare® "Text-Teaser"** 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="/files/mqEw8tvTxOuQkfU0Cmbx" alt=""><figcaption><p>ThemeWare® "Text-Teaser"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Text-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 ![](/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/6cQTWI2YOiP9vCGTLgzG" alt=""><figcaption><p>ThemeWare® "Text-Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Text-Teaser" ist recht selbsterklärend. Der **Titel** 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 den **Titel** (2) und **Zwischentitel** eingeben. Der Titel 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 den **Titel** (2) und den **Hover-Effekt** vom Content und ein **Farb-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 und einen **Text-Schatten** konfigurieren.
>
> **Titel**
>
> Im Abschnitt "Titel" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung** und die **Textfarbe** vom Titel (2) konfigurieren.
>
> **Untertitel**
>
> Im Abschnitt "Untertitel" kannst du die **Schriftart** und die **Textfarbe** vom Untertitel konfigurieren.
>
> **Layout**
>
> Im Abschnitt "Layout" kannst du die **horizontale Ausrichtung**, die **vertikale Ausrichtung** und die maximale Breite (z.B. 90%) des Inhaltes (=Text) im Teaser konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
>
> **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.

<figure><img src="/files/ZJeNtnMHZHeqMWrZjrg0" alt=""><figcaption><p>Elemente vom "Text-Teaser"</p></figcaption></figure>

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel bzw. den Untertitel 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
* **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/Text-Teaser/>" %}
ThemeWare® Demoshop => Text-Teaser
{% endembed %}


# Text-Teaser (verziert)

Der **ThemeWare® "Text-Teaser (verziert)"** 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="/files/3Pyz3cve4FWquYEmagtA" alt=""><figcaption><p>ThemeWare® "Text-Teaser (verziert)"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Text-Teaser (verziert)" 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/8zrbhLxGcmXqVsllaomP" alt=""><figcaption><p>ThemeWare® "Text-Teaser (verziert)" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Text-Teaser (verziert)" ist recht selbsterklärend. Der **Titel** 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 den **Titel** (2) eingeben. Der Titel 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 den **Titel** (2) und den **Hover-Effekt** vom Content und ein **Farb-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.
>
> **Titel**
>
> Im Abschnitt "Titel" kannst du die **Schriftart**, die **Textfarbe** und die **Hintergrundfarbe** vom Titel (2) konfigurieren.
>
> **Layout**
>
> Im Abschnitt "Layout" kannst du die **horizontale Ausrichtung**, die **vertikale Ausrichtung** und die maximale Breite (z.B. 90%) des Inhaltes (=Text) im Teaser konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** für den Inhalt (=Text) auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

<figure><img src="/files/ABoKeuJTPSj4iJ6KdB2g" alt=""><figcaption><p>Elemente vom "Text-Teaser (verziert)"</p></figcaption></figure>

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

***

## 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/Text-Teaser-verziert/>" %}
ThemeWare® Demoshop => Text-Teaser (verziert)
{% endembed %}


# Button-Teaser

Der **ThemeWare® "Button-Teaser"** 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="/files/ddWgSZ6F2NfRCEUEG1sB" alt=""><figcaption><p>ThemeWare® "Button-Teaser"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Button-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 ![](/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/vXwkekI8phApLOYU2ULC" alt=""><figcaption><p>ThemeWare® "Button-Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Button-Teaser" ist recht selbsterklärend. Der **Button-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 den **Button-Text** (2) eingeben. Der Button-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.

### Layout

Im Tab "Layout" kannst du den **Button** (2) und den **Hover-Effekt** vom Content und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du die **allgemeine Hintergrundfarbe** (1) konfigurieren.
>
> **Button**
>
> Im Abschnitt "Button" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button (2) gefüllt oder als Outline-Button dargestellt werden soll.
>
> Zudem kannst du die **horizontale Ausrichtung** und die **vertikale Ausrichtung** vom Button im Teaser konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** für den Inhalt (=Button) auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

<figure><img src="/files/wHxkQHu3yMWfpNtKVaam" alt=""><figcaption><p>Elemente vom "Button-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.

{% hint style="info" %}
**Hinweis**: Bitte beachte, dass Theme-Variablen nicht in der Administration zur Verfügung stehen. Die **Button-Farbe** der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
{% endhint %}

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# Call-to-Action

Der **ThemeWare® "Call-to-Action"** 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.

<figure><img src="/files/Vht748jzB3kMNcjT2Nyt" alt=""><figcaption><p>ThemeWare® "Call-to-Action"</p></figcaption></figure>

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

***

## Element konfigurieren

Den ThemeWare® "Call-to-Action"-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 ![](/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/22snaa56UW8G76c14MYW" alt=""><figcaption><p>ThemeWare® "Call-to-Action" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Call-to-Action" ist recht selbsterklärend. Der **Text**, der **Button-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), den **Text** (4) und den **Button-Text** (5) für den Teaser eingeben. Der Text und der Button-Text sind Pflichtfelder.
>
> **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, den **Hover-Effekt** vom Content und ein **Farb-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.
>
> **Button**
>
> Im Abschnitt "Button" kannst du den **Button-Stil** (die Farbe) konfigurieren und festlegen ob der Button (5) gefüllt oder als Outline-Button dargestellt werden soll.
>
> **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). Hier kannst du die **horizontale Ausrichtung** und die **vertikale Ausrichtung** vom Overlay konfigurieren. Zudem kannst du die **Breite** (z.B. auto oder 90%) und die **maximale Breite** (z.B. 90% oder 740px) für das Overlay festlegen.
>
> Mit der Konfiguration "**Overlay-Styling anwenden**" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die **Hintergrundfarbe** festlegen, einen **Hintergrund-Effekt**, einen **Schlagschatten** und **abgerundete Ecken** auswählen.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du einen **Hover-Effekt** für den Inhalt (=Text) auswählen.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden.

<figure><img src="/files/cTlWnplvOBWRdBjjqFSD" alt=""><figcaption><p>Elemente vom "Call-to-Action"</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.

{% hint style="info" %}
**Hinweis**: Bitte beachte, dass Theme-Variablen nicht in der Administration zur Verfügung stehen. Die **Button-Farbe** der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
{% endhint %}

***

## **Demo**

Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

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


# 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 %}


# Hover-Teaser

Der **ThemeWare® "Hover-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.

Der Hover-Teaser ist ein Teaser mit 11 einzigartigen Hover-Effekten. Jeder Effekt bietet eine individuelle visuelle Behandlung mit unterschiedlichen Animationen für Überschrift, Untertitel und dekorative Elemente.

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

{% hint style="success" %}
**Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}

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

***

## Element konfigurieren

Den ThemeWare® "Hover-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 ![](/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/X4GmSWFgIHjXprDkXBTb" alt=""><figcaption><p>ThemeWare® "Hover-Teaser" konfigurieren</p></figcaption></figure>

***

## Konfiguration

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

> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du die **Überschrift** (2) und den **Titel (Suffix)** eingeben. Der Suffix wird in Fettschrift an die Überschrift angehängt. Mit der Option **Leerzeichen** kannst du ein Leerzeichen zwischen Überschrift und Suffix einfügen.
>
> **Untertitel**
>
> Im Abschnitt "Untertitel" kannst du den **Untertitel** (3) für den Teaser eingeben.
>
> **Bild**
>
> Im Abschnitt "Bild" definierst du das **Hintergrundbild** (1) des Teasers. Das Bild ist ein Pflichtfeld. Du kannst den **Anzeigemodus**, die **Minimale Höhe** und die **Ausrichtung** konfigurieren.
>
> **Barrierefreiheit**
>
> Im Abschnitt "Barrierefreiheit" kannst du einen **Alt-Text** für das Bild eingeben und festlegen, ob das Bild als **dekoratives Bild** behandelt werden soll.
>
> **Link**
>
> Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird. Du kannst festlegen, ob der Link in einem **neuen Tab** geöffnet werden soll und ob der **gesamte Teaser** als Link fungiert ("Voller Link").

<figure><img src="/files/LE86Jqk4MtWsmP2QTyGW" alt=""><figcaption><p>Elemente vom "Hover-Teaser"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis:** Die Teaser sollten stets eine Höhe von mindestens 200 px haben, damit sich die Hover-Effekte optimal entfalten können.
{% endhint %}

### Layout

Im Tab "Layout" kannst du den **Hover-Effekt**, die **Überschrift**, den **Untertitel**, die **Akzentfarbe**, das **Bild**, **Hover-Verhalten** und ein **Farb-Overlay** konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du den **Hover-Effekt**, die **Hintergrundfarbe** und die **maximale Breite** konfigurieren.
>
> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart**, die **Strichstärke**, die **Textformatierung**, die **Textfarbe** und den **Textschatten** (Klein/Normal/Groß) für die Überschrift konfigurieren.
>
> **Untertitel**
>
> Im Abschnitt "Untertitel" kannst du die **Schriftart** und die **Textfarbe** für den Untertitel konfigurieren.
>
> **Akzentfarbe**
>
> Im Abschnitt "Akzentfarbe" kannst du die **Farbe** für die Akzentelemente (Linien, Ränder) der Hover-Effekte konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst du die gewünschte horizontale **Positionierung** des Bildes, die **Hintergrundfarbe** und **Bildeffekte** konfigurieren. Folgende Bildeffekte stehen zur Verfügung: Blur, Helligkeit, Kontrast, Graustufen, Deckkraft, Sättigung und Skalierung.
>
> **Hover**
>
> Im Abschnitt "Hover" kannst du die **Übergangsdauer** (Schnell 0,2s / Normal 0,35s / Langsam 0,5s), den **Bild-Hover-Effekt** und den **Farb-Overlay-Hover-Effekt** konfigurieren.
>
> **Farb-Overlay**
>
> Im Abschnitt "Farb-Overlay" kann ein **Farb-Overlay** aktiviert und konfiguriert werden. Du kannst eine **Farbe**, einen **Farbverlauf** und den **Farbverlaufswinkel** festlegen.

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du die **HTML-Tags** für die Überschrift und den Untertitel, die **Fetch-Priorität** 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.

Im Tab "Erweitert" stehen dir CSS-Klassen für das **Element**, die **Überschrift** und den **Untertitel** zur Verfügung. Zudem wird die **Element-ID** angezeigt.

***

## Hover-Effekte

Folgende Hover-Effekte stehen für den "Hover-Teaser" zur Verfügung:

* Chloe
* Eve
* Holly (ohne Untertitel)
* Luna
* Mia
* Mila
* Olivia
* Ruby
* Sophie
* Stella

<div><figure><img src="/files/4FUt8kefxmICaDpU1SO1" alt=""><figcaption></figcaption></figure> <figure><img src="/files/KgrJVvP8s213CdeZEvRn" alt=""><figcaption></figcaption></figure> <figure><img src="/files/fDMvcdeiUUZJ2WWTB58K" alt=""><figcaption></figcaption></figure> <figure><img src="/files/HfNQbG6yTyxYGjKFxPH5" alt=""><figcaption></figcaption></figure> <figure><img src="/files/OGQ5II16Dx9IEoLpfrGf" alt=""><figcaption></figcaption></figure> <figure><img src="/files/f5vbQsUDk5F2wTuVSTNK" alt=""><figcaption></figcaption></figure> <figure><img src="/files/mweQmPNFUZENOKliqj1r" alt=""><figcaption></figcaption></figure> <figure><img src="/files/thkohShR3eRdH4NOCItV" alt=""><figcaption></figcaption></figure> <figure><img src="/files/CMnSxUVXI87wIGJ9qHbL" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VrJ50fd9Y15KOWRtHu0J" alt=""><figcaption></figcaption></figure></div>




---

[Next Page](/llms-full.txt/1)