This block combines two powerful blocks to provide you a diverse appearance of your flow and varied design options. You can insert a picture of your choice and add some meaningful text to it. In the editing tab you have many possibilities to shape the proportions of both units and change the overall looking of the block.
💡 Tip: You can get the same result with our container block and an image and text block.
Adding the text + image block
In the blocks tab, navigate to display and drag the text + image block into your flow.
Upload your image or photo and crop it if needed.
Insert a meaningful text that, if necessary, complements the image.
Adjust the settings such as text-image split, image corner radius or image alt label. Take a look here for more edit options.
Now publish your flow and you’re good to go!
Adding images from the image library
Heyflow’s image library speeds up your workflow by allowing you to manage and re-use your images across multiple flows, eliminating the need to upload the same image multiple times. Like our icon library, it is available in all your flows.
Simply click on "Choose from library" to browse and select your available images. Learn more about the image library here.
Editing options
Spacing
Spacing
Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top & Bottom: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.
Appearance
Appearance
Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background color: You can select a colour to be used as the background for the block.
Text-image split: This ratio defines the size of the image in relation to the text unit.
Vertically align: Arrangement of the blocks in relation to the vertical centre of the block. Only applicable to wide screens.
Horizontal gap: Adjust the spacing between text and image when they are displayed in one row.
Vertical gap: Adjust the spacing between text and image when they are displayed in one column.
Image corner radius: Set the rounding of the corners of your image using the slider or the exact number of pixels.
Image offset top: Move the image downwards to manually align it with the text unit of the block.
Text is left on wide screens: Select this option if you want your text to appear on the left side of the block when the user device has a wide screen.
System
System
Image Alt Label: Images should always have an 'alt' (alternative) text that is displayed when the image is not loaded.