Content · Elementor
Steps Process Timeline widget for Elementor
Numbered steps with icons and cards — a process, not a date timeline.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Numbered steps with icons and cards — a process, not a date timeline.
Steps Process Timeline Widget.
render() writes HTML data attributes: data-anchor, data-options, data-step-index.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Steps Process Timeline”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Widget Title”, “Subtitle”, “Layout”, “Step Numbering”. Style and Content tabs are listed on this page.
When to use it
- A “how it works” section.
- An onboarding flow.
- A four-step service.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Steps Process Timeline.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Widget Title | Saved on the widget and consumed in render(). |
| Content — Subtitle | Saved on the widget and consumed in render(). |
| Content — Layout | The chosen value is read in render() and applied on the front end. Options: Vertical; Vertical Compact; Horizontal (Pro). |
| Content — Step Numbering | The chosen value is read in render() and applied on the front end. Options: Auto; Manual. |
| Content — Number Format | The chosen value is read in render() and applied on the front end. Options: 1, 2, 3; 01, 02, 03 (Pro). |
| Content — Number Prefix (Pro) | Saved on the widget and consumed in render(). |
| Content — Number Suffix (Pro) | Saved on the widget and consumed in render(). |
| Content — Marker Type | The chosen value is read in render() and applied on the front end. Options: Number; Icon; Number + Icon (Pro). |
| Content — Line Position | The chosen value is read in render() and applied on the front end. Options: Left; Center. |
| Content — Content Alignment | Options: Left; Center; Right. |
| Content — Step Cards | Switcher inspector control (`kng_steps_card`). |
| Content — Stacking on Tablet | Options: Switch to vertical on tablet; Switch to vertical only on mobile. |
| Steps — Title | Text inspector control (`step_title`). |
| Steps — Description | Textarea inspector control (`step_description`). |
| Steps — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Steps — Manual Number | Text inspector control (`step_number`). |
| Steps — CTA Label | Text inspector control (`step_cta_text`). |
| Steps — CTA Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Steps — Anchor ID (Pro) | Use lowercase letters, numbers, dashes, or underscores only. |
| Steps — State (Pro) | Options: Default; Highlighted; Disabled. |
| Steps | Repeater rows; render() loops each item to build the list or slides. |
| Interactions (Pro) — Active Step on Scroll (Pro) | Switcher inspector control (`kng_steps_active_on_scroll`). |
| Interactions (Pro) — Enable Anchor Linking (Pro) | Switcher inspector control (`kng_steps_anchor_linking`). |
| Interactions (Pro) — Sync Active Step with Anchors (Pro) | Switcher inspector control (`kng_steps_anchor_sync`). |
| Interactions (Pro) — Anchor Offset (px) (Pro) | Numeric value used in this widget’s render/JS (default 0). |
| Interactions (Pro) — Enable Deep Linking (Pro) | Switcher inspector control (`kng_steps_deep_link`). |
| Interactions (Pro) — Enable Sticky Progress (Pro) | Switcher inspector control (`kng_steps_sticky_progress`). |
| Interactions (Pro) — Sticky Offset (px) (Pro) | Numeric value used in this widget’s render/JS (default 0). |
| Interactions (Pro) — Progress Calculation (Pro) | The chosen value is read in render() and applied on the front end. Options: First to Last Step; Widget Top to Bottom. |
| Interactions (Pro) — Enable Reveal Animations (Pro) | Switcher inspector control (`kng_steps_reveal`). |
| Interactions (Pro) — Reveal Type (Pro) | The chosen value is read in render() and applied on the front end. Options: Fade Up; Fade In; Slide Up; Scale In. |
| Interactions (Pro) — Stagger Delay (ms) (Pro) | Numeric value used in this widget’s render/JS (default 120). |
| Interactions (Pro) — Animation Trigger (Pro) | The chosen value is read in render() and applied on the front end. Options: On Enter Viewport; On Active Step. |
| Interactions (Pro) — Wrap Steps into Rows (Pro) | Switcher inspector control (`kng_steps_horizontal_wrap`). |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-steps-timeline`. |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-steps-timeline`. |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-steps-timeline`. |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Heading — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-steps__title`. |
| Heading — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Heading — Typography (Kng Steps Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-steps__subtitle`. |
| Heading — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Heading — Heading Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 80). |
| Steps — Gap Between Steps | Spacing/size control (min 0, max 80). |
| Steps — Marker to Content Gap | Spacing/size control (min 0, max 60). |
| Marker — Marker Size | Spacing/size control (min 24, max 120). |
| Marker — Icon Size | Spacing/size control (min 10, max 60). |
| Marker — Background | Color written to this widget’s CSS selector. |
| Marker — Text/Icon Color | Color written to this widget’s CSS selector. |
| Marker — Border Color | Color written to this widget’s CSS selector. |
| Marker — Border Width | Spacing/size control (min 0, max 6). |
| Marker — Active Background (Pro) | Color written to this widget’s CSS selector. |
| Marker — Active Text/Icon Color (Pro) | Color written to this widget’s CSS selector. |
| Marker — Active Border Color (Pro) | Color written to this widget’s CSS selector. |
| Marker — Completed Background (Pro) | Color written to this widget’s CSS selector. |
| Marker — Completed Text/Icon Color (Pro) | Color written to this widget’s CSS selector. |
| Line & Progress — Line Color | Color written to this widget’s CSS selector. |
| Line & Progress — Line Thickness | Spacing/size control (min 1, max 10). |
| Line & Progress — Line Style | Options: Solid; Dashed; Gradient (Pro). |
| Line & Progress — Progress Fill Color (Pro) | Color written to this widget’s CSS selector. |
| Line & Progress — Rounded Edges (Pro) | Spacing/size control (min 0, max 20). |
| Card — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-step__content`. |
| Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-step__content`. |
| Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-step__content`. |
| Card — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Card — Active Border Color (Pro) | Color written to this widget’s CSS selector. |
| Card — Active Shadow Color (Pro) | Color written to this widget’s CSS selector. |
| Text — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-step__title`. |
| Text — Step Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Typography (Kng Steps Step Desc Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-step__description`. |
| Text — Step Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Typography (Kng Steps Step Number Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-step__number`. |
| Text — Step Number Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — Typography (Kng Steps Cta Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-step__cta`. |
| Text — CTA Color | Writes CSS `color` onto the widget’s front-end markup. |
| Text — CTA Hover Color | Writes CSS (cta, color) onto the widget’s front-end markup. |
| Text — CTA Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Text — CTA Hover Background | Writes CSS (cta, background-color) onto the widget’s front-end markup. |
| Text — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-step__cta`. |
| Text — CTA Hover Border Color | Writes CSS (cta, border-color) onto the widget’s front-end markup. |
| Text — CTA Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Text — CTA Padding | Writes CSS `padding` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Steps Process Timeline options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Steps Process Timeline in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Steps Process Timeline”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Timeline Post/Story
A vertical or horizontal timeline for events, history, or a changelog.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Steps Process Timeline after you activate it.