# CMS-Sektion

Jedes [cms-layout](https://wiki.themeware.design/wissensdatenbank/grundwissen/erlebniswelten/cms-layout "mention") besteht aus einer oder mehreren CMS-Sektionen. Dadurch lassen sich viele unterschiedliche Designs mit fullwidth und/oder boxed Sektionen umsetzen.

Es gibt derzeit zwei Arten von CMS-Sektionen: "Sidebar" und "Volle Breite". Also einer Sektion mit Sidebar und einer Sektion ohne Sidebar.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FCvoNjZsoBrj16Zz2F2w7%2Fimage.png?alt=media&#x26;token=68f5735d-8f1c-4046-8425-ca0cd11ddb0e" alt="" width="289"><figcaption><p>Sektion-Typ (Größenmodus)</p></figcaption></figure>

Eine CMS-Sektion wird mit einem oder mehreren CMS-Blöcken befüllt. Mehr dazu erfährst du im folgenden Artikel.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F3qBjMFZPrJGfeEeyP9yM%2Fimage.png?alt=media&#x26;token=48bd1b3a-33e0-4b6d-892b-59c283cfa6d5" alt=""><figcaption><p>CMS-Sektion</p></figcaption></figure>

***

## CMS-Sektion hinzufügen

Ein neues Layout enthält automatisch eine CMS-Sektion. Um eine weitere Sektion vor einer bestehenden Sektion hinzuzufügen, klicke auf das ![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fxjodl2pIi6wp0qo3ZLeW%2Ficon-plus-circle.png?alt=media\&token=c4ab9f62-878a-465a-924a-c32588c38169) "Plus"-Icon (1) über der Sektion. Um eine Sektion nach einer bestehenden Sektion hinzuzufügen, klicke auf das "Plus"-Icon (2) unter der Sektion.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FvmO4DIyJzZt5VOBqPOC2%2Fadmin--cms-layout-add-section.png?alt=media&#x26;token=01fb1dae-d625-49c1-ab8c-8185776e0b46" alt=""><figcaption><p>CMS-Sektion hinzufügen</p></figcaption></figure>

Nun kannst du zwischen den beiden verfügbaren Arten von CMS-Sektionen ("Sidebar" und "Volle Breite") auswählen.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FmsNQB7uIMhaxMmSTrzQp%2Fimage.png?alt=media&#x26;token=8ade048a-9b89-43ca-8e12-c4b5b9e00870" alt=""><figcaption><p>CMS-Sektionen</p></figcaption></figure>

***

## Sektion-Einstellungen

Die Einstellungen für eine CMS-Sektion erreichst du über das ![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FaT0fv0HthauOYA2sqZ1n%2Ficon-layout.png?alt=media\&token=7b766db6-2839-486b-a2b4-455978315dc8) "Layout"-Icon (1) am linken Rand der entsprechenden Sektion. Ein Klick darauf öffnet die Sidebar (2) in welcher du die Sektions-Einstellungen findest. Hier kannst du beispielsweise den Namen und den Größenmodus der Sektion ändern.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fl63QMzf6n4x4YScVNIkw%2Fadmin--cms-section-settings.png?alt=media&#x26;token=c7cf2fea-aa13-427f-8a87-95bad86adfe4" alt=""><figcaption><p>Sektion-Einstellungen</p></figcaption></figure>

### Einstellungen

Du kannst jeder Sektion einen **Namen** geben und **CSS-Klassen** hinzufügen. Du kannst den **Größenmodus** jeder Sektion auswählen sowie eine **Hintergrundfarbe** und ein **Hintergrundbild** zuweisen. Im Abschnitt "**Sichtbarkeit**" kannst du zudem festlegen auf welchem Gerät die Sektion angezeigt werden soll.

***

## Sektion im Editor und der Storefront

Die Darstellung von CMS-Sektionen im Erlebniswelt-Editor weist in Shopware 6 etwas von der tastsächlichen Darstellung in der Storefront ab. Eine CMS-Sektion geht stets über die volle Breite (außer du nutzt das ThemeWare® Boxed-Layout) der Erlebniswelt. Der eigentliche Inhalt einer Sektion kann dann über die "volle Breite" oder "boxed" ("Zentrierter Inhalt") dargestellt werden.

Nachfolgend siehst du einen Vergleich einer CMS-Sektion im Erlebniswelt-Editor und in der Storefront.

1. CMS-Sektion (1) \[Hintergrundfarbe: ![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FbbUPnvjIWRoOCW87uze8%2Fimage.png?alt=media\&token=3c4edd8a-dfac-4424-b740-a7be928bc69c) #ffd181]
2. CMS-Block (2) \[Hintergrundfarbe: ![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FsrynjiWZq6qyzn55NSqA%2Fimage.png?alt=media\&token=5f3b90ed-8557-48d6-b2e1-6846aa296b53) #ff8d30]
3. CMS-Element (3)

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F15Tv9XnpM4Mv2zoufGf6%2Fcms-section-in-the-editor.png?alt=media&#x26;token=3f5aec11-5287-4cb4-975f-6a73b10e5bbc" alt=""><figcaption><p>Sektion im Erlebniswelt-Editor</p></figcaption></figure>

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FdpTJbPTOwR92Um9l7G9t%2Fcms-section-in-the-storefront.png?alt=media&#x26;token=66cbfefe-06a7-463f-9790-f0edb569f72a" alt=""><figcaption><p>Sektion in der Storefront ("Zentrierter Inhalt")</p></figcaption></figure>

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fh2wX7tDlFPmhbw9KECnG%2Fimage.png?alt=media&#x26;token=65ee68d4-fcab-45ae-825b-091cd51fba42" alt=""><figcaption><p>Sektion in der Storefront ("Volle Breite")</p></figcaption></figure>

***

#### Weiterführende Informationen

Mehr Informationen zum Thema "Erlebniswelten" in Shopware 6 findest du in der Shopware-Dokumentation:

{% embed url="<https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten>" %}
Shopware Dokumentation: Erlebniswelten
{% endembed %}