​

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

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

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

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

Ü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: 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

​

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.

---

​

Beispiel

So erscheint die Bild Content Box im Frontend:

---