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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.