The Image Block is a simple yet powerful way to make your flow more visually engaging. You can upload your own image or GIF to highlight key content, set the right mood, or draw attention to important sections of your flow.
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.
💡We support nearly all image formats with a file limit of 12 MB. For a better flow performance, upload your image in a compressed format, without loosing quality. There are numerous online image compressors available!
❗ When uploading a GIF, make sure to upload it as original and not cropped.
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.
Navigation
With the Enable Navigation option, you can decide whether clicking on the image should redirect users to a website. Enter the target web address in the URL field, and use the Open in… setting to choose whether the link should open in the same window or in a new one.
If the redirect URL contains variables that have no value, the Clean URL option lets you automatically remove them from the URL, including the preceding &word=.
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 Size you can also enter a percentage value to change the image's size.
