Die Text-Media-Komponente verbindet Medien (Bild, Video oder Webvideo) mit Text. Sie zählt zu den variabelsten Komponenten in headful und ermöglicht zahlreiche Layout-Varianten innerhalb einer einzigen Struktur.
Wie bei anderen Komponenten kannst du optional:
eine Headline einblenden
eine Subheadline einblenden
Anschließend definierst du die Anordnung und Struktur der Medien- und Textelemente.
Medienarten & Positionierung
Als Medium stehen Bild, Video (aus dem Medienarchiv) und Webvideo zur Verfügung.
Über die Bildposition legst du fest, wo das Medium angezeigt wird:
oberhalb des Textes
links vom Text
rechts vom Text
Wird das Medium oberhalb des Textes positioniert, wird es groß und raumfüllend dargestellt.
Bei der links- oder rechtsseitigen Anordnung kannst du zusätzlich zwischen zwei Größen wählen:
Default → Text nimmt etwa zwei Drittel der Seitenbreite ein
Größer → Text und Medium teilen sich die Breite ungefähr zur Hälfte
Medien- und Textstruktur
Im Bereich Galerie können ein oder mehrere Medien hinzugefügt werden (Bild, Video oder Webvideo).
Werden mehrere Medien einem gemeinsamen Text zugeordnet, verkleinern sich die Medien proportional. Sie brechen dabei nicht automatisch in eine neue Zeile um. Daher sollte geprüft werden, ob die Inhalte bei mehreren Medien noch ausreichend erkennbar sind.
Standardmäßig folgt auf die Galerie:
eine Headline
ein Rich-Text-Editor für den Copytext
Über den Rich-Text-Editor lassen sich Inhalte formatieren und verlinken.
Am Ende der Komponente kann ein Farbschema angewendet werden.
Optional kann aktiviert werden, dass jedes Medium einen individuellen Text erhält. In diesem Fall wird jedes Medium zu einem eigenen Item mit eigener Headline und eigenem Copytext. Die Textfelder erscheinen direkt innerhalb des jeweiligen Medien-Items und müssen dort separat bearbeitet werden.
Layout-Anleitungen für die Text-Media-Komponente
Je nach gewünschtem Layout-Ergebnis können unterschiedliche Einstellungen kombiniert werden.
Variante 1:
Mehrere Bilder mit jeweils eigenem Text (links oder rechts angeordnet)
Mehrere Bild-Text-Elemente untereinander, jeweils mit eigenem Text neben dem Bild.
So gehst du vor:
Text-Media-Komponente hinzufügen.
Bildposition auf links oder rechts setzen.
Den Schalter „Individueller Text für jedes Bild“ aktivieren.
In der Galerie mehrere Bilder hinzufügen.
Für jedes Item separat:
Bild auswählen
Headline definieren
Copytext einfügen
Jedes Bild erhält seinen eigenen Textbereich. Die Elemente werden untereinander dargestellt.
Variante 2:
Wechselndes Layout (Bild links / Bild rechts)
Oben: Bild links, Text rechts
Darunter: Bild rechts, Text links
Wichtig:
Hierbei werden zwei separate Text-Media-Komponenten verwendet.
So gehst du vor:
Erste Text-Media-Komponente hinzufügen.
Bildposition auf links setzen.
Text definieren.
Zweite Text-Media-Komponente darunter einfügen.
Bildposition auf rechts setzen.
Text definieren.
So erhälst du ein alternierendes Layout mit klarer visueller Dynamik.
Variante 3:
Zweispaltig mit Bild oberhalb des Textes
Mehrere Spalten nebeneinander, jeweils mit Bild oben und Text darunter.
So gehst du vor:
Text-Media-Komponente hinzufügen.
Bildposition auf oberhalb setzen.
Mehrere Bilder in der Galerie anlegen.
„Individueller Text für jedes Bild“ aktivieren.
Pro Bild Headline und Copytext definieren.
So kannst du zwei oder mehr Bild-Text-Blöcke nebeneinander mit klarer Spaltenstruktur darstellen.
Variante 4:
Zweispaltiger Text (ohne sichtbares Bild)
Mehrere Textspalten nebeneinander, ohne sichtbare Bilder.
Hinweis: Dies ist ein spezieller Workaround.
So gehst du vor:
Bildposition auf oben setzen.
„Individueller Text für jedes Bild“ aktivieren.
Mehrere Items hinzufügen.
In jedem Item ein Bild einfügen, das in der Hintergrundfarbe des gewählten Farbschemas angelegt wurde und dann als ein sehr schmalen Streifen zugeschnitten
wird In jedes Item den gewünschten Text einfügen.
Wichtig: Alle verwendeten Bilder müssen in der exakt gleiche Höhe zugeschnitten werden. Andernfalls entsteht ein Zeilenversatz.
Der Abstand zwischen Bild und Text ist systemseitig definiert und nicht anpassbar.
So erhältst du mehrere Textspalten nebeneinander, obwohl technisch weiterhin Bild-Text-Elemente verwendet werden.
Tipps & Tricks
Nutze die links-rechts-Anordnung für strukturierte Informationsblöcke.
Verwende individuelle Texte pro Medium, wenn Inhalte klar getrennt dargestellt werden sollen.
Achte bei mehreren Medien auf ausreichende Bildausschnitte und Fokus.
Plane größere Bilddarstellungen gezielt ein, um visuelle Hierarchien zu schaffen.