---
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-04-12
author: "Aditya Sharma"
description: "The importance of having an eye-catching website cannot be overstated. It can make or break your online presence and can be the difference between success and failure. With the help..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-add-website-scrolling-device-mockup-in-Elementor-1024x536.jpg
word_count: 304
---

# How to add website scrolling device mockup in Elementor?

## Key Takeaways

- Dynamic Device widget from The Plus Addons for Elementor creates interactive device scrolling mockups for WordPress websites.
- Users can adjust the image scroll speed using the Transition Duration section in the Dynamic Device widget settings.
- The widget requires a tall vertical image for an effective scrolling effect when the Scroll Image toggle is activated.

The importance of having an eye-catching website cannot be overstated. It can make or break your online presence and can be the difference between success and failure. With the help of image scroll elements, your website can have a modern, interactive look that will draw the eye of visitors and keep them engaged.

With the scrolling device mockup where you can add an image scrolling effect inside a device mockup to showcase your portfolio or image gallery in an interactive way.

With the Dynamic Device widget from The Plus Addons for Elementor, you can make beautiful device scrolling mockups for your WordPress website.

*To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic* *Device widget, [click here](https://theplusaddons.com/docs//dynamic-device-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its 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)

To do this, add the widget on the page and from the Layout dropdown, choose **Normal**.

After choosing the appropriate device type and mockup, go to **Content **and choose **Image **from the dropdown.

Now add your image from the **Media Image** section.

![dynamic device image](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-image.png)

> *Note: Make sure to choose a tall vertical image for a good scrolling effect.* You can use this [Free tool](https://screenshot.guru/) to capture long screenshots of website

Now go to **Style** > **Device Background** and turn on the **Scroll Image** toggle. This will make your image scroll when someone hovers over it.

You can adjust the image scroll speed from the **Transition Duration** section.

![dynamic device scroll image](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-scroll-image.png)

If you want to add a manual scroll instead of scrolling on mouse hover for your image, you can do that by turning on the **Manual Scroll** toggle.

Now you should have a beautiful image scrolling effect inside a device mockup.

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

Also, learn [how to connect scrolling device mockups in Elementor](https://theplusaddons.com/docs//connect-multiple-scrolling-device-mockups-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the scrolling device mockup isn't displaying correctly?**
A: If the scrolling device mockup isn't displaying as expected, ensure that you have installed and activated The Plus Addons for Elementor. This widget is specifically designed to work with Elementor, and without it, the mockup won't function. Additionally, check that you have selected a tall vertical image for the best scrolling effect, as this is crucial for proper display.

**Q: What image dimensions work best for the scrolling effect?**
A: For optimal results with the scrolling effect, it's best to use tall vertical images. This dimension allows for a smoother scrolling experience and ensures that the content is displayed effectively within the device mockup. If you need to capture long screenshots, consider using a free tool designed for that purpose.