CMS-Element individuell stylen
Last updated
Was this helpful?
Last updated
Was this helpful?
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 nutzen – insbesondere bei CMS-Elementen, denen du keine eigene CSS-Klasse zuweisen kannst.
Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element (1)
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Wechsel in den Tab "Erweitert" (3)
Trage im Konfigurationsfeld "CSS-Klassen (Element)" deine eigene CSS-Klasse ein (4)
Tipp: Trenne mehrere Klassen mit einem Leerzeichen.
Speichere deine Änderungen
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:
Per CSS kannst du dieses Attribut dann wie folgt selektieren:
Wie du CSS-Styles hinzufügen kannst erfährst du in folgender Anleitung:
