SucheEnglishSupport anfordern

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.

PreviousCSS-Animationen für ErlebnisweltenNextErlebniswelten mit Bootstrap CSS-Klassen gestalten

Last updated

Was this helpful?