A single screenshot only shows the top of a page. The Dynamic Device widget can take a tall screenshot of the whole page and scroll it inside the device frame, so visitors see the entire design without leaving your page.
There are two ways to do it: Scroll Image, which travels the screenshot from top to bottom when the pointer is over the mockup, and Manual Scroll, which gives the screenshot its own scrollbar inside the frame. You pick one or the other.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Dynamic Device ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and there is no free version of it.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Dynamic Device and turn its toggle on.
- Prerequisite: a tall vertical screenshot of the page you want to show. The tested image was 800 × 3200 pixels. The scroll travel is the difference between the image height and the device screen height, so a short image barely moves.
Scroll the screenshot on hover
- Edit your page with Elementor and drag the Dynamic Device widget onto the layout.
- In Content > Content, leave Layout on Normal, choose a Type and then a frame — Laptop with Macbook Black (800px x 500px) is a good starting point for a desktop screenshot.
- Leave Content on Image and add your tall screenshot in Media Image.
- Switch to the Style tab, open Device Background and turn Scroll Image on.
- Set Transition Duration to control how long the travel takes. It is measured in seconds, it defaults to 4, and it runs from 0.1 to 10.
Save and view the page. Move the pointer over the mockup and the screenshot travels down to its bottom; move it away and the screenshot travels back to the top.
Let the visitor scroll it by hand instead
If you would rather the visitor control the scroll, turn on Manual Scroll, just below Scroll Image in the same section. The screenshot then gets a real scrollbar inside the device screen.
- Width appears with it, a percentage from 1 to 100 that sets how wide the scrolling image sits inside the screen. It behaves as 100% until you change it.
- Style > Image Scrolling Bar appears too, with Scrollbar, Thumb and Track headings for styling that scrollbar.
- The hover animation stops. Manual Scroll replaces it; it does not add to it.
- The Dynamic Device Connection ID field disappears, so a manual-scroll mockup cannot be linked to other mockups.
Settings
| Setting | Where | What it does | Default |
|---|---|---|---|
| Scroll Image | Style > Device Background | Travels the image from its top to its bottom inside the screen while the pointer is over the mockup. | Off |
| Manual Scroll | Style > Device Background | Replaces the hover travel with a real scrollbar inside the frame. | Off |
| Width | Style > Device Background | How wide the manually scrolled image is, as a percentage. Range 1 to 100. | 100% |
| Transition Duration | Style > Device Background | How long the hover travel takes, in seconds. Range 0.1 to 10, in steps of 0.1. | 4 |
| Dynamic Device Connection ID | Style > Device Background | Links several mockups so they scroll together. Hidden while Manual Scroll is on. | empty |
| Width Adjust(%) | Style > Device Layout | Scales the whole mockup, 10% to 100%. | 100 |
How It Behaves
Measured on a page with a Macbook Black frame and an 800 × 3200 screenshot:
- Hover really moves the image. At rest the screenshot sits at its top edge inside the screen; on hover it travels to its bottom edge, and on mouse-out it travels back.
- Transition Duration is in seconds, and the shipped default is 4. Left untouched, one full travel takes four seconds; set to 1, it takes one second.
- Manual Scroll swaps the mechanism. With it on, the image inside the frame becomes genuinely scrollable — in the test its content was 3208 pixels tall inside a 647 pixel window — and hovering no longer moves anything.
- The travel depends on your image. The distance the screenshot moves is its height minus the height of the device screen.
On the front end, the finished effect looks like this:
Limitations
- Manual Scroll replaces the hover animation, it does not add to it. With Manual Scroll on, hovering the mockup does nothing; the visitor scrolls the image by hand inside the frame instead. It also hides the Dynamic Device Connection ID field, so a manual-scroll device cannot be linked to other mockups.
- A short image barely moves. The scroll travel is the image height minus the device screen height. The tested fixture was 800 × 3200; an image close to the screen height has almost nothing to travel.
- Hover scrolling needs a pointer. The effect is driven by moving the pointer onto and off the mockup, so on a touch screen there is nothing to hover. Manual Scroll is the option that a visitor can always operate.
- The scrolling effects are for Image content only. They do not appear for IFrame, and they are not part of the Special Carousel layout. Template content has its own separate On Hover Scroll setting.
- A Custom mockup hides your content unless its screen area is transparent. The frame image is drawn over the content, so an ordinary opaque JPEG shows only itself — the image, template or page behind it is completely invisible. Use a PNG with the screen cut out. Nothing in the editor warns you about this.
- Desktop has exactly one frame. Desktop Device offers iMac Minimal (1000px x 565px) and nothing else, so there is no choice to make there.
Not verified
So you know exactly what has and has not been checked:
- Responsive behaviour. Nothing was measured at tablet or mobile breakpoints, and the responsive Width Adjust(%) and Transition Duration values were not exercised.
- Image Scrolling Bar styling. The Scrollbar, Thumb and Track controls were not exercised.
- Select Link/Popup. The Link and Popup behaviour on the mockup image was not exercised.
- Show Icon and Upload Icon. The icon overlay was not exercised on the front end.
Troubleshooting
Hovering does nothing
Check three things, in order. Scroll Image in Style > Device Background is off by default, so turn it on. If it is on, make sure Manual Scroll is off — it replaces the hover effect. Finally, make sure the image is much taller than the device screen.
The image barely moves
Your screenshot is too short. The travel is the image height minus the screen height, so use a full-page capture. The tested fixture was 800 × 3200 pixels.
The scroll is too fast or too slow
Change Transition Duration in Style > Device Background. The value is in seconds and defaults to 4, so 1 makes the travel four times faster.
The Dynamic Device Connection ID field has disappeared
It is hidden while Manual Scroll is on. Turn Manual Scroll off and the field comes back.
