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.

Adding the Steps Block

In the Blocks tab, go to Display and drag the steps block into your Heyflow.
Name your individual steps and add more steps if required.
Change the display of the block. You can choose between dots and numbers as a pre-selection. Alternatively, you can also insert your own icon.
Select the step that should be displayed as the current status so that your users know where they are in the flow.
Publish your Heyflow and you're ready to go!

Designing the Steps Block

There are multiple ways to adjust the block even more than described above. Just head to the Design tab and start working on the Presets. In some plans, you can dive even deeper into all spheres of design & look. When working on the presets, you can head to the Styles section on top and start editing every little detail of each section.

Editing options

General

Display: Choose how the step nodes are displayed. You can display them as spheres or as a number or hide them completely.

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, Left and Right: 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

Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background colour: You can select a colour to be used as the background for the block.