Step Flow
Show how your process works in clear numbered steps.
Numbered, icon or image steps joined by connectors — across on wide screens and down on phones, with progress states, steps that hold any blocks, a scroll reveal and HowTo structured data.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Step Flow — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
- Add or reorder items with the + inside the block; each item (Step) has its own settings when selected.
Settings
Layout
| Setting | What you can set |
|---|---|
| Direction on desktop | row or column |
| Direction on tablets (≤ 1024 px) | row or column |
| Direction on phones (≤ 767 px) | row or column |
| Alignment (across) | left, center or right |
| Title tag | h2, h3, h4, h5, h6, p or div |
| Number / icon size (px) | 32–200 |
| Shape | circle, rounded, square or none |
| Space between steps (px) | 0–160 |
| Steps as cards | On / off |
Connectors
| Setting | What you can set |
|---|---|
| Lines between steps | On / off |
| Line | solid, dashed, dotted or gradient |
| Thickness (px) | 1–12 |
| Arrowheads | On / off |
| Animated flow | On / off |
| Line | Colour |
Progress
| Setting | What you can set |
|---|---|
| Current step (0 = none) | Number |
| Check mark on done steps | On / off |
| Count from | 0–99 |
| Two-digit numbers (01, 02…) | On / off |
Links, effects and SEO
| Setting | What you can set |
|---|---|
| Reveal step by step on scroll | On / off |
| Hover | none, lift, fill or glow |
| Badge position | top right, top left or bottom |
| Link text | Text |
| Accessible name of the list | Text |
| HowTo structured data | On / off |
| How-to name | Text |
| Line after done steps | Text |
| Gradient end | Text |
| Number / icon background | Colour |
| Number / icon | Text |
| Done and current steps | Colour |
| Done and current number | Text |
| Titles | Colour |
| Text | Colour |
| Card background | Colour |
| Badge | Colour |
Step (item) settings
Links, effects and SEO
| Setting | What you can set |
|---|---|
| Badge | Text |
Step
| Setting | What you can set |
|---|---|
| Show | number, icon or image |
| Custom number or label | Text |
| Link | Text |
| Open in a new tab | On / off |
Styles tab: typography and spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- Going down, the text always sits beside the media (left-aligned). Alignment applies to the across layout.
- With a very long step title going across, connectors still join the media centres; the text simply wraps.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Also available for Elementor (Step Flow), Divi (Step Flow).
- Works well with: Advanced Accordion, Card, Content Switcher.