Allgemeine Beschreibung

Bild Content Box ist ein sehr flexibles Portlet. Damit kannst du ansprechende Produkt- oder Informationskarten erstellen mit einem Bild und Text, wahlweise auf dem Bild oder unter dem Bild, wahlweise mit oder ohne Button.

Einsatzmöglichkeiten (Inspiration)

Produktkarten: Stelle einzelne Produkte mit Bild, Text und Button vor.
Kategoriedarstellung: Präsentiere Kategorien deines Shops visuell ansprechend.
Verlinkung zu Angebot: Verlinke gezielt zu Aktionen oder Sonderangeboten.
Blogbeitrag verlinken: Teaser für Blogartikel oder redaktionelle Inhalte.
Auf Informationen hinweisen: Hebe wichtige Informationen visuell hervor.
Themenboxen: Kombiniere Bild und Text, um Themenwelten, Kategorien oder Aktionen vorzustellen.
Call-to-Action-Karten: Nutze die Box inklusive Button, um Besucher gezielt weiterzuleiten.

Featureübersicht

2 Designs: Bild im Hintergrund oder Text unter Bild.
Verlinkung durch Button: Optionaler Button oder Verlinkung der gesamten Karte.
Zoom beim Hovern: Leichter Zoomeffekt beim Überfahren mit der Maus.
Inhalt beim Hovern ausblenden: Blendet Text und Button aus, damit nur das Bild zu sehen ist.
Flexibles Bild-Text-Verhältnis: Wähle je nach Design, ob Text neben, unter oder über dem Bild angezeigt wird.

Tutorial

Settings:

Settings

Design: Wähle das grundlegende Layout der Box, Auswahl zwischen Bild im Hintergrund und Text unter Bild. Schatten verwenden: Gibt dem Container einen dezenten Schatten, sorgt so für mehr Plastizität und räumliche Tiefe.

Box

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

Automatisch nach Content = Die Größe der Box passt sich ganz flexibel an den tatsächlich eingefügten Inhalt an.
Contenthöhe erzwingen = Die Box richtet sich strikt nach der Höhe des Contents und gibt diese als Maß vor.
Fixe Höhe = Du legst eine feste, unveränderliche Höhe für deine Box fest, unabhängig vom Inhalt.
Dynamisch = Die Höhe der Box verhält sich dynamisch und passt sich an.
Verhältnis = Die Größe der Box wird anhand eines bestimmten Seitenverhältnisses berechnet.

Bild

Bild deaktivieren: Deaktiviert die Darstellung eines Bildes und ermöglicht so die Nutzung der Features von Bild Content Box auch ohne Bild. Das eignet sich hervorragend für eine einfache Textdarstellung, für eine saubere Darstellung in einer Masonry Gallery oder um in Kombination mit einem Bild den Text daneben darstellen zu lassen:

Bild: Klicke auf diesen Bereich, um das gewünschte Bild für deine Box aus der Mediathek auszuwählen oder ein neues hochzuladen. Alternativ Text: Hier kannst du eine kurze Bildbeschreibung hinterlegen. Dieser Text wird angezeigt, falls das Bild bei einem Besucher aus technischen Gründen nicht geladen werden kann. Zudem ist er wichtig für die Barrierefreiheit und Suchmaschinen (SEO). Title Tag: Gib hier einen Titel für dein Bild ein. Dieser Text erscheint in der Regel als kleiner Hinweis (Tooltip), wenn ein Nutzer mit der Maus über das Bild fährt. Bild verzögert laden?: Wenn du diese Option aktivierst, wird das Bild erst dann geladen, wenn der Besucher auf der Seite zu diesem Bild scrollt (Lazy Loading). Das hilft dabei, die anfängliche Ladezeit deiner Webseite zu verbessern. Deaktiviere die Option, wenn das Bild initial above-the-fold angezeigt wird. Ist sie aktiv, wird ein Flag für lazyLoad gesetzt; die Funktion ist abhängig von Browser und Template. Bild bevorzugt laden: Setze hier ein Häkchen, wenn es sich um ein besonders wichtiges Bild handelt (z. B. direkt oben auf der Startseite im sichtbaren Bereich). Es wird dann versucht, die Ladepriorität dieses Bildes 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) = Das Bild wird als Hintergrund gesetzt und füllt die gesamte Box aus. Je nach Format können dabei Teile des Bildes abgeschnitten werden.
Bild ist Produktbild (ist komplett im Container sichtbar) = Das Bild wird so eingepasst, dass es immer vollständig und ohne Beschnitt in der Box zu sehen ist.

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

Automatisch nach Content = Die Bildgröße passt sich automatisch an den restlichen Inhalt der Box an.
Dynamisch = Die Bildgröße verhält sich dynamisch und passt sich an die jeweiligen Gegebenheiten (wie Displaygröße) an.
Fixe Höhe = Du gibst eine feste, unveränderliche Höhe für das Bild vor.
Verhältnis = Die Größe des Bildes wird anhand eines vorgegebenen Seitenverhältnisses (z. B. 16:9 oder 4:3) berechnet.

Content

Überschrift: Hier kannst du eine aussagekräftige Überschrift für deine Bild Content Box eintragen, die über dem Text angezeigt wird. Text: Über den integrierten Texteditor kannst du den Hauptinhalt deiner Box frei formulieren und formatieren. Dir stehen dabei gängige Textwerkzeuge (wie fett, kursiv, Listen oder Textausrichtung) zur Verfügung.

Button Eigenschaften und Styles

Link: URL auf die der Button bei Klick leiten soll. Für Verlinkung auf andere Seiten muss die vollständige URL angelegt werden. Für Verlinkungen auf der eigenen Domain reicht der relative Pfad. Damit der Link innerhalb der aktuellen Seite zu einem Bereich scrollt, muss der Bereich eine ID haben, dann kannst du mit #mein-id automatisch dort hin scrollen lassen per Klick. Siehe Allgemeine Dokumentation für das Anlegen von IDs in OPC Portlets.

Verlinkung auf Drittseite:
https://dreizack-medien.de/meine-kategorie/mein-produkt 

Verlinkung innerhalb der eigenen Domain:
/meine-kategorie/mein-produkt

Verlinkung zu Container:
#meine-id
/meine-kategorie/mein-produkt#meine-id

Link in neuen Tab öffnen?: Setze hier ein Häkchen, wenn sich die verlinkte Seite in einem neuen Browser-Fenster (Tab) öffnen soll. Das ist besonders bei externen Links empfehlenswert, damit der Kunde deinen Shop nicht verlässt. Karte verlinken?: Wenn du diese Option aktivierst, wird nicht nur ein möglicher Button oder Link-Text klickbar, sondern die komplette “Karte” (also die gesamte Bild Content Box). Ein Klick irgendwo in die Box leitet den Kunden dann auf die hinterlegte URL weiter. Du benötigst so keinen Button, kannst ihn aber zur Aufmerksamkeit mit einfügen. Button verwenden?: Lege hier über das Dropdown-Menü fest, ob zusätzlich ein sichtbarer Button in deiner Box angezeigt werden soll (z. B. Auswahl zwischen “Nein” und “Ja”). Wenn du dich für einen Button entscheidest, öffnen sich in der Regel weitere Einstellungsmöglichkeiten für dessen Design. 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

Teil 1
Teil 2

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: Bestimme den inneren Abstand (Padding) zwischen dem Rand deiner Box und dem darin liegenden Inhalt. Du kannst hier aus verschiedenen Größen (wie S, M, L) wählen. Je größer die Zahl, desto größer der Abstand.

Abstand zw. Content Elementen (Text, Button): Lege fest, wie viel Platz zwischen den einzelnen Elementen innerhalb der Box (also zwischen Überschrift, Text und dem Button) gelassen werden soll. Je größer die Zahl, desto größer der Abstand. Horizontale Textausrichtung: Hier bestimmst du die waagerechte Ausrichtung deines Inhalts. Wähle zwischen linksbündig, zentriert oder rechtsbündig. Vertikale Contentausrichtung: Bestimmt, wie sich Überschrift, Text und Button zueinander vertikal ausrichten, wenn mehr Platz vorhanden ist, als die Elemente für ihren Inhalt benötigen:

zentriert: Text und Button sind direkt beieinander und in der Mitte des Containers
oben: Text und Button sind direkt beieinander und am oberen Rand des Containers
unten: Text und Button sind direkt beieinander und am unteren Rand des Containers
Gesamten Platz einnehmen: Überschrift, Text und Button nehmen die gesamte Höhe des Containers ein. Der Abstand zwischen Überschrift und Text und Text und Button ist gleich
Gleichmäßig verteilen: Überschrift, Text und Button nehmen die gesamte Höhe des Containers ein. Der Abstand zwischen Containerrand, Überschrift, Text und Button ist gleich

Überschrift - Styles

Überschrift anzeigen: Wähle per Dropdown, ob die Überschrift in der Box sichtbar sein soll (“Ja”) oder nicht (“Nein”). Überschrift Element: Bestimme das HTML-Tag (z. B. H1, H2, H3) für deine Überschrift. Das ist besonders wichtig für die Strukturierung deiner Seite und für Suchmaschinen (SEO). Überschrift Size: Unabhängig von dem oben gewählten HTML-Tag kannst du hier die rein optische Größe der Überschrift festlegen (z. B. eine H2-Überschrift, die aber optisch wie eine kleinere H4 dargestellt wird). Custom Color: Weiche von der Standardfarbe deines Templates ab und wähle über den Color-Picker eine ganz individuelle Farbe für deine Überschrift. Schrift-Dicke: Bestimme, wie kräftig die Überschrift dargestellt werden soll (z. B. normal, fett oder vom Theme “vererbt”). Additional Classes: Dieses Feld ist für fortgeschrittene Nutzer. Hier können eigene CSS-Klassen eingetragen werden, um die Überschrift über das CSS des Child-Templates weiter zu individualisieren.

Optionen für Textcontent

Farbe des Texts: Wähle hier eine individuelle Schriftfarbe für den normalen Fließtext (unterhalb der Überschrift) aus, oder belasse die Standardfarbe.

Optionen für das Overlay

Farbüberlagerung: Um sicherzustellen, dass dein Text auf unruhigen oder hellen Hintergrundbildern gut lesbar bleibt, kannst du hier einen Farbfilter (Overlay) über das Bild legen. Oft wird hierfür eine halbtransparente, dunkle Farbe genutzt.

Zusatzoptionen für Modus “Bild im Hintergrund”

Diese Optionen greifen primär, wenn du im Reiter “Bild” die Einstellung “Bild ist Hintergrundbild” gewählt hast. Inhalt bei Maus-Hover ausblenden: Wenn aktiviert, verschwinden Text und Button, sobald der Besucher mit der Maus über die Box fährt. So wird der Blick komplett auf das Bild freigegeben. Zoomeffekt bei Maus-Hover: Aktivierst du diese Option, wird das Bild leicht vergrößert (herangezoomt), wenn der Nutzer mit dem Mauszeiger darüber fährt. Das sorgt für eine schöne, interaktive Dynamik. Farbüberlagerung bei Maus-Hover ausblenden: Setzt du hier ein Häkchen, verschwindet das eingestellte Farb-Overlay, sobald man mit der Maus über die Box fährt. Das Bild leuchtet dann in seinen Originalfarben auf.

Für weitere Einstellungen zum Layout, siehe den Tab Layout im Portlet selbst.

Beispiel

So erscheint die Bild Content Box im Frontend:

Quickstart

Updates & Changelog

Layout Portlets

ECommerce Portlets

Medien Portlets

Text Portlets

Design Portlets

Conversion Booster Portlets

Helper Portlets

Smarty Portlets

BETA Portlets

Bild Content Box