---
title: "How to connect multiple scrolling device mockups in Elementor?"
url: https://theplusaddons.com/docs/connect-multiple-scrolling-device-mockups-in-elementor/
date: 2023-02-21
modified: 2026-04-12
author: "Aditya Sharma"
description: "Having a scrolling device mockup on your website is a perfect way to show your portfolio or image gallery on your website. You could make this scrolling device mockup more..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-connect-multiple-scrolling-device-mockups-in-Elementor-1024x536.jpg
word_count: 345
---

# How to connect multiple scrolling device mockups in Elementor?

## Key Takeaways

- Dynamic Device widget from The Plus Addons for Elementor allows interconnecting multiple widgets for simultaneous image scrolling effects.
- Users must select a tall vertical image for optimal scrolling effects in the Dynamic Device widget.
- All Dynamic Device widgets need to share the same unique ID to enable interconnected scrolling effects.

Having a scrolling device mockup on your website is a perfect way to show your portfolio or image gallery on your website. You could make this scrolling device mockup more dynamic by showing the image scrolling effect on multiple device mockups together. This way, you could show an entire responsive layout at once on multiple device mockups.

With the Dynamic Device widget from The Plus Addons for Elementor you can interconnect multiple Dynamic Device widgets with an ID to create a simultaneous image scrolling effect on multiple device mockups.

*To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Device widget, [click here](/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 multiple Dynamic Device widgets on the page. 

Select one widget 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.

Now in the **Dynamic Device Connection ID** field, add a unique id.

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

> *Note: You have to use this same id on all the Dynamic Device widgets that you want to interconnect.* 

Following the exact process, add content in the other Dynamic Device widgets on the page and use the same id in the **Dynamic Device Connection ID **field.

Now all the Dynamic Device widgets with the same id are interconnected and if someone hovers over any device mockup, all the device mockups will show an image scrolling effect together.

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

Check [how to show an iFrame inside a device mockup in Elementor](https://theplusaddons.com/docs/live-website-in-mockup-using-iframes-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if my scrolling device mockups aren't working together?**
A: If your scrolling device mockups aren't synchronizing, check that all Dynamic Device widgets have the same unique ID in the Dynamic Device Connection ID field. This ID is crucial for interconnecting the widgets. If they have different IDs, they won't respond to each other, and the scrolling effect won't work as intended.

**Q: What type of image works best for the scrolling effect?**
A: For the best scrolling effect, use a tall vertical image. This shape enhances the visual impact of the scrolling animation. A well-captured long screenshot can be particularly effective; consider using a free tool to create these images for optimal results.

**Q: What happens if I forget to set the same ID for all device mockups?**
A: If you forget to set the same ID for all Dynamic Device widgets, they will not be interconnected. This means that hovering over one mockup will not trigger the scrolling effect on the others, defeating the purpose of showcasing a cohesive responsive layout.