Step Flow
Show how your process works in clear numbered steps.
Process steps: one step with a direction arrow, or a sequence with automatic connectors that turn from a row into a column on phones.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: free — installs straight from Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Step Flow. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Steps
| Setting | What you can set |
|---|---|
| Show | A sequence of steps or One step (with a direction arrow) |
| Media | Icon, Number or Image |
| Icon | Icon picker |
| Number | Leave empty to count automatically. |
| Image | Image |
| Badge | Text |
| Title | Text |
| Description | Text |
| Link | Link |
| Steps | each item: Content, Media, Icon, Number, Image, Badge, Title, Description, Link, Style, … (14 in all) |
| Title HTML Tag | H1, H2, H3, H4, H5, H6, div, span, … (9 in all) |
| Alignment | Left, Center or Right |
| Link Text | Adds a text link under steps that have a link. Empty = the title links. |
| Accessible Name | Text |
Layout & Progress
| Setting | What you can set |
|---|---|
| Direction | Across or Down |
| Space Between Steps | 0–160 |
| Current Step | Earlier steps show as done (with a check), this one is highlighted. 0 = none. |
| Check Mark on Done Steps | On / off |
| Count From | Number |
| Two-Digit Numbers (01, 02…) | On / off |
| Hover Effect | None, Lift the media, Fill the media or Glow ring |
| Reveal on Scroll | Steps appear one by one and the connectors draw between them. |
Direction / Connector
| Setting | What you can set |
|---|---|
| Show Direction | On / off |
| Style | Solid, Dashed, Dotted or Gradient |
| Arrowhead | On / off |
| Animated Flow | Dashes or a highlight keep moving towards the next step. |
| Width | 20–600 |
| Angle | -180–180 |
| Offset | — |
| Offset Top | -300–300 |
| Offset Left | -300–300 |
| Show the Arrow on Phones | On / off |
Style tab: design controls for Step Box, Icon / Number / Image, Badge, Title & Description or Direction / Connector — colours, typography, spacing, borders and hover states.
Tips
- Start with the Style choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Also available for Divi (Step Flow), Gutenberg (Step Flow).
- Works well with: Advanced Accordion, Advanced Toggle, Card.