# ThemeWare® CSS-Klassen für Erlebniswelten

Mit ThemeWare® stehen dir viele zusätzliche CSS-Klassen für Erlebniswelten zur Verfügung welche dir noch mehr Layout-Möglichkeiten bieten.

Diese CSS-Klassen können in den Erlebniswelten (Hauptnavigation "Inhalte" => "Erlebniswelten") über die Sektion- und Block-Einstellungen verwendet werden:

![Block-Einstellungen im Erlebniswelt-Editor](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FW9l6Y5BtG4K5w8OHfwpE%2F2022-01-28_11h41_32.png?alt=media\&token=f60730f9-ba5c-4233-95c5-6b00f9fae949)

Der der Übersichtlichkeit halber gibt es zu einigen Themen separate Artikel. Die Links findest du im entsprechenden Absatz.

Zusätzlich findest du zu allen Themen Anwendungsbeispiele in unseren Demoshops.

{% hint style="success" %}
**Tipp**: Es ist möglich verschiedene Effekte zu kombinieren indem mehrere Klassen in einen Block angewendet werden.
{% endhint %}

{% hint style="info" %}
**Hinweis**: Fehlt dir eine CSS-Klasse aktualisiere ThemeWare® auf die neuste Version.
{% endhint %}

***

## ThemeWare® CMS-Styling

ThemeWare® nutzt ein vordefiniertes Styling für CMS-Blöcke. Durch diese sogenannte "ThemeWare® CMS-Styling" erhalten alle CMS-Blöcke in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (= boxed) ein Rahmenfarbe, eine Hintergrundfarbe und einen Außenabstand nach unten.

Dieses Styling lässt sich zum einen konfigurieren (ab Version 0.3.1), zum anderen kannst du das "ThemeWare® CMS-Styling" für verschiedene Seitentypen in der Konfiguration aktivieren bzw. deaktivieren.

Doch damit noch nicht genug: Es ist zudem möglich über CSS-Klassen das "ThemeWare® CMS-Styling" für bestimmte Blöcke zu nutzen oder gezielt nicht zu benutzen. Dafür stehen dir die folgenden Klassen zur Verfügung:

**Beispiel**

![Links: mit ThemeWare® CMS-Styling | rechts: ohne ThemeWare® CMS-Styling](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FsGeJCHuoLAhwklPps6n4%2Fimage.png?alt=media\&token=2c9108a5-376c-49a2-b032-10711c9174fc)

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="themeware-cms-styling-fuer-erlebniswelten" %}
[themeware-cms-styling-fuer-erlebniswelten](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/themeware-cms-styling-fuer-erlebniswelten)
{% endcontent-ref %}

***

## Abstandsklassen für CMS-Sektionen/-Blöcke

Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände von CMS-Sektionen/-Blöcken zu definieren.

Die Abstandsklassen werden nach dem folgenden Muster benannt:

```css
// Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Größe} // für xs

// Erweiterte Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl
```

#### Beispiel

<div data-full-width="false"><figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F4A5rNlwtMFrWMSATZA0m%2Fimage.png?alt=media&#x26;token=17bd35b0-9ef8-4bff-8583-6e7e887affa5" alt=""><figcaption><p>Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"</p></figcaption></figure></div>

Mehr Informationen dazu findest du in folgendem Artikel:

{% content-ref url="css-abstandsklassen-fuer-erlebniswelten" %}
[css-abstandsklassen-fuer-erlebniswelten](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/css-abstandsklassen-fuer-erlebniswelten)
{% endcontent-ref %}

***

## Boxed-Klassen für Sektionen über die volle Breite

Da die CSS-Klasse `container` nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten.

#### Beispiel

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FsJUimakQqro6M52sHIYY%2Fimage.png?alt=media&#x26;token=ba81363f-7c3d-4250-b70a-87bff4bc7a94" alt=""><figcaption><p>Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)</p></figcaption></figure>

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="css-klassen-fuer-sektionen-ueber-die-volle-breite" %}
[css-klassen-fuer-sektionen-ueber-die-volle-breite](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/css-klassen-fuer-sektionen-ueber-die-volle-breite)
{% endcontent-ref %}

***

## Dekorationsklassen für Bilder

ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken zur Verfügung. Mit diesen CSS-Klassen kannst du Bilder mit Rahmen oder Schatten dekorieren oder die Bilder abrunden.

**Beispiel**

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FdW0XZtyzA9qYm4Z9ifxY%2Fimage.png?alt=media&#x26;token=fed2449d-b042-433d-ad71-c6043281b640" alt=""><figcaption><p>Rechts: Dekorationsklasse "twt-cms-image-border-semi"</p></figcaption></figure>

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern" %}
[bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern)
{% endcontent-ref %}

***

## Hover-Effekte für Bilder

Mit ThemeWare® erhältst du eine große Auswahl an CSS-Hover-Klassen, welche dir verschiedenste Hover-Effekte für Bilder in CMS-Blöcken ermöglichen.

**Beispiel**

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F9Tah2U8VFSokCLYcoVvE%2Fimage.png?alt=media&#x26;token=6ac1496f-4acd-4e0d-9607-22cbb437fd64" alt=""><figcaption><p>Rechts: Hover-Effekt "twt-cms-image-hover-grayscale"</p></figcaption></figure>

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="bilder-in-cms-bloecken-mit-hover-effekten-verschoenern" %}
[bilder-in-cms-bloecken-mit-hover-effekten-verschoenern](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-hover-effekten-verschoenern)
{% endcontent-ref %}

***

## Max-width-Klassen für Sektionen über die volle Breite

ThemeWare® bietet dir verschiedene CSS-"max-width"-Klassen um die maximale Breite von CMS-Sektionen/-Blöcken zu definieren.

#### Beispiel

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FsJUimakQqro6M52sHIYY%2Fimage.png?alt=media&#x26;token=ba81363f-7c3d-4250-b70a-87bff4bc7a94" alt=""><figcaption><p>Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)</p></figcaption></figure>

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="css-klassen-fuer-sektionen-ueber-die-volle-breite" %}
[css-klassen-fuer-sektionen-ueber-die-volle-breite](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/css-klassen-fuer-sektionen-ueber-die-volle-breite)
{% endcontent-ref %}

***

## CSS-Scroll-Animationen

ThemeWare® bietet dir eine umfangreiche Auswahl an CSS-Animationen für deine Erlebniswelten. Nutze dafür die entsprechende CSS-Klasse an CMS-Blöcken oder gewünschten HTML-Elementen.

| CSS-Klasse            | Bereich | Funktionsbeschreibung                                                                                                                                               |
| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **twt-cms-animation** | Block   | Animiert einen CMS-Block und HTML-Elemente mit einer in der Theme-Konfiguration ausgewählten Animation sobald das Element in den sichtbaren Bereich gescrollt wird. |

#### Beispiel

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FmRLOC0tXPWDL3p8mVrQG%2Fimage.png?alt=media&#x26;token=75ea1fe1-0a8e-45d2-9ac8-5826470d0f5d" alt=""><figcaption><p>Rechts: CSS-Scroll-Animation "Fade-in"</p></figcaption></figure>

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="erlebniswelten-mit-css-animationen-verschoenern" %}
[erlebniswelten-mit-css-animationen-verschoenern](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/erlebniswelten-mit-css-animationen-verschoenern)
{% endcontent-ref %}

### Animationen (für erfahrende Anwender)

Ergänzend liefert dir ThemeWare® eine Sammlung an CSS-Klassen für Animationen für erfahrende Anwender.

Mehr Informationen dazu findest du in folgendem Artikel:

{% content-ref url="../../profiwissen/zusaetzliche-css-klassen-fuer-animationen" %}
[zusaetzliche-css-klassen-fuer-animationen](https://wiki.themeware.design/wissensdatenbank/profiwissen/zusaetzliche-css-klassen-fuer-animationen)
{% endcontent-ref %}

***

## Spaltenabstände in CMS-Blöcken

ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Column-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst.

**Beispiel**

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FzsqVCS9sQdJnmn5XmMve%2Fimage.png?alt=media&#x26;token=081ec83d-a3e6-4996-87f6-6049c860b86b" alt=""><figcaption><p>Links: Standard Spaltenabstand | Rechts: twt-cms-col-padding-10</p></figcaption></figure>

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="spaltenabstaende-in-cms-bloecken-anpassen" %}
[spaltenabstaende-in-cms-bloecken-anpassen](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen)
{% endcontent-ref %}

***

## Überschriften in CMS-Blöcken

Mit ThemeWare® erhältst du individuelle CSS-Headline-Klassen um die aus unseren Shopware 5 Themes bekannten Überschriften auch in deinen Shopware 6 Erlebniswelten nutzen zu können.

**Beispiel**

![Überschriften in CMS-Blöcken](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FiylmNACNWLwJByFaG9iv%2Fimage.png?alt=media\&token=2e911ee0-d3d3-4ab8-b2dd-98678a63d3d5)

Mehr Informationen dazu findest du in unserem Artikel:

{% content-ref url="ueberschriften-in-cms-bloecken-gestalten" %}
[ueberschriften-in-cms-bloecken-gestalten](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/ueberschriften-in-cms-bloecken-gestalten)
{% endcontent-ref %}

***

## Demoshops

### Startseiten der Demoshops (Home) <a href="#themeware-erlebniswelten" id="themeware-erlebniswelten"></a>

Für die Erlebniswelten der Startseiten unserer Demoshops nutzen wir teils individuelle CSS-Klassen um bestimmte Layouts zu ermöglichen. In diesem Abschnitt stellen wir dir diese Klasse vor.

{% hint style="info" %}
**Hinweis**: Eine "Schritt-für-Schritt PDF-Anleitung" für unsere Erlebniswelten erhältst du kostenfrei über die ThemeWare® Utilities.
{% endhint %}

| CSS-Klasse                                  | Bereich | Funktionsbeschreibung                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **twt-custom-cms-text-two-column-usp-list** | Block   | Hebt eine Liste mit Vorteilen im rechten Block eines "Zwei Spalten Elements" mit grünen Harken hervor.                                                                                                                                                                                                                 |
| **twt-custom-cms-imagetext-teaser-1**       | Sektion | Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" (Bild links und Text rechts) im Sektions-Größenmodus "Volle Bereite". Optimal zur Anzeige eines Teasers/Banners.                                                                                                                            |
| **twt-custom-cms-about-photo**              | Block   | Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" mit einem Bild links und weiteren Textinformationen rechts. Optimal zur Anzeige eines Ansprechpartners. Zusätzlich kann die Klasse "dark" verwendet werden damit der Hintergrund in einer sehr dunklen Erlebniswelt in hell angezeigt wird. |

### Overlay-Banner (Höhenluft)

Dieser Overlay-Banner ist mit den Standard CMS-Elementen von Shopware möglich und braucht kein spezielles CMS-Element.

{% hint style="info" %}
**Hinweis**: Ein Beispiel findest du in der Kategorie "Höhenluft & Abenteuer" in unseren Demoshops: [Höhenluft & Abenteuer](https://demo.themeware.design/modern/Hoehenluft-Abenteuer/)
{% endhint %}

| CSS-Klasse                                   | Bereich | Funktionsbeschreibung                                                                                                                                                 |
| -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **twt-custom-cms-element-overlay-primary**   | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.                |
| **twt-custom-cms-element-overlay-secondary** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.              |
| **twt-custom-cms-element-overlay-success**   | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.      |
| **twt-custom-cms-element-overlay-info**      | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. |
| **twt-custom-cms-element-overlay-warning**   | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.     |
| **twt-custom-cms-element-overlay-danger**    | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.      |
| **twt-custom-cms-element-overlay-light**     | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.                 |
| **twt-custom-cms-element-overlay-dark**      | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.              |

**Beispiel**

![CSS-Klasse: twt-custom-cms-element-overlay-primary](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FRqohjfPTWDJU3DA1My1Q%2Fimage.png?alt=media\&token=9609b68b-45ce-4638-a51a-6ff06aa00a68)

## Sonstige

In diesem Abschnitt findest du weitere Klassen die bei der Gestaltung deiner individuellen Erlebniswelten hilfreich sein können.

| CSS-Klasse    | Bereich        | Funktionsbeschreibung                                                                                                                                                                                                                                                                                         |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **container** | Block, Sektion | In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops. |

**Beispiele**

![Beispiel mit "container"-Klasse](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FF1av2gEd678CzKywF1hy%2Fimage.png?alt=media\&token=9c42415b-5eca-43db-81e0-d993424dd3f1)

![Beispiel ohne "container"-Klasse](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FYqfHxySahntewEpiB1l7%2Fimage.png?alt=media\&token=119a78f5-6dbd-45e8-9aa9-37bb1359fefb)