A vertical process list reads like a timeline: one step under the next, joined by a line. It suits a long workflow, a sidebar, or any narrow column where a row of steps would be cramped.
The Process Steps widget in The Plus Addons for Elementor does this with one setting. For everything else the widget can do, see the full Process Steps settings overview.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free. Nothing on this page needs Pro.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Process Steps and turn its toggle on.
Steps
- Drag Process/Steps onto the page.
- In the Content tab, open the Layout section and set Style to Vertical. This is already the shipped default, so a brand-new widget is vertical until you change it.
- Still in Layout, turn Display Counter on if you want the steps numbered, then choose a Counter Style.
- Open the Content section and fill in the Process/Steps repeater: a Title and a Description per step, and whatever you want in the circle through Select Icon.
What you get on the page
Each step becomes a full-width block, stacked under the one before it, with a vertical line running through the step circles. On a 1200px page with a 1100px container, three steps measured 1100 pixels wide each, at the same left edge, 150 pixels apart top to bottom.
Notice that the first circle is already drawn in its active state. That is Default Active, which ships set to 1. Set it to None if you want all three to start plain.
Settings used here
| Setting | What it does | Default |
|---|---|---|
| Style | Vertical stacks the steps; Horizontal puts them in a row | Vertical |
| Display Counter | Numbers or labels each step | Hide |
| Counter Style | Normal, Decimal Leading Zero, Upper Alpha, Lower Alpha, Lower Roman, Upper Roman, Lower Greek or Custom Text | Normal |
| Default Active | Which step is highlighted on page load | 1 |
Limitations
- Normal Layout In Mobile, Circle Alignment and Content Alignment are not available in the vertical layout. All three are tied to Style = Horizontal.
- Horizontal Background in the Style tab is likewise hidden while Style is Vertical.
- Lottie step icons need Pro, and only work when the first step is the one using them.
Troubleshooting
The steps are in a row, not a column
Style is set to Horizontal. Switch it back to Vertical in the Layout section of the Content tab.
The first step looks different from the others
That is Default Active, which ships on 1. Choose None to switch the highlight off.
No connecting line between the circles
The line is styled in Style > Separator/Line Style. If its colour matches the section background it will be there but invisible.
Not verified
So you know exactly what has and has not been checked:
- Only the desktop layout was measured, at 1200 pixels wide. Nothing here describes how the vertical layout reflows on a phone.
- The Separator/Line Style controls were not exercised; only the section name is known.
- Special Background was not rendered in the vertical layout.
