> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/text-und-bild/text-und-bild-ueberlagernd.md).

# Bild & Text überlagernd

Das **ThemeWare® "Bild & Text überlagernd"**-Element stellt ein Bild mit einer darüber liegenden Text-Box dar. Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen.

<figure><img src="/files/OjxvsO4x8TUqxbf7276D" alt=""><figcaption><p>ThemeWare® "Bild &#x26; Text überlagernd"-Element</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
{% endhint %}

{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Element konfigurieren

Das ThemeWare® "Bild & Text überlagernd"-Element kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das gewünschte CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

<figure><img src="/files/qufaZK5CJB6L1QmaXi0Z" alt=""><figcaption><p>ThemeWare® "Bild &#x26; Text überlagernd"-Element konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Bild & Text überlagernd"-Element ist recht selbsterklärend. Die **Überschrift**, der **Text** und das **Bild** sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.

### Allgemein

Im Tab "Allgemein" konfigurierst du den Content des Elementes.

> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du die **Überschrift** und den **Text** für das Element eingeben. Der Text ist ein Pflichtfeld.
>
> **Bild**
>
> Im Abschnitt "Bild" definierst du das Bild des Elementes. Das Bild ist ein Pflichtfeld. Zudem kannst du den **Anzeigemodus** und die **Minimale Höhe** (Standard: `340px`, nur im Modus "Cover" sichtbar) konfigurieren.
>
> **Barrierefreiheit**
>
> Im Abschnitt "Barrierefreiheit" kannst du den **Alt-Text** für das Bild eingeben und festlegen, ob das Bild als **dekorativ** markiert werden soll.

### Layout

Im Tab "Layout" kannst du das Aussehen des Elementes konfigurieren.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du den **Layout-Typ** ("Standard" oder "Innerhalb"), die **Anordnung** ("Standard" oder "Umgekehrt") und die **Hintergrundfarbe** konfigurieren.
>
> **Content (Inhalt)**
>
> Im Abschnitt "Content" kannst du die **Textausrichtung** konfigurieren.
>
> **Überschrift**
>
> Im Abschnitt "Überschrift" kannst du die **Schriftart** und die **Textfarbe** der Überschrift konfigurieren.
>
> **Text**
>
> Im Abschnitt "Text" kannst du die **Schriftart** und die **Textfarbe** des Textes konfigurieren.
>
> **Bild**
>
> Im Abschnitt "Bild" kannst du die **Bildposition** (Object-Position) konfigurieren.
>
> **Content-Overlay**
>
> Im Abschnitt "Content-Overlay" kannst du die **Hintergrundfarbe** des Text-Overlays konfigurieren (Standard: `rgba(255, 255, 255, 0.5)`).

<figure><img src="/files/PU1ch9iXWFXiyNiD8jdi" alt=""><figcaption><p>Elemente vom "Bild &#x26; Text überlagernd"-Element</p></figcaption></figure>

### SEO & Pagespeed

Im Tab "SEO & Pagespeed" kannst du den **HTML-Tag** und die **HTML-Tag-Klasse** für die Überschrift konfigurieren sowie die **Fetchpriorität** und das **Lazy Loading** vom Bild einstellen.

### Erweitert

Du kannst zwar jedes HTML-Element unserer CMS-Elemente über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen. Es stehen separate Felder für die **CSS-Klasse** des Elementes, der **Überschrift** und des **Textes** zur Verfügung.

***

## Datenzuordnung (folgt)

Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:

* **Bild** - z.B. Kategoriebild oder Produktbild
* **Überschrift** - z.B. Kategoriename oder Produktname
* **Text** - z.B. Kategoriebeschreibung oder Produktbeschreibung