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


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/cms-element-individuell-stylen.md?ask=<question>
```

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.