Der Text-Bild-Block kombiniert zwei vielseitige Elemente und eröffnet dir zahlreiche Gestaltungsmöglichkeiten für deinen Flow. Du kannst ein Bild deiner Wahl einfügen und es mit einem aussagekräftigen Text ergänzen.

Besonders häufig wird dieser Block für Landingpages eingesetzt, etwa als eindrucksvolle Hero Section, die sofort Aufmerksamkeit weckt.

Nach dem Klick auf einen Block findest du rechts den Bereich Inhalts.

Unter Bild kannst du dein eigenes Bild hochladen und bei Bedarf zuschneiden oder die Heyflow-Bibliothek nutzen. Die Bildbibliothek beschleunigt deinen Workflow, da sie es dir ermöglicht, Bilder über mehrere Flows hinweg zu verwalten und wiederzuverwenden – so musst du dasselbe Bild nicht mehrfach hochladen. Klicke einfach auf „Aus Bibliothek wählen“, um deine verfügbaren Bilder zu durchsuchen und auszuwählen. Mehr Informationen zur Bildbibliothek findest du hier.

Das Alt-Label stellt einen Alternativtext bereit, der angezeigt wird, wenn ein Bild nicht geladen werden kann. Das hilft Nutzer:innen, den Kontext zu verstehen und verbessert die Barrierefreiheit, zum Beispiel für Screenreader.

Mit der Beschreibung kannst du einen Text neben dem Bild einfügen, ähnlich wie beim Text-Block.

Nach dem Klick auf einen Block findest du rechts den Bereich Einstellungen. Hier passt du Optionen, Darstellung und Verhalten des Blocks so an, wie es zu deinem Flow passt.

Passe die wichtigsten Einstellungen für den Block an, z.B. mit der Spaltenaufteilung bestimmst du das Verhältnis zwischen Bild und Texteinheit, zum Beispiel 50:50, 30:70 oder 60:40.

Über den vertikalen Abstand kannst du den Abstand zwischen Text und Bild anpassen, wenn beide in einer Spalte dargestellt werden. Der horizontale Abstand steuert den Abstand zwischen Text und Bild, wenn sie nebeneinander in einer Zeile angezeigt werden.

Mit der Ausrichtung legst du fest, ob Bild und Text oben, mittig oder unten zueinander ausgerichtet sind.

Passe die Breite des Blockes (S, M, L oder max.) an und definiere die Abstände nach oben, unten, links und rechts mit einer Pixelangabe.

Lege fest, ob der Block nur auf Mobile, Desktop oder gar nicht angezeigt wird. Du kannst außerdem eine Hintergrundfarbe für den Block wählen.

Mit Ecken-Rundung bestimmst du, wie stark die Ecken deines Bildes abgerundet werden. Gib dafür einfach die exakte Pixelzahl ein. Über Oberer Abstand kannst du eine Pixelzahl eingeben, um das Bild nach unten zu verschieben, um es so manuell an der Texteinheit des Blocks auszurichten.

Die Option Text nach links auf breiten Bildschirmen sorgt dafür, dass dein Text auf der linken Seite des Blocks angezeigt wird, wenn das Gerät des Nutzers über einen ausreichend breiten Bildschirm verfügt.