Content · Elementor
Scroll Story Sections widget for Elementor
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.
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
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.
Scroll Story Sections Widget.
render() writes HTML data attributes: 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.
The widget script reads data attributes: data-active-index.
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 “Scroll Story Sections”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Layout”, “Columns Ratio”, “Vertical Align”, “Min Height”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Scroll Story Sections.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Scroll Story Sections” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Layout | Options: Two Columns; Two Columns Reversed. |
| Layout — Columns Ratio | Options: 40 / 60; 50 / 50; 60 / 40. |
| Layout — Vertical Align | Options: Top; Center. |
| Layout — Min Height | Writes CSS `min-height` onto the widget’s front-end markup. (min 200, max 1200). |
| Steps — Title | Text inspector control (`step_title`). |
| Steps — Subtitle | Text inspector control (`step_subtitle`). |
| Steps — Description | Wysiwyg inspector control (`step_description`). |
| Steps — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Steps — Media Type | Options: None; Image; Video (Pro); Lottie (Pro); Template (Pro). |
| Steps — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Steps — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Steps — CTA Text | 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) | Lowercase letters, numbers, dashes, or underscores only. |
| Steps | Repeater rows; render() loops each item to build the list or slides. |
| Behavior — Active Step Style | Options: Minimal; Highlighted; Card List. |
| Behavior — Content Transition | Options: Fade; Slide; None. |
| Behavior — Transition Duration (ms) | Numeric control (min 0). |
| Behavior — Activation Offset (%) | Spacing/size control (min 10, max 80). |
| Behavior — Smooth Scroll on Click | Switcher inspector control (`kng_scroll_story_smooth_scroll`). |
| Behavior — Scroll Duration (ms) | Numeric value used in this widget’s render/JS (default 600, min 0). |
| Sticky Media (Pro) — Enable Sticky Media | Switcher inspector control (`kng_scroll_story_sticky_enable`). |
| Sticky Media (Pro) — Sticky Top Offset (px) | Numeric control (default 24, min 0). |
| Progress (Pro) — Enable Progress | Switcher inspector control (`kng_scroll_story_progress_enable`). |
| Progress (Pro) — Progress Style | Options: Line + Dots; Bar; Numeric. |
| Progress (Pro) — Show Step Count | Switcher inspector control (`kng_scroll_story_progress_show_count`). |
| Templates (Pro) — Content Template ID | Numeric control (min 0). |
| Templates (Pro) — Media Template ID | Numeric control (min 0). |
| Templates (Pro) — Template Per Step | Switcher inspector control (`kng_scroll_story_template_per_step`). |
| Lottie (Pro) — Source | Options: None; URL; Media Library; JSON String. |
| Lottie (Pro) — Loop | Switcher inspector control (`kng_scroll_story_lottie_loop`). |
| Lottie (Pro) — Playback Speed | Numeric control (default 1, min 0.1). |
| Lottie (Pro) — Segment Start Frame | Numeric control (min 0). |
| Lottie (Pro) — Segment End Frame | Numeric control (min 0). |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-scroll-story`. |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Container — Column Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 120). |
| Container — Max Width | Writes CSS (max-width, margin-left, margin-right) onto the widget’s front-end markup. (min 600, max 1800). |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-scroll-story`. |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Steps List — Item Spacing | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 60). |
| Steps List — Icon Size | Spacing/size control (min 8, max 48). |
| Steps List — Icon Gap | Spacing/size control (min 0, max 40). |
| Steps List — Item Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Steps List — Accent Width | Spacing/size control (min 1, max 12). |
| Steps List — Accent Offset | Spacing/size control (min 0, max 30). |
| Steps List — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-scroll-story__step`. |
| Steps List — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-scroll-story__step`. |
| Steps List — Item Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Steps List — Completed Opacity | Spacing/size control (min 0, max 1). |
| Steps List — Item Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Steps List — Item Hover Background | Writes CSS (step, background-color) onto the widget’s front-end markup. |
| Steps List — Active Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Steps List — Active Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Steps List — Accent Line | Writes CSS `background-color` onto the widget’s front-end markup. |
| Steps List — Active Accent Line | Writes CSS `background-color` onto the widget’s front-end markup. |
| Steps List — Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Steps List — Active Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Steps List — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Steps List — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Steps List — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scroll-story__step-title`. |
| Steps List — Typography (Kng Scroll Story Steps Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scroll-story__step-subtitle`. |
| Content Panel — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel`. |
| Content Panel — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel`. |
| Content Panel — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content Panel — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel`. |
| Content Panel — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content Panel — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Panel — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Panel — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Panel — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel-title`. |
| Content Panel — Typography (Kng Scroll Story Panel Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel-subtitle`. |
| Content Panel — Typography (Kng Scroll Story Panel Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel-description`. |
| Content Panel — Typography (Kng Scroll Story Panel Cta Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel-cta`. |
| Content Panel — CTA Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content Panel — CTA Hover Text Color | Writes CSS (panel-cta, color) onto the widget’s front-end markup. |
| Content Panel — CTA Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content Panel — CTA Hover Background | Writes CSS (panel-cta, background-color) onto the widget’s front-end markup. |
| Content Panel — Border (Kng Scroll Story Panel Cta Border) | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel-cta`. |
| Content Panel — CTA Hover Border Color | Writes CSS (panel-cta, border-color) onto the widget’s front-end markup. |
| Content Panel — CTA Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content Panel — CTA Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Media — Media Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Media — Aspect Ratio | The chosen value is read in render() and applied on the front end. Options: Auto; 1:1; 4:3; 3:4; 16:9; 21:9; Custom. |
| Media — Custom Ratio | Use format like 16/9 or 4:3. |
| Media — Object Fit | Options: Cover; Contain; Fill; Scale Down. |
| Media — Max Height | Spacing/size control (min 100, max 1200). |
| Media — Media Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Media — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-scroll-story__panel-media img, {{WRAPPER}} .king-addons-scroll…`. |
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 Scroll Story Sections 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 Scroll Story Sections in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Scroll Story Sections”, 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
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.
Floating Tags Marquee
Floating Tags Marquee is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Floating Tags Marquee” in the Elementor panel.
Image Marquee
Image Marquee is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Image Marquee” in the Elementor panel.
Interactive Steps with Progress
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.
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.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Scroll Story Sections after you activate it.