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

In dieser Anleitung erfährst du, wie du Abstände in bzw. von CMS-Sektionen und CMS-Blöcken mit ThemeWare® CSS-Abstandsklassen modifizieren kannst.

Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke

ThemeWare® bietet dir diverse CSS-Abstandsklassen für CMS-Sektionen und 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-Abstandsklassen laden (optional)

Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => Erweiterte CSS-Abstandsklassen laden (optional)

ThemeWare® CSS-Abstandsklassen

Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände in Erlebniswelten zu definieren.

Die ThemeWare® CSS-Abstandsklassen werden nach dem folgenden Muster benannt:

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

Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"

Bootstrap 4 vs. Bootstrap 5

Beim Update von Bootstrap 4 auf Bootstrap 5 (ab Shopware 6.5) wurden einige Klassen umbenannt um logische Eigenschaftennamen anstelle von Richtungsnamen zu verwenden.

Ab Shopware 6.5 hast du in ThemeWare® daher die Möglichkeit zu wählen ob du die alte Bootstrap 4 oder die neue Bootstrap 5 Schreibweise nutzen möchtest:

Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => Feld "CSS-Abstandsklassen laden (optional)"
- Bootstrap 4
- Bootstrap 5 (default)

Nutzt du die alte Schreibweise und möchtest diese nicht überall ändern, lade einfach die CSS-Abstandsklassen für Bootstrap 4. Neue ThemeWare® Installationen laden automatisch die Bootstrap 5 Abstandsklassen.

Nachfolgend findest du den Aufbau für beide Varianten:

Bootstrap 5 (Shopware 6.5)

Aufbau	Beschreibung
twt	ThemeWare® Prefix
-	Trennzeichen
m	Eigenschaft: m => Margin (Außenabstand) p => Padding (Innenabstand)
t	Seiten: t => Top (oben) e => End (rechts) b => Bottom (unten) s => Start (links) x => End/Start (links und rechts) y => Top/Bottom (oben und unten) Keine Angabe => für alle vier Seiten
-	Trennzeichen
md	Breakpoint: (optional) sm => ab 576px md => ab 768px lg => ab 992px xl => ab 1200px Keine Angabe => ab 0px
-	Trennzeichen
n	Negativer Wert (nur Margin): (optional) n => Wert wird negativ verwendet (-x Pixel) Keine Angabe => wird positiv verwendet
2	Größe: 0 => 0 Pixel 1 => 10 Pixel 2 => 20 Pixel 3 => 30 Pixel 4 => 40 Pixel 5 => 50 Pixel 6 => 60 Pixel 7 => 70 Pixel 8 => 80 Pixel 9 => 90 Pixel auto

Beispiele

// Abstandsklassen:
twt-p-3       // padding: 30px
twt-px-4      // padding: 0 40px
twt-ms-1      // margin-left: 10px
twt-me-2      // margin-right: 20px
twt-mt-n3     // margin-top: -30px

// Erweiterte Abstandsklassen:
twt-m-md-4    // margin: 40px (ab 768px)
twt-mt-md-n2  // margin-top: -20px (ab 768px)

Bootstrap 4 (Shopware 6.4)

Aufbau	Beschreibung
twt	ThemeWare® Prefix
-	Trennzeichen
m	Eigenschaft: m => Margin (Außenabstand) p => Padding (Innenabstand)
t	Seiten: t => Top (oben) r => Right (rechts) b => Bottom (unten) l => Left (links) x => Left/Right (links und rechts) y => Top/Bottom (oben und unten) Keine Angabe => für alle vier Seiten
-	Trennzeichen
md	Breakpoint: (optional) sm => ab 576px md => ab 768px lg => ab 992px xl => ab 1200px Keine Angabe => ab 0px
-	Trennzeichen
n	Negativer Wert (nur Margin): (optional) n => Wert wird negativ verwendet (-x Pixel) Keine Angabe => wird positiv verwendet
2	Größe: 0 => 0 Pixel 1 => 10 Pixel 2 => 20 Pixel 3 => 30 Pixel 4 => 40 Pixel 5 => 50 Pixel 6 => 60 Pixel 7 => 70 Pixel 8 => 80 Pixel 9 => 90 Pixel auto

Beispiele

// Abstandsklassen:
twt-p-3       // padding: 30px
twt-px-4      // padding: 0 40px
twt-ml-1      // margin-left: 10px
twt-mr-2      // margin-right: 20px
twt-mt-n3     // margin-top: -30px

// Erweiterte Abstandsklassen:
twt-m-md-4    // margin: 40px (ab 768px)
twt-mt-md-n2  // margin-top: -20px (ab 768px)

Hinweis: Du kannst die ThemeWare® "CSS-Abstandsklassen" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen"".

Zuletzt aktualisiert am 20. November 2024