CSS-Klassen für Sektionen über die volle Breite

In dieser Anleitung erfährst du, wie du die Breite von CMS-Sektionen und CMS-Blöcken mit den ThemeWare® CSS-"max-width"-Klassen und den CSS-Boxed-Klassen modifizieren kannst.

Boxed-Klassen – CSS-Klassen für Full-width-Sektionen

Da die CSS-Klasse container nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten.

Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)

ThemeWare® CSS-Boxed-Klassen

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-boxed-content	Sektion	Setzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration.
twt-cms-block-boxed	Block	Setzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px).

Beispiele

"Full with"-Sektion mit zentrierten CMS-Blöcken

"Full with"-Sektion mit einem spezifischen, zentrierten CMS-Block

max-width-Klassen – Breite von CMS-Sektionen/-Blöcken

ThemeWare® bietet dir verschiedene CSS-"max-width"-Klassen um die maximale Breite von CMS-Sektionen/-Blöcken zu definieren.

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 "max-width"-Klassen (optional)

ThemeWare® CSS-"max-width"-Klassen

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-max-width	Sektion, Block	Setzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration.
twt-cms-max-width-500	Sektion, Block	Setzt die maximale Breite auf 500px.
twt-cms-max-width-576	Sektion, Block	Setzt die maximale Breite auf 576px.
twt-cms-max-width-600	Sektion, Block	Setzt die maximale Breite auf 600px.
twt-cms-max-width-700	Sektion, Block	Setzt die maximale Breite auf 700px.
twt-cms-max-width-768	Sektion, Block	Setzt die maximale Breite auf 768px.
twt-cms-max-width-800	Sektion, Block	Setzt die maximale Breite auf 800px.
twt-cms-max-width-900	Sektion, Block	Setzt die maximale Breite auf 900px.
twt-cms-max-width-992	Sektion, Block	Setzt die maximale Breite auf 992px.
twt-cms-max-width-1000	Sektion, Block	Setzt die maximale Breite auf 1000px.
twt-cms-max-width-1100	Sektion, Block	Setzt die maximale Breite auf 1100px.
twt-cms-max-width-1200	Sektion, Block	Setzt die maximale Breite auf 1200px.
twt-cms-max-width-1300	Sektion, Block	Setzt die maximale Breite auf 1300px.
twt-cms-max-width-1400	Sektion, Block	Setzt die maximale Breite auf 1400px.
twt-cms-max-width-1500	Sektion, Block	Setzt die maximale Breite auf 1500px.
twt-cms-max-width-1600	Sektion, Block	Setzt die maximale Breite auf 1600px.
twt-cms-max-width-1700	Sektion, Block	Setzt die maximale Breite auf 1700px.
twt-cms-max-width-1800	Sektion, Block	Setzt die maximale Breite auf 1800px.
twt-cms-max-width-1920	Sektion, Block	Setzt die maximale Breite auf 1920px.

Zuletzt aktualisiert am 18. November 2024