Spalten-CSS-Klassen in ThemeWare® CMS-Elementen
In diesem Artikel erfährst du, wie du die Konfiguration "CSS-Klasse (Spalte)" in CMS-Elementen von ThemeWare® nutzen kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
Spalten-CSS-Klassen
Bestimmte CMS-Blöcke von ThemeWare® (z.B. "Sechs Spalten (Individuell)") können die Experten-Konfiguration "CSS-Klasse (Spalte)" bestimmter CMS-Element (z.B. "Runder Teaser") übernehmen.
Dadurch kannst du die Spaltenanzahl in verschiedenen Viewports festlegen, vorausgesetzt du kennst dich ausreichend mit dem Grid-System von Bootstrap aus.
Wichtig: Bitte beachte, dass sich diese Funktion derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.
Beispiel
Standardmäßig haben die "individuellen" CMS-Blöcke ihr vorgesehenes Spaltenlayout. Hier zum Beispiel der 6-Spalter:
Mit der Experten-Konfiguration "CSS-Klasse (Spalte)" im Tab "Erweitert" des CMS-Elementes (hier "Runder Teaser"), kannst du mit Bootstrap-Klassen (z.B. col-3) eine Spaltenbreite für das entsprechende Element definieren.
Nun sieht der Block wie folgt aus:
Tipp: Der Abstand zwischen den beiden Zeile kann, wie gehabt, über die gängigen Abstandsklassen (hier twt-cms-col-margin-20) ergänzt werden.
Wie du sicherlich bemerkt hast, sind alle Spalten üblicherweise links ausgerichtet. Auch dies kannst du beeinflussen.
Ergänzende CSS-Klassen für den Spalten-CMS-Block
Zusätzlich zu den CSS-Klassen, welche du in den CMS-Elementen einsetzen kannst, kannst du auch CSS-Klassen an den CMS-Blöcken nutzen um beispielsweise die horizontale Ausrichtung der Spalten im CMS-Block definieren.
Horizontale Ausrichtung
Nutze dafür einfach die entsprechenden Bootstrap CSS-Klassen (siehe justify-content-...) im entsprechenden CMS-Block. Da die Block-Klassen nicht an der – in diesem Fall – benötigten Stelle platziert werden, verwende bitte den Prefix twt- (also twt-justify-content-...) . Diese Klassen werden dann automatisch von den "individuellen" CMS-Blöcken erkannt und an die row weitervererbt.
Verwendest du die CSS-Klasse twt-justify-content-center im CMS-Block sieht unser Beispiel nun wie folgt aus:
Flexible Spalten
Möchtest du keine Spaltenbreiten definieren, kannst du die Klasse twt-flex-columns im CMS-Block verwenden. Hierbei richten sich die Spalten nach der Größe der entsprechenden CMS-Elemente (diese wird i.d.R. durch die verwendeten Bilder vorgegeben).
In unserem Beispiel sind die Thumbnails der Bilder 227px groß. Dies führt zu folgendem Ergebnis:
Über die Konfiguration "Maximale Breite" im Bereich "Allgemein" vom Tab "Layout", kannst du die maximale Breite eines Teasers definieren. Stellst du hier z.B. 140px ein werden die Teaser in unserem Beispiel wie folgt dargestellt:
Last updated
