---
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
lang: en
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?

## 

- Utilizes the Dynamic Device widget from The Plus Addons for Elementor to create interactive device scrolling mockups.
- Enables image scrolling effects by adjusting the Scroll Image toggle in the Style settings of the widget.
- Offers options for manual scroll functionality by activating the Manual Scroll toggle in the widget settings.

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/).