How to set up and style the Process Steps widget in Elementor.
Process Steps lays out a sequence of steps in a row or a column, each with a marker, a title and a description. Lines or arrows join the markers, and the steps can appear one by one when the widget scrolls into view. Use it for how it works sections, onboarding and order processes.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Steps | The list of steps, shown in the order you arrange them. |
| Marker | Keeps the global marker for this step or replaces it with a number, icon, image or custom text. |
| Icon | The icon used when this step's marker is set to Icon. |
| Image | The image used when this step's marker is set to Image. |
| Marker Text | The text used when this step's marker is set to Custom Text. |
| Title | The heading of the step. |
| Description | A short text under the title. Line breaks are kept. |
| Link | Makes the step title a link. |
| Accent Color | A separate accent color for this step. |
| Option | What it does |
|---|---|
| Direction | Arranges the steps in a horizontal row or a vertical column. |
| Switch to Vertical On | Turns a horizontal layout into a vertical one on mobile, on tablet and mobile, or never. |
| Alignment | Aligns horizontal steps to the start or the center. |
| Marker | The marker used for all steps: an automatic number or one icon. |
| Number Format | Shows step numbers as 1, 2, 3 or as 01, 02, 03. |
| Number Prefix | Adds a word such as Step in front of each number. |
| Connector | The line or arrow drawn between the markers, or none. |
| Animate Steps in Sequence | Shows the steps one by one and draws the connectors when the widget scrolls into view. |
| Title Tag | Sets the HTML tag used for step titles. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
the accent color and the space between steps.
background, border, shadow, radius and padding of the step content, with a hover state.
size, icon size, typography, color and background for normal and hover states, hover border color and scale, border, radius, shadow and the space to the content.
the color, thickness and the gap around the marker.
typography, color, text shadow and margin for the title (with a hover color) and the description.
Yes. Open that step and set its Marker to Icon, Image or Custom Text. The other steps keep the global marker.
By default it switches to a vertical layout on mobile. Change this with Switch to Vertical On.
Yes. Add a Link to the step and its title becomes a link.
Yes. Set Number Format to 01, 02, 03 and type Step in Number Prefix.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide