Single Image Scroll
Show off a website or app screenshot inside a device frame.
A long screenshot or panorama inside a browser, laptop, monitor, tablet or phone frame that glides on hover, follows the pointer, moves with the page, loops or scrolls by wheel, drag and touch.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Single Image Scroll. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Image
| Setting | What you can set |
|---|---|
| Long Image | A tall screenshot, or a wide panorama for the horizontal direction. |
| Image Resolution | any registered image size |
| Image Dimension | You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio. |
| Frame | None, Browser window, Laptop, Desktop monitor, Tablet or Phone |
| Address Bar Text | Text |
| Frame Colour | Space grey, Silver, Gold or Custom (Style tab) |
| Window Height | 120–1200 · Leave empty to use the frame's own shape. |
| Width | 150–1400 |
| Position | Left, Center or Right |
| Link | Link |
Scrolling
| Setting | What you can set |
|---|---|
| Direction | Vertical (tall image) or Horizontal (wide image) |
| Scroll On | Hover — glides to the end and back, Mouse wheel / drag / touch — scroll it yourself, Pointer position — follows the mouse, Page scroll — moves as the page scrolls or Automatic — loops by itself |
| Start at the End | On / off |
| Speed (px per second) | 50–3000 · Long images take longer, at the same pace. |
| Return Speed (px per second) | 100–6000 |
| Pause at Each End (s) | Number |
| Pause on Hover | On / off |
| Easing | Smooth, Linear or Ease out |
| Show Progress Bar | On / off |
Hint, Badge & Caption
| Setting | What you can set |
|---|---|
| Hint | Shown over the image until it starts moving. Leave empty for none. |
| Hint Icon | Icon picker |
| Hint Style | Pill at the bottom or Dimmed overlay, centred |
| Badge | Text |
| Caption Title | Text |
| Title Tag | H2, H3, H4, H5, H6 or div |
| Caption Text | Text |
| Caption Link Text | Text |
| Caption Alignment | Left, Center or Right |
Style tab: design controls for Frame & Window or Hint, Badge & Caption — colours, typography, spacing, borders and hover states.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Works well with: Image Accordion, Image Carousel, Image Compare.