> 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

## 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="/files/wC3hRN7xXh2JL0HymTCp" 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**

![](/files/DxNTamsEFs9xLgGRBETv)

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

![](/files/18emDtLxI2KzGqFq7aiX)

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

![](/files/ycntXBj0dPtVtp6dFJFx)

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

![](/files/SPJxAwxf1fzI6DWKpIW7)

{% 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 %}