Media · Elementor
Vertical Scrollable Image widget for Elementor
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups.
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
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups.
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 “Vertical Scrollable Image”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image”, “Image Size”, “Box Height (px)”, “Scrolling Duration (milliseconds)”. Style and Content tabs are listed on this page.
When to use it
- A website screenshot in a portfolio.
- A mobile app long-scroll preview.
- A packaging die-line.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| General — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| General — Box Height (px) | Image size should be more than the box width or height, otherwise scrolling will not work. You can also limit the box width in the container, section or column width settings accordingly. |
| General — Scrolling Duration (milliseconds) | Writes CSS `transition` onto the widget’s front-end markup. (default 1000, min 100). Greater is slower. |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| General — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-vertical-scrollable-image`. |
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
What does Vertical Scrollable Image actually change on the page?
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups. Inspector labels from this widget’s PHP include “Image”, “Image Size”, “Box Height (px)”, “Scrolling Duration (milliseconds)”.
How do I add Vertical Scrollable Image in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Vertical Scrollable Image”, 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 media widgets
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Image Hotspots
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
Image Accordion
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Vertical Scrollable Image after you activate it.