NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

Divi 5 Ready

Sign in

Get Supreme Bundle
Previous: Star Rating Module

Module 60 of 71

Next: SVG Animation Module
Step Flow module

Divi Step Flow that walks people through it.

Place one Step Flow per column and they join into a process: icon, number badge, title, text and a connector to the next step.

Get Divi Supreme ProOpen the playground
1

Discovery call

We learn your goals and audience.

2

Design

Wireframes, then a design you approve.

3

Build

Built in Divi 5 and tested everywhere.

4

Launch

We go live and train your team.

What is the Divi Step Flow module?

Step Flow is a Divi 5 module in Divi Supreme Pro for showing a process. Each module is one step with an icon or image, a number badge, a title, an optional description and a button. Put one in each column and they read as a flow.

Turn on Show Direction to draw a connector to the next step: a line in solid, dotted or dashed style, or an arrow icon or your own image. Set its colour, width and offset. Place the badge in any of 9 positions and style the icon circle.

media types

line styles

badge positions

custom code

Start from a Step Flow recipe.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Try every Step Flow setting.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Settings apply to every step here so you can compare. In Divi each step is its own module.

Everything Step Flow can do.

Updated in v5.0.83

One module per step

Drop a Step Flow in each column and they form a process.

Icon, image or number

Use a Divi icon, your own image, or the default style.

Number badge

A badge on the icon in any of 9 positions, or a custom position.

Connectors

A line in solid, dotted or dashed, or an arrow or custom image, to the next step.

Fine positioning

Connector width, colour and offset so it lines up perfectly.

Button per step

Optional button text and link on every step.

Step Flow documentation

Setup for Divi 5: title, badge, description, button, connector type and style, icon and badge styling.

Read the guide

Need help? Contact support

Questions about Step Flow.

How do I build a process with Step Flow?

Add one Step Flow module to each column of a row, fill in the title, badge and description, and turn on Show Direction on all but the last step.

What can the step show?

An icon, an image or the default style, with a number badge, a title, an optional description and an optional button.

What connectors are available?

A line in Solid, Dotted or Dashed style with its own colour and width, an arrow icon, or a custom image.

How do I line up the connector?

Use Offset Top and Offset Left to move it so it sits level with the icons.

Can I move the badge?

Yes. Pick one of 9 positions, or turn on Use Custom Position and set left and top percentages.

What happens on phones?

Columns stack on narrow screens. Hide the connector on phones with Divi’s responsive options if you prefer.

Does Step Flow work with Divi 5 and WPML?

Yes. It is a native Divi 5 module and its text can be translated with WPML.

Next module, A to Z

SVG Animation Module

Related modules

Content Timeline Module

Vertical timelines that draw on scroll.

Circle Info Module

Items around a circle.

Stacking Card Module

Cards that stack as you scroll.

4.9 out of 5

Rated 4.9 by Divi designers on Trustpilot. Running on 350,000+ sites.

Read reviews →

Make the process feel easy.

Step Flow comes with 70+ Divi 5 modules and 16 extensions in Divi Supreme Pro.

Get Divi Supreme ProSee all modules
Divi Supreme