Elementor Process Steps Widget (Process Showcase Widget)
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor process steps widget (Process Showcase) explains a workflow in ordered steps: how you onboard a client, how an order is shipped, or how a product works. Each step has a marker, a title, a description and an optional button.
- Widget name MoxKit Process Showcase
- Panel category MoxKit Addons
- Settings 72+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor process steps widget?
Steps are joined by connectors that can animate with a light beam, flowing dashes, a travelling dot or a line that draws as the visitor scrolls. When the steps wrap onto several rows, the connector can return, snake or fade between rows.
Like every MoxKit widget, the Process Showcase 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
- Four layout schemes: horizontal, vertical, alternating and cards.
- Markers show an icon, a number, or an icon with a number badge; optional leading zero (01, 02…).
- Optional button per step with its own icon and position.
- Responsive columns (1–6) for the horizontal and card layouts.
- Connectors between rows: return, snake or fade.
- Animated connectors: light beam, flowing dashes, travelling dot, draw on scroll.
- Full styling for markers, number badge (border type, outer ring), text, button and step box.
How to add the Elementor process 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 "Process Showcase" or scroll to the MoxKit Addons category.
- Drag the Process Showcase widget into a Container.
- Choose the Layout scheme and what the Marker shows.
- Edit the Steps list: icon, number, title, text and an optional button for each step.
- Set the number of Columns per device.
- In the Style tab, open Connector to pick a line style and an animation.
- 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 Process Showcase with the settings described in each caption.
Elementor process steps widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 1 sections and about 7 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Process
| Setting | Type | Options and notes |
|---|---|---|
| Layout scheme | Select | Horizontal, Vertical, Alternating timeline, Cards (default: Horizontal) |
| Marker shows | Select | Steps without an icon always show their number. Icon, Number, Icon + number badge (default: Icon) |
| Leading zero (01, 02…) | Toggle | On / Off |
| Show connector | Toggle | On / Off (default: On) |
| Connector between rows | Select | Used when the Columns setting wraps steps onto more than one row. Continue: across, down, then left to the next row, Snake: turn down on the side (rows alternate direction), Fade out / fade in (default: Continue: across, down, then left to the next row) |
| Columns per device | Select | When steps wrap to a new row, the connector fades out at the row end and back in at the next row. One column switches to vertical connectors. Auto (one row), 1, 2, 3, 4, 5, 6 |
| Steps | List | Each item: Icon, Number / label (optional), Title, Description, Button text, Button link, Button icon, Icon position |
Elementor process steps widget settings: Style tab
The Style tab controls the look of every part of the widget: 7 sections, about 65 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Layout
| Setting | Type | Options and notes |
|---|---|---|
| Spacing between steps per device | Slider | |
| Spacing between rows per device | Slider | |
| Marker to text spacing per device | Slider | |
| Text to button spacing per device | Slider | |
| Alignment per device | Choice | Left, Center, Right |
Marker
| Setting | Type | Options and notes |
|---|---|---|
| Size per device | Slider | |
| Icon / number size per device | Slider | |
| Typography | Group | All the usual Elementor typography settings. |
| Border radius per device | Slider | |
| Icon / number color | Color | |
| Background | Color | |
| Border color | Color | |
| Icon / number color (hover) | Color | |
| Background (hover) | Color | |
| Border color (hover) | Color | |
| Border width per device | Slider |
Number Badge
| Setting | Type | Options and notes |
|---|---|---|
| Position per device | Select | Top right, Top left, Bottom right, Bottom left (default: Top right) |
| Horizontal offset per device | Slider | |
| Vertical offset per device | Slider | |
| Size per device | Slider | |
| Typography | Group | All the usual Elementor typography settings. |
| Text color | Color | |
| Background | Color | |
| Border color | Color | |
| Text color (hover) | Color | |
| Background (hover) | Color | |
| Border color (hover) | Color | |
| Border type | Select | Solid, Dashed, Dotted, Double (default: Solid) |
| Border width per device | Slider | Uses the text color until a border color is set. |
| Border radius per device | Spacing | |
| Padding per device | Spacing | |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Outer ring | ||
| Ring width per device | Slider | |
| Ring color | Color | |
Connector
| Setting | Type | Options and notes |
|---|---|---|
| Color | Color | |
| Thickness per device | Slider | |
| Line style | Select | Solid, Dashed, Dotted (default: Solid) |
| Gap to marker per device | Slider | |
| Animation | Select | None, Light beam (travels along the line), Flowing dashes, Travelling dot, Draw on scroll (steps light up in order) (default: Light beam (travels along the line)) |
| Animation color | Color | |
| Speed (seconds per cycle) | Slider |
Text
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Title color | Color | |
| Title spacing per device | Slider | |
| Typography | Group | All the usual Elementor typography settings. |
| Description color | Color |
Button
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Text | Color | |
| Background | Color | |
| Border color | Color | |
| Text (hover) | Color | |
| Background (hover) | Color | |
| Border color (hover) | Color | |
| Icon spacing per device | Slider | |
| Icon size per device | Slider | |
| Width per device | Slider | |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Step box
| Setting | Type | Options and notes |
|---|---|---|
| Width per device | Slider | |
| Margin per device | Spacing | Leave left/right empty to keep the box centred. |
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Tips and best practices
- Four or five steps read best. Split longer processes into two widgets.
- Use the alternating layout for timelines and company history.
- Turn on Leading zero for an editorial look (01, 02, 03).
Process Showcase FAQ
Can the line between steps animate?
Yes. In Style > Connector choose light beam, flowing dashes, travelling dot or draw on scroll, and set its speed.
Can I add a button to each step?
Yes. Every step has Button text, Link and Icon fields. Leave the text empty to hide the button.
What happens on mobile?
Columns are set per device, so steps can stack in one column on phones. Connectors follow the new layout.
Summary
The Elementor process steps widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Horizontal, vertical, alternating or card layouts, icon or number markers and animated connectors. Install MoxKit Addons for Elementor from WordPress.org, drag the Process Showcase widget onto a page and start with the settings above.