Elementor Progress Steps Widget
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor progress steps widget shows a sequence with completed, current and upcoming states, like the stepper at the top of a checkout or onboarding page.
- Widget name MoxKit Progress Steps
- Panel category MoxKit Addons
- Settings 24+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor progress steps widget?
Set the current step number and MoxKit marks the earlier steps as completed (with an optional check mark) and the later ones as upcoming.
Like every MoxKit widget, the Progress Steps has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Three schemes: compact bar, horizontal stepper, vertical timeline.
- Current step number with completed / current / upcoming colors.
- Check marks for completed steps.
- "Step N of T" counter.
- Optional descriptions and icons per step.
- Marker, text and progress bar styling.
How to add the Elementor progress steps widget
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Progress Steps" or scroll to the MoxKit Addons category.
- Drag the Progress Steps widget into a Container.
- Edit the Steps list.
- Set the Current step number.
- Choose the Scheme and toggle the check marks, counter and descriptions.
- Click Update (or Publish) to save the page.
Designs and examples
These screenshots were taken from a live WordPress site running MoxKit 1.4.4 and Elementor. They show the Progress Steps with the settings described in each caption.
Elementor progress steps widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 1 sections and about 6 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Steps
| Setting | Type | Options and notes |
|---|---|---|
| Scheme | Select | Compact bar, Horizontal stepper, Vertical timeline (default: Horizontal stepper) |
| Current step | Number | The active step (1 = first). |
| Check mark for completed steps | Toggle | On / Off (default: On) |
| Show “Step N of T” | Toggle | On / Off (default: On) |
| Show descriptions | Toggle | On / Off (default: On) |
| Steps | List | Each item: Title, Description, Icon (optional) |
Elementor progress steps widget settings: Style tab
The Style tab controls the look of every part of the widget: 3 sections, about 18 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Markers
| Setting | Type | Options and notes |
|---|---|---|
| Size per device | Slider | |
| Completed color | Color | |
| Current color | Color | |
| Upcoming color | Color | |
| Marker text (active) | Color | |
| Typography | Group | All the usual Elementor typography settings. |
| Connector thickness per device | Slider |
Text
| Setting | Type | Options and notes |
|---|---|---|
| Title | ||
| Typography | Group | All the usual Elementor typography settings. |
| Title color | Color | |
| Description | ||
| Typography | Group | All the usual Elementor typography settings. |
| Description color | Color | |
| Title → description spacing per device | Slider | |
| Step counter | ||
| Typography | Group | All the usual Elementor typography settings. |
| Counter color | Color | |
Progress bar
| Setting | Type | Options and notes |
|---|---|---|
| Fill color | Color | |
| Track color | Color | |
| Height per device | Slider | |
| Corner radius per device | Slider |
Tips and best practices
- Use one Progress Steps widget per page of a multi-page form, changing only the current step.
- The timeline scheme fits narrow sidebars.
Progress Steps FAQ
Is it connected to a form?
No. It shows the step you set. Change Current step on each page of your process.
What is the difference from Process Showcase?
Process Showcase explains steps; Progress Steps shows progress through them with completed and upcoming states.
Summary
The Elementor progress steps widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Compact bar, horizontal stepper or vertical timeline with completed states. Install MoxKit Addons for Elementor from WordPress.org, drag the Progress Steps widget onto a page and start with the settings above.