Content · Elementor
Interactive Steps with Progress widget for Elementor
Interactive Steps with Progress is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Steps with Progress” in the Elementor panel.
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
Interactive Steps with Progress is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Steps with Progress” in the Elementor panel.
Interactive Steps with Progress Widget.
render() writes HTML data attributes: data-anchor, data-settings, 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 “Interactive Steps with Progress”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Orientation”, “Content Alignment”, “Step Gap”, “Content Padding”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Interactive Steps with Progress.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Interactive Steps with Progress” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Layout — Orientation | The chosen value is read in render() and applied on the front end. Options: Vertical; Horizontal (Pro). |
| Layout — Content Alignment | The chosen value is read in render() and applied on the front end. Options: Left; Center. |
| Layout — Step Gap | Spacing/size control (min 0, max 80). |
| Layout — Content Padding | Spacing/size control. |
| Layout — Connector Line | The chosen value is read in render() and applied on the front end. Options: Show; Hide. |
| Layout — Line Thickness | Spacing/size control (min 1, max 10). |
| Layout — Line Offset | Spacing/size control (min 0, max 40). |
| Steps — Step Numbering | The chosen value is read in render() and applied on the front end. Options: Auto; Manual. |
| Steps — Title | Text inspector control (`step_title`). |
| Steps — Short Description | Textarea inspector control (`step_description`). |
| Steps — Details | Wysiwyg inspector control (`step_details`). |
| Steps — Details List (Optional) | Add one list item per line. |
| Steps — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Steps — Icon Position | Options: Left; Top. |
| Steps — Custom 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 | Repeater rows; render() loops each item to build the list or slides. |
| Behavior — Expand Behavior | The chosen value is read in render() and applied on the front end. Options: Always Open; Click to Expand. |
| Behavior — Default Open | The chosen value is read in render() and applied on the front end. Options: First Step; All Closed. |
| Behavior — Single Open | Switcher inspector control (`kng_steps_single_open`). |
| Behavior — Scroll to Step on Click | Switcher inspector control (`kng_steps_scroll_to_step`). |
| Progress — Progress Style | The chosen value is read in render() and applied on the front end. Options: Dots + Line; Numbered Badges. |
| Progress — Show Completed State | The chosen value is read in render() and applied on the front end. Options: Yes; No. |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-interactive-steps`. |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| 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-interactive-steps`. |
| Step Item — Card Mode | Switcher inspector control (`kng_steps_card`). |
| Step Item — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step Item — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-isp-step__body`. |
| Step Item — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Step Item — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-isp-step__body`. |
| Step Item — Hover Background | Writes CSS (king-addons-isp-step, background-color) onto the widget’s front-end markup. |
| Step Item — Hover Border Color | Writes CSS (king-addons-isp-step, border-color) onto the widget’s front-end markup. |
| Step Item — Box Shadow (Kng Steps Item Shadow Hover) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-isp-step:hover .king-addons-isp-step__body`. |
| Step Item — Active Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step Item — Active Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step Item — Box Shadow (Kng Steps Item Shadow Active) | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-isp-step.is-active .king-addons-isp-step__body`. |
| Marker & Progress — Marker Size | Spacing/size control (min 16, max 80). |
| Marker & Progress — Dot Size | Spacing/size control (min 6, max 30). |
| Marker & Progress — Icon Size | Spacing/size control (min 10, max 48). |
| Marker & Progress — Icon Spacing | Spacing/size control (min 0, max 40). |
| Marker & Progress — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-isp-step__number`. |
| Marker & Progress — Typography (Kng Steps Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-isp-step__label`. |
| Marker & Progress — Label Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Marker Text Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Marker Background | Color written to this widget’s CSS selector. |
| Marker & Progress — Marker Border Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Active Marker Text | Color written to this widget’s CSS selector. |
| Marker & Progress — Active Marker Background | Color written to this widget’s CSS selector. |
| Marker & Progress — Active Marker Border | Color written to this widget’s CSS selector. |
| Marker & Progress — Completed Marker Text | Color written to this widget’s CSS selector. |
| Marker & Progress — Completed Marker Background | Color written to this widget’s CSS selector. |
| Marker & Progress — Completed Marker Border | Color written to this widget’s CSS selector. |
| Marker & Progress — Icon Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Active Icon Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Completed Icon Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Line Color | Color written to this widget’s CSS selector. |
| Marker & Progress — Active Line Color | Color written to this widget’s CSS selector. |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-isp-step__title`. |
| Typography — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (Kng Steps Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-isp-step__description`. |
| Typography — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (Kng Steps Details Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-isp-step__details`. |
| Typography — Details Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography — Active Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography — Active Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| CTA — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-isp-step__cta`. |
| CTA — CTA Color | Writes CSS `color` onto the widget’s front-end markup. |
| CTA — CTA Hover Color | Writes CSS (cta, color) onto the widget’s front-end markup. |
| CTA — CTA Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| CTA — CTA Hover Background | Writes CSS (cta, background-color) onto the widget’s front-end markup. |
| CTA — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-isp-step__cta`. |
| CTA — CTA Hover Border Color | Writes CSS (cta, border-color) onto the widget’s front-end markup. |
| CTA — CTA Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| CTA — 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 Interactive Steps with Progress 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 Interactive Steps with Progress in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Interactive Steps with Progress”, 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
FAQ Schema
FAQ Schema is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “FAQ Schema” in the Elementor panel.
Scroll Story Sections
Scroll Story Sections is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Scroll Story Sections” in the Elementor panel.
Scrollytelling Slides
Scrollytelling Slides is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Scrollytelling Slides” in the Elementor panel.
Announcement / Promo Bar
Announcement / Promo Bar is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Announcement / Promo Bar” in the Elementor panel.
Comparison Matrix Cards
Comparison Matrix Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Comparison Matrix Cards” in the Elementor panel.
Content Toggle
Content Toggle is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Content Toggle” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Interactive Steps with Progress after you activate it.