CMS-Elemente

In diesem Bereich der Dokumentation findest du alle ThemeWare® CMS-Elemente die du CMS-Blöcken hinzufügen kannst.

ThemeWare® CMS-Elemente

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!

ThemeWare® CMS-Element hinzufügen

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.

ThemeWare® CMS-Element austauschen

1. Fahre mit der Maus über den CMS-Block

2. Klicke auf auf das "Austauschen"-Icon (1)

3. Es öffnet sich das Pop-up "Element auswählen"

4. Wähle hier das gewünschte CMS-Element aus (2)

ThemeWare® CMS-Element konfigurieren

1. Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren

2. Fahre mit der Maus über das gewünschte CMS-Element

3. Klicke auf das "Zahnrad"-Icon (1) um das CMS-Element zu konfigurieren

4. Es öffnet sich das Pop-up "Element-Einstellungen" (2)

5. Nehme die gewünschten Änderungen vor

6. Speichere deine Änderungen

Allgemeines

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:

SEO- & Pagespeed-Einstellungen

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.

Pagespeed

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.

Erweiterte Einstellungen

In vielen CMS-Elementen findest du den Tab "Erweitert". Hier kannst du CSS-Klassen konfigurieren und Experten-Einstellungen nutzen.

CSS-Klassen

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.

Experten-Einstellungen

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!

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. 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 */
}

Mehrsprachigkeit

Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.

Weiterführende Informationen

Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Elementen" findest du in der ThemeWare® Wissensdatenbank:

CMS-ElementThemeWare® Wissensdatenbank