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.

---

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 "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

---

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:

<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:

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

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.

---

Weiterführende Informationen

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

Individuelle Anpassungen mittels CSS