# 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.md).
***
## ThemeWare® CMS-Element austauschen
1. Fahre mit der Maus über den CMS-Block
2. Klicke auf auf das  "Austauschen"-Icon (1)
3. Es öffnet sich das Pop-up "Element auswählen"
4. Wähle hier das gewünschte CMS-Element aus (2)
CMS-Element hinzufügen oder austauschen
***
## 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  "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
CMS-Element konfigurieren bzw. bearbeiten
{% hint style="success" %}
**Tipp**: Achte darauf, dass alle Pflichtfelder "\*" 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.
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:
<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
<div class="cms-element-twt-modern-teaser element ...">
...
**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.
***
## Weiterführende Informationen
Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Elementen" findest du in der ThemeWare® Wissensdatenbank:
{% embed url="" %}
ThemeWare® Wissensdatenbank
{% endembed %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.