> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern.md).

# 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)

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FdW0XZtyzA9qYm4Z9ifxY%2Fimage.png?alt=media&amp;token=fed2449d-b042-433d-ad71-c6043281b640" alt=""><figcaption><p>Rechts: Dekorationsklasse "twt-cms-image-border-semi"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Bilder-in-CMS-Bloecken-mit-Dekorationsklassen-verschoenern/).
{% endhint %}

***

## **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. |

{% hint style="info" %}
**Hinweis**: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md).
{% endhint %}

**Beispiel**

![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FAyHZgQVLTGHMPauWQtgk%2Fimage.png?alt=media\&token=29b39194-5de1-4257-8f29-6f4989dd429c)

### 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**

![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FI4yB4TzG7nVIUirz6yIs%2Fimage.png?alt=media\&token=7d5c8a55-f7c1-48df-9789-3eaaad1da411)

### 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**

![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F159aZxmi8kpXyhet2dm3%2Fimage.png?alt=media\&token=41aaa0f2-29ac-4d4f-bc86-fac6629bc447)

### 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**

![](https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fgit-blob-67d5e609000e152386fa53c577e7b59e4befd1cb%2Fcss-border-radius.png?alt=media)

{% hint style="info" %}
**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".
{% endhint %}