> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Bild und Text - Wide

## Allgemeine Beschreibung

Dieses Portlet ermöglicht es, Texte (Überschrift und Textinhalt) und Bilder nebeneinander zu platzieren. Es bietet eine flexible Möglichkeit, Inhalte ansprechend und strukturiert darzustellen. Ob für Produktbeschreibungen, Blogartikel oder Marketingkampagnen – mit "Bild und Text Wide" kannst du visuell ansprechende und informative Layouts erstellen.

## Einsatzmöglichkeiten (Inspiration)

**Visuelle Präsentation:** Stelle deine Produkte mit einer Kombination aus Text und Bild vor. Zeige detaillierte Beschreibungen neben hochwertigen Bildern, um die wichtigsten Merkmale hervorzuheben.

## Featureübersicht

* **Flexibles Layout:** Platziere Bilder und Texte nebeneinander für eine klare und ansprechende Darstellung.
* **Überschriften und Textinhalte:** Füge sowohl Überschriften als auch detaillierte Textinhalte ein, um deine Botschaft klar zu kommunizieren.
* **Bilder:** Integriere hochauflösende Bilder, die neben dem Text erscheinen und das Layout aufwerten.
* **Responsive Design:** Das Layout passt sich automatisch an verschiedene Bildschirmgrößen an, um eine optimale Darstellung auf allen Geräten zu gewährleisten.

***

## Settings

### Textinhalt

<Frame>
  <img src="https://mintcdn.com/dzm/ufGCPuo3Nn1X-GwK/images/image-146.png?fit=max&auto=format&n=ufGCPuo3Nn1X-GwK&q=85&s=f3a68c2749efa64456860594dec88da7" alt="Image" width="1188" height="1202" data-path="images/image-146.png" />
</Frame>

***

**Überschrift Inhalt:** Gebe hier den Inhalt der Überschrift ein.

**Tipp: Es können HTML-Tags verwendet werden.**

**HTML-Tag der Überschrift:** Bestimmt, welchen HTML-Tag die Überschrift nutzt. Nützlich für SEO-freundliche Strukturen.

**Größe der Überschrift:** Bestimmt, wie groß die Überschrift dargestellt wird. Orientiert sich an den Vorgaben (h1-h6 und p) des aktuellen Themes.

**Schrift-Dicke:** Bestimmt die font-weight (CSS) der Überschrift.

**Position:** Bestimmt an welcher Position die Überschrift ausgegeben wird. Auswahl zwischen:

* links
* zentriert
* rechts

**Textfarbe der Überschrift:** Wähle hier die Textfarbe der Überschrift mittels ColorPicker aus.

**Hintergrundfarbe:** Hier kannst du eine passende Hintergrundfarbe für den Textinhalt mittels ColorPicker auswählen.

**Textinhalt:** Gebe hier zusätzlichen Textinhalt ein. Dieser wird unterhalb der Überschrift dargestellt.

***

### Bild

<Frame>
  <img src="https://mintcdn.com/dzm/ufGCPuo3Nn1X-GwK/images/image-147.png?fit=max&auto=format&n=ufGCPuo3Nn1X-GwK&q=85&s=d4bf430ff1464c29ef93a6885999e507" alt="Image" width="1188" height="708" data-path="images/image-147.png" />
</Frame>

***

**Bild:** Füge hier ein passendes Bild hinzu. Achte auf einen transparenten Hintergrund bzw. ein freigestelltes Bild, damit das Portlet seine volle Wirkung entfalten kann.

***

### Button Settings

<Frame>
  <img src="https://mintcdn.com/dzm/ufGCPuo3Nn1X-GwK/images/image-148.png?fit=max&auto=format&n=ufGCPuo3Nn1X-GwK&q=85&s=1c93212f25ac6b5764b24b9f52716353" alt="Image" width="888" height="1212" data-path="images/image-148.png" />
</Frame>

***

**Button als Link oder Funktionsbutton verwenden:** Auswahl zwischen:

* Linkbutton = Wird verwendet, um auf eine in- bzw. externe URL zu verweisen. Durch Angabe einer #-ElementID kann auch auf ein bestimmtes Element innerhalb der Seite verwiesen werden ➝ Buttonlink = Legt die Zielseite/ das Zielelement des Buttons fest
* Funktionsbutton = Wird verwendet um bestimmte Events auszulösen. So kann beispielsweise unser PopUp-Container getriggert werden. ➝ EventID = Hier kann eine eindeutige EventID vergeben werden, die an anderen Stellen als Auslöser definiert werden kann

**Buttontext:** Definiert den Textinhalt, der auf dem Button steht

**Buttontyp**: Auswahl zwischen:

* Full = Vollständig gefüllter Button
* Outlined = Umrandeter Button ohne Füllung
* Plain Text = Button ohne Umrandung und Füllung
* Link = Lässt den Button wie einen Link aussehen

**Buttonfarbe:** Auswahl zwischen:

* Primary
* Secondary
* Warning
* Danger
* Info
* Sucess
* Dark
* Light **Diese Farben orientieren sich an deinem Template und können nur dort geändert werden**

**Buttonbreite:** Auswahl zwischen:

* Content Width = Die Breite orientiert sich an dem Inhalt des Buttons
* Full Width = Der Button verwendet immer die maximal mögliche Breite

**Buttonausrichtung:** Auswahl zwischen:

* links, zentriert und rechts **Außerdem lässt sich die Ausrichtung je nach Displaygröße steuern (XS als kleinste Displaygröße; XL als größte Displaygröße)**

**Icon verwenden:** Auswahl zwischen:

* Nein = Es wird kein Icon verwendet
* Ja = Es öffnet sich eine Vielzahl an Icons zur Auswahl und ein Icon wird auf dem Button angezeigt

**Icon vor oder nach dem Text:** Auswahl zwischen:

* Vor dem Text = Icon wird vor dem Text angezeigt
* Nach dem Text = Icon wird nach dem Text angezeigt

***

***