Navigation

ThemeWare® Wissensdatenbank

Abstände in CMS-Blöcken anpassen

In dieser Anleitung erfährst du, wie du Abstände von Elementen (= Slots) in CMS-Blöcken mit den ThemeWare® CSS-Gap-Klassen anpassen kannst.

Gap-Klassen – Abstände in CMS-Blöcken

ThemeWare® bietet dir diverse Gap-Klassen für CMS-Blöcke. In dieser Anleitung stellen wir dir diese CSS-Klassen vor.

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)

ThemeWare® CSS-Gap-Klassen

ThemeWare® CMS Grid-Blöcke

Elemente in CMS Grid-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® CMS Grid-Blöcke sowie die Standard Grid-Blöcke von Shopware hinzugefügt.

CSS-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

Abstände in CMS-Blöcken anpassen, Abbildung 1

ThemeWare® CMS Spalten-Blöcke

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

Details

Abstände in CMS-Blöcken anpassen, Abbildung 2

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

Zuletzt aktualisiert am

Diese Seite im Netz: /wiki/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen · ThemeWare® Service Portal, service.themeware.design