Spaltenabstände in CMS-Blöcken anpassen

In dieser Anleitung erfährst du, wie du Spaltenabstände in CMS-Blöcken mit ThemeWare® CSS-Column-Klassen anpassen kannst.

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)

Tipp: Anwendungsbeispiele findest du in unseren Demoshops.

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

---

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.

Hinweis: Wie du die CSS-Klassen einfügst erfährst du im Artikel ThemeWare® CSS-Klassen für Erlebniswelten.

Details

Beispiel

Links: Standard Spaltenabstand | Rechts: twt-cms-col-padding-10

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".

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.

Hinweis: Wie du die CSS-Klassen einfügst erfährst du im Artikel ThemeWare® CSS-Klassen für Erlebniswelten.

Details

Beispiele

Links: Standard | Rechts: twt-cms-col-margin-15

---

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:

Abstände in CMS-Blöcken anpassen

---

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:

Abstände in CMS-Blöcken anpassen