Abstände in CMS-Blöcken anpassen

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

ThemeWare® "Grid" CMS-Blöcke

Elemente in "Grid" CMS-Blöcken haben in Shopware 6 einen fest definierten Abstand von 40px. Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.

Mit ThemeWare® 3.2 haben wir folgende CSS-Abstandsklassen für ThemeWare® "Grid" CMS-Blöcke sowie die Standard "Grid" CMS-Blöcke von Shopware hinzugefügt.

CSS-Klassen

Klasse	Bereich	Funktionsbeschreibung
twt-cms-grid-gap-0	Block	Setzt den Abstand in CMS-Blöcken auf 0 Pixel.
twt-cms-grid-gap-5	Block	Setzt den Abstand in CMS-Blöcken auf 5 Pixel.
twt-cms-grid-gap-10	Block	Setzt den Abstand in CMS-Blöcken auf 10 Pixel.
twt-cms-grid-gap-15	Block	Setzt den Abstand in CMS-Blöcken auf 15 Pixel.
twt-cms-grid-gap-20	Block	Setzt den Abstand in CMS-Blöcken auf 20 Pixel.
twt-cms-grid-gap-25	Block	Setzt den Abstand in CMS-Blöcken auf 25 Pixel.
twt-cms-grid-gap-30	Block	Setzt den Abstand in CMS-Blöcken auf 30 Pixel.
twt-cms-grid-gap-35	Block	Setzt den Abstand in CMS-Blöcken auf 35 Pixel.
twt-cms-grid-gap-40	Block	Setzt den Abstand in CMS-Blöcken auf 40 Pixel.
twt-cms-grid-gap-45	Block	Setzt den Abstand in CMS-Blöcken auf 45 Pixel.
twt-cms-grid-gap-50	Block	Setzt den Abstand in CMS-Blöcken auf 50 Pixel.

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

Details

---

ThemeWare® "Spalten" CMS-Blöcke

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

Details

Hinweis: Möchtest du die Abstände in mobilen Viewports separate anpassen nutze die separaten CSS-Spaltenabstandsklassen: Spaltenabstände in CMS-Blöcken anpassen