> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen.md).

# Spaltenabstände in CMS-Blöcken anpassen

## Column-Klassen – 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 – also die Abstände zwischen den einzelnen Elemente bzw. Spalten (= Slots).

> Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
>
> * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Spaltenabstände laden (optional)

{% hint style="success" %}
**Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Spaltenabstaende-in-CMS-Bloecken-anpassen/).
{% endhint %}

{% hint style="info" %}
**Hinweis**: Nutze für die Anpassung von Abständen in CMS-Blöcken gerne die neuen, intuitiveren CSS-Klassen von ThemeWare®: [Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md)
{% endhint %}

***

## ThemeWare® "Spalten" CMS-Blöcke

Spalten in CMS-Blöcken haben in Shopware 6 einen fest definierten Abstand von `40px` (2x `20px`). Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.

Die ThemeWare® Spaltenabstandsklassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware.

| CSS-Klasse                 | Bereich | Funktionsbeschreibung                                           |
| -------------------------- | ------- | --------------------------------------------------------------- |
| **twt-cms-col-padding-0**  | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel.  |
| **twt-cms-col-padding-5**  | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel.  |
| **twt-cms-col-padding-10** | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel. |
| **twt-cms-col-padding-15** | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel. |
| **-**                      | -       | 20 Pixel ist der Standard Spalten-Abstand.                      |
| **twt-cms-col-padding-25** | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel. |
| **twt-cms-col-padding-30** | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel. |
| **twt-cms-col-padding-35** | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel. |
| **twt-cms-col-padding-40** | Block   | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 40 Pixel. |

{% hint style="info" %}
**Hinweis**: Wie du die CSS-Klassen einfügst erfährst du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md).
{% endhint %}

#### Details

<figure><img src="/files/iooCOohBcwJORGjhdCK0" alt=""><figcaption></figcaption></figure>

#### Beispiel

<figure><img src="/files/PZjuF6JSyLQ07XLC7L2T" alt=""><figcaption><p>Links: Standard Spaltenabstand | Rechts: twt-cms-col-padding-10</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Spaltenabstände" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
{% endhint %}

### Mobile Darstellung

In mobilen Viewports werden Spalten untereinander dargestellt. Dabei haben Sie einen fest definierten Abstand von 0px. Mit ThemeWare® ab Version 2.1 stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.

Die CSS-Klassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware.

| Klasse                    | Bereich | Funktionsbeschreibung                                                   |
| ------------------------- | ------- | ----------------------------------------------------------------------- |
| **-**                     | -       | 0 Pixel ist der Standard Spalten-Abstand.                               |
| **twt-cms-col-margin-5**  | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel.  |
| **twt-cms-col-margin-10** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel. |
| **twt-cms-col-margin-15** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel. |
| **twt-cms-col-margin-20** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel. |
| **twt-cms-col-margin-25** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel. |
| **twt-cms-col-margin-30** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel. |
| **twt-cms-col-margin-35** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel. |
| **twt-cms-col-margin-40** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel. |
| **twt-cms-col-margin-45** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel. |
| **twt-cms-col-margin-50** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel. |
| **twt-cms-col-margin-55** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel. |
| **twt-cms-col-margin-60** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel. |
| **twt-cms-col-margin-65** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel. |
| **twt-cms-col-margin-70** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel. |
| **twt-cms-col-margin-75** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel. |
| **twt-cms-col-margin-80** | Block   | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 Pixel. |

{% hint style="info" %}
**Hinweis**: Wie du die CSS-Klassen einfügst erfährst du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md).
{% endhint %}

#### Details

<figure><img src="/files/ume32gRTu1Ae61WoPG6V" alt=""><figcaption></figcaption></figure>

#### Beispiele

<figure><img src="/files/YnQ9JmINi2EhZ51mH4Kb" alt=""><figcaption><p>Links: Standard | Rechts: twt-cms-col-margin-15</p></figcaption></figure>

***

## ThemeWare® "Grid" CMS-Blöcke

Du kannst die oben genannten CSS-Klassen für "Spalten"-Blöcke auch in "Grid"-Blöcken von ThemeWare® nutzen, wir haben für diese mit ThemeWare® 3.2.0 aber neue, intuitivere CSS-Klassen eingeführt und empfehlen künftig diese neuen CSS-Klassen zu nutzen.

Mehr Informationen dazu findest du in folgendem Artikel:

{% content-ref url="/pages/lzDqaCcoxDA4lVfJhP0i" %}
[Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md)
{% endcontent-ref %}

***

## Neue CSS-Klassen mit ThemeWare® 3.2

Mit ThemeWare® 3.2.0 haben wir neue CSS-Abstandsklassen für ThemeWare® "Grid" und "Spalten" CMS-Blöcke hinzugefügt. Diese kombinieren die Funktion der beiden oben genannten CSS-Klassen `twt-cms-col-padding` und `twt-cms-col-margin`.

Die neuen CSS-"Gap"-Klassen funktionieren in "Grids" und in den "Spalten"-Blöcken von ThemeWare®.

Mehr Informationen dazu findest du in folgendem Artikel:

{% content-ref url="/pages/lzDqaCcoxDA4lVfJhP0i" %}
[Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md)
{% endcontent-ref %}