CMS-Elemente
Last updated
Was this helpful?
Last updated
Was this helpful?
In diesem Bereich der Dokumentation findest du alle ThemeWare® CMS-Elemente die du CMS-Blöcken hinzufügen kannst.
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!
Tipp: Wenn du weitere Ideen oder Wünsche zu bestehenden oder neuen Elementen hast, sende uns gerne über unser Service Portal.
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.
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.
Fahre mit der Maus über den CMS-Block
Klicke auf auf das "Austauschen"-Icon (1)
Es öffnet sich das Pop-up "Element auswählen"
Wähle hier das gewünschte CMS-Element aus (2)
Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element
Es öffnet sich das Pop-up "Element-Einstellungen" (2)
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
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.
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:
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.
Tipp: Den "Alt-Text" und das "Title"-Attribut von Bildern kannst du in Shopware 6 in der Meidenverwaltung definieren.
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.
In vielen CMS-Elementen findest du den Tab "Erweitert". Hier kannst du CSS-Klassen konfigurieren und Experten-Einstellungen nutzen.
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.
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!
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:
Per CSS kannst du dieses Attribut dann wie folgt selektieren:
Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.
Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Elementen" findest du in der ThemeWare® Wissensdatenbank:
Klicke auf das "Zahnrad"-Icon (1) um das CMS-Element zu konfigurieren
Er säubert auch Styles und Attribute für konsistente und korrekte Darstellung des Codes unabhängig von Plattform und Browser. (siehe )
Hinweis: Mehr Informationen wie du diese nutzen kannst, erfährst du in der ThemeWare® Wissensdatenbank im Bereich "".
