Content · Elementor
Scrollytelling Slides widget for Elementor
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.
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
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.
Scrollytelling Slides Widget (Free).
render() writes HTML data attributes: data-anchor, data-index, data-json-url, data-options, data-settings, data-src.
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-src.
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 “Scrollytelling Slides”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Slide Label”, “Title”, “Subtitle”, “Description”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Scrollytelling Slides.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Scrollytelling Slides” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Slides — Slide Label | Text inspector control (`kng_slide_label`). |
| Slides — Title | Text inspector control (`kng_slide_title`). |
| Slides — Subtitle | Text inspector control (`kng_slide_subtitle`). |
| Slides — Description | Wysiwyg inspector control (`kng_slide_description`). |
| Slides — Bullets | Add one bullet per line. |
| Slides — CTA Text | Text inspector control (`kng_slide_button_text`). |
| Slides — CTA Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Slides — Media Type | Options: Image; Video; Lottie (Pro). |
| Slides — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Slides — Video URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Slides — Autoplay | Switcher inspector control (`kng_slide_video_autoplay`). |
| Slides — Muted | Switcher inspector control (`kng_slide_video_muted`). |
| Slides — Loop | Switcher inspector control (`kng_slide_video_loop`). |
| Slides — Show Controls | Switcher inspector control (`kng_slide_video_controls`). |
| Slides — Video Poster | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Slides — Lottie URL (Pro) | Text inspector control (`kng_slide_lottie_url`). |
| Slides — Lottie Loop (Pro) | Switcher inspector control (`kng_slide_lottie_loop`). |
| Slides — Lottie Speed (Pro) | Numeric control (default 1, min 0.1). |
| Slides — Lottie Segment Start (Pro) | Numeric control (min 0). |
| Slides — Lottie Segment End (Pro) | Numeric control (min 0). |
| Slides — Slide ID / Anchor (Pro) | Used for deep linking. |
| Slides — Start New Section | Switcher inspector control (`kng_slide_new_section`). |
| Slides — Section Heading | Text inspector control (`kng_slide_section_heading`). |
| Slides | Free version is limited to 5 slides. |
| Slides — Enable Sections | Switcher inspector control (`kng_sections_enable`). |
| Behavior (Pro) — Sticky Media Panel (Pro) | Switcher inspector control (`kng_media_sticky`). |
| Behavior (Pro) — Sticky Offset (px) (Pro) | Numeric value used in this widget’s render/JS (default 0). |
| Behavior (Pro) — Transition Type (Pro) | The chosen value is read in render() and applied on the front end. Options: Fade; Slide; Scale; Crossfade. |
| Behavior (Pro) — Transition Duration (ms) (Pro) | Spacing/size control (min 150, max 1200). |
| Behavior (Pro) — Transition Easing (Pro) | The chosen value is read in render() and applied on the front end. Options: Ease; Ease In; Ease Out; Ease In Out; Linear. |
| Behavior (Pro) — Clickable Dots (Pro) | Switcher inspector control (`kng_dots_clickable`). |
| Behavior (Pro) — Dot Labels (Pro) | The chosen value is read in render() and applied on the front end. Options: Default; None; Numbers; Slide Label. |
| Behavior (Pro) — Snap To Slides (Pro) | The chosen value is read in render() and applied on the front end. Options: Off; Soft; Strict. |
| Behavior (Pro) — Snap Duration (ms) (Pro) | Spacing/size control (min 150, max 2000). |
| Behavior (Pro) — Deep Linking (Pro) | Switcher inspector control (`kng_deep_link`). |
| Behavior (Pro) — Play Lottie On Active (Pro) | Switcher inspector control (`kng_lottie_active_only`). |
| Behavior (Pro) — Section Separators (Pro) | Switcher inspector control (`kng_section_separators`). |
| Layout — Columns Ratio | Options: 40 / 60; 50 / 50; 60 / 40. |
| Layout — Reverse Columns | Switcher inspector control (`kng_reverse_columns`). |
| Layout — Content Alignment | Options: Top; Center. |
| Layout — Column Gap | Spacing/size control (min 0, max 120). |
| Layout — Slide Gap | Spacing/size control (min 0, max 160). |
| Layout — Slide Min Height | Options: Auto; 100vh; Custom (vh). |
| Layout — Custom Min Height | Spacing/size control (min 120, max 400). |
| Layout — Media Aspect Ratio | The chosen value is read in render() and applied on the front end. Options: 16:9; 4:3; 1:1; 9:16; Custom. |
| Layout — Custom Ratio | Saved on the widget and consumed in render(). |
| Layout — Media Fit | Options: Cover; Contain. |
| Layout — Mobile Media Position | The chosen value is read in render() and applied on the front end. Options: Above Text; Below Text. |
| Layout — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Behavior — Activation Offset (%) | Spacing/size control (min 10, max 80). |
| Behavior — Scroll Margin Top | Spacing/size control (min 0, max 200). |
| Behavior — Progress Style | The chosen value is read in render() and applied on the front end. Options: Dots; Line. |
| Behavior — Show Markers | Switcher inspector control (`kng_progress_markers`). |
| Behavior — Show Numbers | Switcher inspector control (`kng_progress_numbers`). |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-scrollytelling`. |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-scrollytelling`. |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Container — Max Width | Writes CSS (max-width, margin-left, margin-right) onto the widget’s front-end markup. (min 320, max 1600). |
| Typography — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__title`. |
| Typography — Subtitle Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (Kng Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__subtitle`. |
| Typography — Body Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (Kng Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__description`. |
| Typography — Bullets Color | Writes CSS `color` onto the widget’s front-end markup. |
| Typography (Kng Bullets Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__bullets`. |
| Section Heading — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Section Heading — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__section`. |
| Section Heading — Spacing | Spacing/size control (min 0, max 80). |
| Slide Card — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-scrollytelling__card`. |
| Slide Card — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-scrollytelling__card`. |
| Slide Card — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slide Card — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-scrollytelling__card`. |
| Slide Card — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Media — Border 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-scrollytelling__media-frame`. |
| Media — Inactive Opacity | Spacing/size control (min 0, max 1). |
| Media — Active Opacity | Spacing/size control (min 0, max 1). |
| Media — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-scrollytelling__media-frame::after`. |
| Media — Overlay Opacity | Spacing/size control (min 0, max 1). |
| Progress — Column Width | Spacing/size control (min 24, max 120). |
| Progress — Dot Alignment | Options: Left; Center; Right. |
| Progress — Dot Size | Spacing/size control (min 6, max 24). |
| Progress — Dot Color | Color written to this widget’s CSS selector. |
| Progress — Active Dot Color | Color written to this widget’s CSS selector. |
| Progress — Completed Dot Color | Color written to this widget’s CSS selector. |
| Progress — Label Color | Color written to this widget’s CSS selector. |
| Progress — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__dot-label`. |
| Progress — Line Color | Color written to this widget’s CSS selector. |
| Progress — Line Thickness | Spacing/size control (min 1, max 6). |
| CTA Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-scrollytelling__button`. |
| CTA Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| CTA Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| CTA Button (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| CTA Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| CTA Button (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| CTA Button (Hover) — Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| CTA Button (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| CTA Button (Hover) — Border Color | Writes CSS (button, border-color) 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 Scrollytelling Slides 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 Scrollytelling Slides in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Scrollytelling Slides”, 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
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.
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 Scrollytelling Slides after you activate it.