> ## 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 Content Box

# Allgemeine Beschreibung

Das "Bild Content Box" Portlet kombiniert ein Bild mit Überschrift, Text und optionalem Button in einer flexibel gestaltbaren Box. Das Bild kann dabei entweder als Hintergrund- oder als Produktbild dargestellt werden.

# Einsatzmöglichkeiten (Inspiration)

* **Themenboxen:** Kombiniere Bild und Text, um Themenwelten, Kategorien oder Aktionen vorzustellen.
* **Call-to-Action-Karten:** Nutze die Box inklusive Button, um Besucher gezielt weiterzuleiten.
* **Flexibles Bild-Text-Verhältnis:** Wähle je nach Design, ob Text neben, unter oder über dem Bild angezeigt wird.

***

# Settings:

## Settings

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-settings.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=d8519302a61aa8af8407bcb96faabfaf" alt="Settings" width="1430" height="574" data-path="images/opc-plus-bild-content-box-settings.jpg" />
  </Frame>
</div>

**Design:** Wähle das grundlegende Layout der Box (z. B. "Bild + Text darunter").

**Schatten verwenden:** Aktiviere diese Option, um der Box einen Schatten zu geben.

***

## Box

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-box.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=41f2c6e77216d72670abdeac8dbf853b" alt="Box" width="1438" height="466" data-path="images/opc-plus-bild-content-box-box.jpg" />
  </Frame>
</div>

**Größe der Box festlegen nach...:** Lege fest, wie die Höhe der Box bestimmt wird:

* Automatisch nach Content
* Contenthöhe erzwingen
* Fixe Höhe
* Dynamisch
* Verhältnis

***

## Bild

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-bild.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=73be21dd0709a849f30ae84a6d865e0c" alt="Bild" width="1430" height="1230" data-path="images/opc-plus-bild-content-box-bild.jpg" />
  </Frame>
</div>

**Bild deaktivieren:** Aktiviere diese Option, um die Box ohne Bild darzustellen.

**Bild:** Lade das gewünschte Bild hoch.

**Alternativ Text:** Alternativtext für das Bild (Barrierefreiheit und SEO).

**Title Tag:** Title-Attribut des Bildes.

**Bild verzögert laden?:** Deaktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird ein Flag für lazyLoad gesetzt. Die Funktion ist abhängig von Browser und Template.

**Bild bevorzugt laden:** Aktiviere diese Option, wenn das Bild initial above-the-fold angezeigt wird. Wenn aktiv, wird versucht die Ladepriorität zu erhöhen. Die Funktion ist abhängig von Browser und Template.

**Bildtyp:** Lege fest, wie das Bild im Container dargestellt wird:

* Bild ist Hintergrundbild (füllt den Container komplett aus)
* Bild ist Produktbild (ist komplett im Container sichtbar)

**Größe des Bildes festlegen nach...:** Lege fest, wie die Größe des Bildes bestimmt wird:

* Automatisch nach Content
* Dynamisch
* Fixe Höhe
* Verhältnis

***

## Content

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-content.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=011868bdbc68ff9573781f5a8832b619" alt="Content" width="1436" height="1702" data-path="images/opc-plus-bild-content-box-content.jpg" />
  </Frame>
</div>

**Überschrift:** Überschrift der Box.

**Text:** Freier Richtext-Inhalt der Box.

### Button Eigenschaften und Styles

**Link:** Ziel-URL, zu der verlinkt werden soll.

**Link in neuen Tab öffnen?:** Soll beim Klick auf den Button ein neuer Tab geöffnet werden?

**Karte verlinken?:** Die ganze Karte wird verlinkt.

**Button verwenden?:** Lege fest, ob zusätzlich ein Button angezeigt werden soll.

Wenn aktiviert ("Ja"), erscheinen folgende zusätzliche Einstellungen:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-content-button.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=e35c7ddc8bfd6e3a80da5a44bb56afe0" alt="Button-Einstellungen" width="1432" height="1658" data-path="images/opc-plus-bild-content-box-content-button.jpg" />
  </Frame>
</div>

**Button als Link oder Funktionsbutton verwenden?:**

* Linkbutton
* Funktionsbutton
* Data-Attribute

**Button Text:** Text, der auf dem Button angezeigt wird (z. B. "Mehr erfahren").

**Button Typ:** Darstellung des Buttons:

* Full = vollflächig
* Outlined = farblich umrandet
* Plain Text = nur Schrift

**Button Farbe:** Wähle die Farbe des Buttons:

* Primary
* Secondary
* Warning
* Danger
* Info
* Success
* Dark
* Light

**Button Breite:** Lege die Breite des Buttons fest (z. B. Content Width).

### Button Ausrichtung nach Breakpoints

Lege für die Breakpoints XS, SM, MD, LG und XL die Ausrichtung des Buttons fest (z. B. zentriert).

**Icon vor oder nach dem Text:** Lege fest, ob ein Icon vor oder nach dem Button-Text angezeigt wird.

**Icon verwenden?:** Aktiviert die Anzeige eines Icons auf dem Button.

**Wähle ein Icon:** Icon-Picker zur Auswahl des gewünschten Icons.

***

## Darstellung

<Tabs>
  <Tab title="Teil 1">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-darstellung.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=362fcce74de9e6b47ab74d5af7fe8eb3" alt="Darstellung Teil 1" width="1432" height="1310" data-path="images/opc-plus-bild-content-box-darstellung.jpg" />
      </Frame>
    </div>
  </Tab>

  <Tab title="Teil 2">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-darstellung-2.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=3ee83f681907f540ab55337af8566d83" alt="Darstellung Teil 2" width="1432" height="1186" data-path="images/opc-plus-bild-content-box-darstellung-2.jpg" />
      </Frame>
    </div>
  </Tab>
</Tabs>

### Ausrichtung und Positionierung

**Textcontent gruppieren:** Dadurch werden Überschrift und Textblock als ein Block zusammengefasst, was die Ausrichtung relativ zueinander und zum Button beeinflusst.

**Contentabstand zur Box:** Bestimmt den Abstand des Inhalts zur Box. Je größer die Zahl, desto größer der Abstand.

**Abstand zw. Content Elementen (Text, Button):** Bestimmt den Abstand zwischen Text und Button. Je größer die Zahl, desto größer der Abstand.

**Horizontale Textausrichtung:** Ausrichtung des Textes (z. B. zentriert).

**Vertikale Contentausrichtung:** Wie soll sich der Text verhalten, wenn mehr Platz zur Verfügung steht, als benötigt wird?

### Überschrift - Styles

**Überschrift anzeigen:** Lege fest, ob die Überschrift angezeigt werden soll.

**Überschrift Element:** Wähle das HTML-Element der Überschrift (z. B. H2).

**Überschrift Size:** Wähle die visuelle Größe der Überschrift (z. B. H4).

**Custom Color:** Eigene Farbe für die Überschrift oder Standardfarbe belassen.

**Schrift-Dicke:** Schriftdicke der Überschrift (Standard: vererbt).

**Additional Classes:** Eigene CSS-Klassen für die Überschrift.

### Optionen für Textcontent

**Farbe des Texts:** Eigene Farbe für den Textinhalt oder Standardfarbe belassen.

### Optionen für das Overlay

**Farbüberlagerung:** Farbe zwischen Bild und Inhalt, um die Lesbarkeit zu verbessern.

### Zusatzoptionen für Modus "Bild im Hintergrund"

**Inhalt bei Maus-Hover ausblenden:** Blendet den Textinhalt beim Überfahren mit der Maus aus.

**Zoomeffekt bei Maus-Hover:** Aktiviert einen leichten Zoom des Hintergrundbildes beim Überfahren mit der Maus.

**Farbüberlagerung bei Maus-Hover ausblenden:** Blendet die Farbüberlagerung beim Überfahren mit der Maus aus.

<Note>
  Für weitere Einstellungen zum Layout, siehe den Tab **Layout** im Portlet selbst.
</Note>

***

# Beispiel

So erscheint die Bild Content Box im Frontend:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-bild-content-box-beispiel.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=f4da25af6f1b80864b7b93f23187c16f" alt="Beispiel" width="472" height="703" data-path="images/opc-plus-bild-content-box-beispiel.jpg" />
  </Frame>
</div>

***