A process-steps block walks a visitor through a workflow one step at a time: sign up, upload, publish. The Process Steps widget in The Plus Addons for Elementor builds that block, in a row or in a column, with an icon, an image, text or a Lottie animation in each step circle.
This page covers the whole widget: the two layouts, the step counter, the step content and the parts that need Pro. Every setting below was checked against the running widget on Elementor 4.2.3 with The Plus Addons 6.5.0.
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. The widget ships in the free plugin and renders fully without Pro. Three things inside it do need Pro: Carousel Anything Connection, the Icons Mind ( PRO ) icon library, and Lottie step icons.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Process Steps and turn its toggle on.
Choose the layout
Drag Process/Steps onto the page. Everything in this section is in the Layout section of the Content tab.
- Style picks the layout. It has two choices, Vertical and Horizontal, and it ships set to Vertical.
- Display Counter (Show / Hide, off by default) numbers the steps. With it on, Counter Style appears: Normal, Decimal Leading Zero, Upper Alpha, Lower Alpha, Lower Roman, Upper Roman, Lower Greek and Custom Text.
- Special Background (Show / Hide, off by default) adds a decorative background behind the step circles.
- Default Active decides which step is highlighted when the page loads. It ships on 1, so the first step is already highlighted; choose None if you would rather nothing was.
Normal Layout In Mobile, Circle Alignment and Content Alignment only appear when Style is set to Horizontal, and the two alignment controls need Normal Layout In Mobile switched on as well. They change the mobile layout only.
Add the steps
Open the Content section. The repeater inside it is called Process/Steps and it ships with three items. Open one:
- Title and Description are the step text.
- Select Icon decides what sits in the step circle: None, Icon (the default), Image, Text or Lottie.
- With Icon selected, Icon Font offers Font Awesome and Icons Mind ( PRO ). Pick the library, then the icon itself in Icon Library.
- Icon Link (Show / Hide) turns the circle into a link and reveals a Link field.
- Normal Background Option and Hover Background Option set the circle’s background in each state.
- If Counter Style is Custom Text, Display Counter Custom Text and Custom Text let each step carry its own label instead of a number.
Use + Add Item for more steps. Below the repeater, Carousel Anything Connection links the steps to a Carousel Anything widget so that clicking or hovering a step moves the carousel.
What you get on the page
With Style set to Horizontal and three steps, the three step blocks sit in one row at the same height, each taking a third of the container width, joined by a connecting line. With Display Counter on and Counter Style left at Normal they are numbered 1, 2, 3.
Settings that matter most
| Setting | What it does | Default |
|---|---|---|
| Style | Vertical (stacked) or Horizontal (one row) | Vertical |
| Display Counter | Numbers or labels each step | Hide |
| Counter Style | Number, letter, roman, greek or your own text | Normal |
| Special Background | Decorative background behind the step circles | Hide |
| Normal Layout In Mobile | On mobile, shows the steps as plain blocks instead of a vertical sequence (Horizontal only) | Hide |
| Default Active | Which step is highlighted on page load | 1 |
| Select Icon (per step) | None, Icon, Image, Text or Lottie | Icon |
| Icon Font (per step) | Font Awesome, or Icons Mind ( PRO ) | Font Awesome |
| Carousel Anything Connection | Links the steps to a Carousel Anything widget (Pro) | Hide |
Styling
The Style tab holds Title Style, Description Style, Icon/Image Style, Lottie, Separator/Line Style, Display Counter Style, Content Background Style and Horizontal Background. Display Counter Style only appears while Display Counter is on, and Horizontal Background only while Style is Horizontal.
Connecting the steps to a carousel
Carousel Anything Connection is a Pro feature. In the free plugin the toggle is there, but switching it on shows an upgrade notice instead of the settings. With Pro you get Connection Carousel ID, which must match the ID you set on the Carousel Anything widget, and Effect on, which is Hover or Click and ships on Hover.
Limitations
- Carousel Anything Connection needs Pro. The toggle is visible in the free plugin but only reveals an upgrade notice.
- Icons Mind needs Pro. The dropdown says so in the option label itself.
- Lottie step icons need Pro, and only work on the first step. The script that draws a Lottie is only loaded when the first repeater item is set to Lottie. Put it on step two and nothing appears. See the Lottie guide below.
- Circle Alignment and Content Alignment are mobile-only. They need Horizontal plus Normal Layout In Mobile, and their styling applies to the mobile layout.
Troubleshooting
The steps stack instead of sitting in a row
Style is still on Vertical, which is the shipped default. Switch it to Horizontal.
No numbers on the steps
Display Counter is off. Turn it on, then pick a Counter Style.
The first step looks highlighted and I did not do that
Default Active ships on 1. Set it to None if you want every step to start in its normal state.
I cannot find Circle Alignment
It only shows with Style on Horizontal and Normal Layout In Mobile switched on.
Not verified
So you know exactly what has and has not been checked:
- Special Background was never rendered, so this page does not describe what it looks like.
- The whole Style tab – only the section names are listed here, none of the controls inside them were exercised.
- Select Icon set to Image or Text, and the Icon Link / background options, were not rendered.
- A working Carousel Anything Connection was never built, so nothing here describes how the connected carousel behaves in practice.
- Nothing was measured at tablet or mobile widths.
