---
title: "How to add website scrolling device mockup in Elementor?"
url: https://theplusaddons.com/docs/website-scrolling-device-mockup-in-elementor/
date: 2023-02-21
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "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,..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-add-website-scrolling-device-mockup-in-Elementor-1024x536.jpg
word_count: 1169
---

# How to add website scrolling device mockup in Elementor?

## 

- Dynamic Device in The Plus Addons for Elementor Pro scrolls a tall screenshot inside a device frame, and the tested image size is 800 × 3200 pixels.
- Scroll Image moves the screenshot from top to bottom on hover, and Transition Duration defaults to 4 seconds with a range from 0.1 to 10.
- Manual Scroll replaces hover travel with a real scrollbar inside the frame, and it hides the Dynamic Device Connection ID field.
- The widget requires Elementor free installed and active, and it does not render at all when Pro is deactivated.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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](https://wordpress.org/plugins/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.

![Style > Device Background, where Scroll Image, Manual Scroll, Transition Duration and the Dynamic Device Connection ID live.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-scroll-settings.webp)

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.

![Hovering the mockup scrolls the tall screenshot down to its bottom inside the laptop frame.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-result-scroll.webp)

## 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.

![With Manual Scroll on, the screenshot gets its own scrollbar inside the frame and the visitor scrolls it by hand.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-result-manual.webp)

## 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:

![scrolling device demo](https://theplusaddons.com/wp-content/uploads/2023/02/scrolling-device-demo.gif)

## 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.

## Related Docs

- [How to connect multiple scrolling device mockups in Elementor?](https://theplusaddons.com/docs/connect-multiple-scrolling-device-mockups-in-elementor/)- [How to create Website Portfolio/Showcase Page in Elementor?](https://theplusaddons.com/docs/create-website-portfolio-showcase-page-in-elementor/)- [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/)

## Frequently Asked Questions

**Q: What do I need before adding a scrolling device mockup in Elementor?**
A: The key requirement is a tall vertical screenshot, because the scroll distance is the image height minus the device screen height. The page tested an 800 × 3200 pixel image, and that size gives enough travel to make the effect obvious. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH ships this as a Pro-only Dynamic Device widget, so Pro must be installed and active, along with Elementor itself.

**Q: Should I use hover scrolling or manual scrolling for a device mockup?**
A: Hover scrolling works best when you want the mockup to animate on pointer movement, while Manual Scroll is better when you want the visitor to control the content inside the frame. Hover mode travels the screenshot from top to bottom and back again. Manual Scroll replaces that behavior with a real scrollbar inside the device screen, so it is the safer choice on touch devices where hover does nothing.

**Q: Why is my scrolling device mockup not moving on hover?**
A: The usual causes are simple: Scroll Image may still be off, Manual Scroll may be on, or the screenshot may not be tall enough. Hover scrolling is disabled when Manual Scroll is enabled because it replaces the hover animation instead of adding to it. The image also has to be much taller than the device screen, otherwise there is almost no travel distance.

**Q: Why does my screenshot barely move inside the device frame?**
A: The travel distance is calculated as image height minus device screen height, so a short screenshot will barely move. The page’s tested fixture was 800 × 3200 pixels, which gives enough vertical room for a visible scroll effect. If your capture is close to the screen height, there simply is not much content left to scroll inside the mockup.

**Q: Does the scrolling device mockup work on touch screens or mobile devices?**
A: Hover scrolling depends on moving a pointer onto and off the mockup, so it does not have anything to react to on touch screens. Manual Scroll is the option that visitors can always operate because it gives them an actual scrollbar inside the frame. The page also notes that responsive behavior at tablet and mobile breakpoints was not measured.

**Q: Can I link multiple scrolling device mockups together in Elementor?**
A: The Dynamic Device Connection ID field is what links several mockups so they scroll together, but it only exists when Manual Scroll is off. Once Manual Scroll is enabled, that field disappears because manual scrolling replaces hover travel instead of syncing it. For connected examples and related setup details, see [How to connect multiple scrolling device mockups in Elementor?](https://theplusaddons.com/docs/connect-multiple-scrolling-device-mockups-in-elementor/).