The Text + Image Block combines two powerful elements, giving your flow a dynamic look and flexible design options. You can add any image of your choice and complement it with meaningful text.
This block is especially popular for landing pages, where it often serves as a striking Hero Section to capture attention right away.
💡 Tip: You can get the same result with our container block and an Image and Text Block.
🔎 Learn more about how to build converting landing pages here.
Update the Content
After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the block’s main elements.
Under Image, you can upload your own picture and crop it if needed, or use the Heyflow library. The image library speeds up your workflow by allowing you to manage and reuse images across multiple flows, so you don’t have to upload the same image multiple times. Simply click “Choose from library” to browse and select your available images. You can find more information about the image library here.
The Alt Text provides alternative text that is shown when an image cannot be loaded. This helps users understand the context and also improves accessibility, for example for screen readers. With the Description, you can add text next to the image, similar to the Text Block.
Change the Settings
After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s options, appearance, and behavior to tailor it perfectly to your flow.
General
Control key settings for the block, such as the column split. Here you can define the ratio between image and text, for example 50:50, 30:70, or 60:40.
Use the vertical gap to control the distance between text and image when they are displayed in a single column. The horizontal gap adjusts the distance between text and image when they are shown side by side in a row.
With the alignment option, you can decide whether the image and text should be aligned at the top, center, or bottom in relation to each other.
Spacing
Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.
Appearance
Set the block’s visibility to show only on mobile, desktop, or hide it completely. Additionally, select a background color for the block.
With Corner radius, you can define how rounded the corners of your image should be by entering an exact pixel value. Using Top offset, you can also enter a pixel value to move the image downward and manually align it with the text element of the block.
The option “Text on the left on wide screens” ensures that your text appears on the left side of the block whenever the user’s device has a sufficiently wide screen.
