Skip to main content

​
Allgemeine Beschreibung

Bild und Text ist ein sehr flexibles Portlet. Mit Bild und Text, 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
  • Kategoriedarstellung
  • Verlinkung zu Angebot
  • Blogbeitrag verlinken
  • Auf Informationen hinweisen

​
Featureübersicht:

  • 2 Designs: Bild im Hintergrund, Text unter Bild
  • Verlinkung durch Button
  • Zoom beim Hovern
  • Inhalt beim Hovern ausblenden, damit nur das Bild zu sehen ist

​
Settings:

​
Settings

Image
Contentabstand zur Box: Auswahl wie viel Abstand vom Rand des Containers bis zum Text bestehen sollImage
Horizontale Textausrichtung: Betrifft Text und Überschrift und gibt an, ob der Text zentriert, link- oder rechtsbündig ausgerichtet werden soll 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
    Image
    Image
Design: 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 Links mit Schatten, rechts ohne

​
Box

Image
Größe der Box festlegen nach…: Hier bestimmst du, wie sich die Höhe deiner Box verhalten soll, damit sie sich optimal in dein Shop-Layout einfügt. Auswahl zwischen:
  • 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

Image
Bild deaktivieren: Mit dieser Option kann man die Darstellung eines Bildes deaktivieren und so die Features von Bild und Text auch ohne Bild nutzen. Das eignet sich hervorragend für eine einfache Textdarstellung, für eine saubere Darstellung in einer Mazonary Gallery oder um in Kombination mit einem Bild den Text daneben darstellen zu lassen:
Image
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. 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). Der Browser priorisiert dann das Laden dieses Bildes. Bildtyp: Wähle aus, wie das Bild innerhalb der Box platziert werden soll. Auswahl zwischen:
  • 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…: Bestimme hier, wie sich die Größe (insbesondere die Höhe) deines Bildes berechnen soll. Auswahl zwischen:
  • 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

Image
Ü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.

​
Darstellung

Image

​
Ausrichtung und Positionierung

Textcontent gruppieren: Setze hier ein Häkchen, um die einzelnen Textelemente (Überschrift, Text) zusammenzufassen. Dies ist hilfreich, um sie als eine geschlossene Einheit innerhalb der Box zu positionieren. 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. 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. Horizontale Textausrichtung: Hier bestimmst du die waagerechte Ausrichtung deines Inhalts. Wähle zwischen linksbündig, zentriert oder rechtsbündig. Vertikale Contentausrichtung: Definiere, wo der Inhalt senkrecht in der Box platziert werden soll (z.B. am oberen Rand, vertikal zentriert in der Mitte oder am unteren Rand).

​
Ü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.

​
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überladung 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.