Sequential steps section with connection lines and slider mode on mobile.
Steps
The Steps section displays a sequence of numbered steps connected by lines. Ideal for presenting a process, instructions or a customer journey in a visual and clear way.
How it works
On desktop, the steps are displayed in columns with visual connection lines between each step. When the number of steps exceeds the available space, a horizontal slider takes over automatically. On mobile, the steps are always in slider mode for smooth finger navigation.
Main settings
| Setting | Description | Options |
|---|---|---|
| Desktop columns | Number of columns on desktop | 2 / 3 / 4 / 5 |
| Line style | Connection line appearance | Solid / Dotted / Gradient |
| Line color | Connector color | Accent 1 / Accent 2 / Foreground |
| Numbering | Show step numbers | On / Off |
| Number style | Number appearance | Circle / Badge / Minimal |
| Alignment | Content alignment | Left / Center |
| Mobile slider | Enable slider on mobile | On / Off (default: On) |
Step block
Each step is a Step block with the following fields:
| Field | Description |
|---|---|
| Icon | Icon from the built-in library or custom image |
| Image | Image illustrating the step (optional) |
| Heading | Step title |
| Text | Detailed step description |
Use cases
Ordering process
- 4 steps: Choose > Customize > Order > Receive
- Thematic icons for each step
- Solid connection lines
- Circle number style
Product instructions
- 3 steps: Open > Apply > Enjoy
- Product images for each step
- Centered alignment
- No numbering (icons are enough)
Customer journey
- 5 steps: Discovery > Trial > Purchase > Loyalty > Ambassador
- Gradient line style
- Badge numbering
- Desktop columns at 5
💡Use between 3 and 5 steps for optimal results. Beyond 5, the slider will take over on desktop which may be less readable than a complete view.
ℹ️Connection lines adapt automatically: horizontal on desktop, hidden in slider mode. No additional configuration is needed.