Bilder in CMS-Blöcken dekorieren

In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit ThemeWare® CSS-Dekorationsklassen verschönern kannst.

Image-Klassen – Dekorationsklassen für Bilder

ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken. 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 Bild-Dekorationen laden (optional)

Rechts: Dekorationsklasse "twt-cms-image-border-semi"

Tipp: Anwendungsbeispiele findest du in unseren Demoshops.

---

ThemeWare® CSS-Dekorationsklassen

Rahmen

Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-border bzw. twt-cms-image-border-solid	Block	Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.
twt-cms-image-border-semi	Block	Fügt Bildern in einem CMS-Block einen 12px dicken, halbtransparenten Rahmen hinzu.

Hinweis: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel ThemeWare® CSS-Klassen für Erlebniswelten.

Beispiel

Schatten

Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-box-shadow-sm	Block	Fügt Bildern in einem CMS-Block einen dezenten Schlagschatten hinzu.
twt-cms-image-box-shadow	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-lg	Block	Fügt Bildern in einem CMS-Block einen auffälligen Schlagschatten hinzu.

Beispiel

Schatten (erweitert)

Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-box-shadow-level-1	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-2	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-3	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-4	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-5	Block	Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.

Beispiel

Border-radius

Rundet Bilder in einem CMS-Block ab.

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-rounded	Block	Rundet Bilder in einem CMS-Block ab.

Beispiel

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