Heyflow provides you with several tools to organise and structure your flow in a user-friendly way. The Steps Block is one of them and allows you to provide your users with a good overview of your flow. Your users are thus guided through your Heyflow and always know about steps that have already been completed, but also have upcoming steps in mind.

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.

Give each step a name and add more steps as needed. Choose how the steps are displayed, using the pre-selected icon, other icons or emojis, or your own custom images. Highlight the current step to help users understand where they are in the flow.

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.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. You can also select a background color for the block. Additionally, specify the displayed style of the icon.

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.

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors, fonts, and spacing to match your flow.

When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.

Also see Heyflow's other design options to individualize your flow and building blocks even more: