> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/cms-element-individuell-stylen.md).

# 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](#element-id) nutzen – insbesondere bei CMS-Elementen, denen du keine eigene CSS-Klasse zuweisen kannst.

***

## CSS-Klasse einem ThemeWare® CMS-Element hinzufügen

1. Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das gewünschte CMS-Element (1)
3. Klicke auf das ![](/files/YY1yXZuChT6uJ6oSNYXb) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Wechsel in den Tab "Erweitert" (3)
6. Trage im Konfigurationsfeld "CSS-Klassen (Element)" deine eigene CSS-Klasse ein (4)
   * **Tipp**: Trenne mehrere Klassen mit einem Leerzeichen.
7. Speichere deine Änderungen

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

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

***

## Element-ID

Für jedes CMS-Element erstellt Shopware automatisch eine eindeutige Element-ID. Diese kannst du nutzen, um das Element individuell per CSS zu stylen – vor allem dann, wenn sich keine eigene CSS-Klasse zuweisen lässt.

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 %}

***

#### Weiterführende Informationen

Wie du CSS-Styles hinzufügen kannst erfährst du in folgender Anleitung:

{% content-ref url="/pages/dfYh3rG0xbCzXhNdDC2O" %}
[Individuelle Anpassungen mittels CSS](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-css.md)
{% endcontent-ref %}