---
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-09-19
lang: en
author: "Aditya Sharma"
description: "When you show the same design on a laptop and a phone side by side, it looks much better if hovering either one scrolls both at once. The Dynamic Device..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-connect-multiple-scrolling-device-mockups-in-Elementor-1024x536.jpg
word_count: 902
---

# How to connect multiple scrolling device mockups in Elementor?

## 

- Dynamic Device groups two or more mockups with the same Dynamic Device Connection ID, so hovering one scrolls the whole group together.
- The Plus Addons for Elementor Pro ships Dynamic Device only in Pro, and the widget does not render at all when Pro is deactivated.
- Scroll Image must be on and Manual Scroll must stay off for the Dynamic Device Connection ID field to appear and for mockups to connect.
- Transition Duration is set per widget, so matching values keep grouped mockups in step, while different IDs keep separate groups independent.

When you show the same design on a laptop and a phone side by side, it looks much better if hovering either one scrolls both at once.

The **Dynamic Device** widget does that with a **Dynamic Device Connection ID**: give two or more mockups the same ID and they become one group that scrolls together.

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

## Connect two or more mockups

- Build your first mockup as usual: **Layout** on **Normal**, a **Type** and frame, **Content** on **Image**, and a tall screenshot in **Media Image**.- On the **Style** tab, open **Device Background** and turn **Scroll Image** on. Leave **Manual Scroll** off — it hides the ID field.- Type a name into **Dynamic Device Connection ID**, for example **grp-a**. The editor describes the field as connecting multiple Dynamic Devices for the same hover effect.- Add the other mockups you want in the group. They can be different device types and carry different screenshots.- Give every mockup in the group the **same** Connection ID. Any mockup you want to behave independently gets a different ID, or none at all.

![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)

Keep the ID simple — letters, digits and hyphens. It is used as a CSS class on the widget, so spaces and punctuation will cause trouble.

## Settings that matter here

| Setting | Where | What it does | Default |
| ------- | ----- | ------------ | ------- |
| **Scroll Image** | Style > Device Background | Must be on. The Connection ID field only appears once it is. | Off |
| **Manual Scroll** | Style > Device Background | Must stay off. With it on, the Connection ID field is hidden and the mockup cannot join a group. | Off |
| **Dynamic Device Connection ID** | Style > Device Background | The group name. Mockups sharing it scroll together. | empty |
| **Transition Duration** | Style > Device Background | How long the travel takes, in seconds. Set it per widget; matching values keep a group in step. | 4 |

## How It Behaves

Measured on one page carrying three mockups: a laptop and a phone both set to **grp-a**, and a tablet set to **grp-b**.

- **At rest all three sat at the top of their screenshots.**- **Hovering the laptop scrolled both grp-a mockups.** The laptop and the phone travelled to the bottom of their images together; the grp-b tablet did not move.- **Hovering the grp-b tablet moved only the tablet.** The group is the boundary, so separate IDs stay independent.- **Moving the pointer away returned every mockup to the top.**- **Device types can be mixed freely.** The tested group paired a laptop with a phone, each with its own screenshot.

![Three mockups on one page; the laptop and the phone share a Dynamic Device Connection ID, the tablet uses a different one.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-result-connected.webp)

On the front end the group moves as one:

![multiple scrolling device demo](https://theplusaddons.com/wp-content/uploads/2023/02/multiple-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.- **The ID has to match exactly.** It is compared as written, so **grp-a** and **Grp-A** are not the same group. Keep to letters, digits and hyphens, and copy the value rather than retyping it.- **Connecting only works for Image content with Scroll Image on.** The field does not exist for **Template** or **IFrame** content, nor in the **Special Carousel** layout.- **Each mockup keeps its own timing.** **Transition Duration** is set per widget, so give every mockup in a group the same value or they will finish at different moments.- **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.

## 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.- **Large groups.** Connections were checked with three mockups on a page, in two groups. Behaviour with many more mockups in one group was not measured.- **Several groups hovered in quick succession.** Each group was hovered on its own; rapid switching between groups was not measured.

## Troubleshooting

### The Dynamic Device Connection ID field is not there

It only appears when **Layout** is **Normal**, **Content** is **Image**, **Scroll Image** is on and **Manual Scroll** is off. Manual Scroll is the usual culprit.

### Only the mockup I hover scrolls

The IDs do not match. Open each widget in the group and compare **Dynamic Device Connection ID** character for character, including capitals. Also check that **Scroll Image** is on for every mockup in the group.

### The mockups scroll but not in step

Their **Transition Duration** values differ. Set the same number of seconds on every widget in the group.

## Related Docs

- [How to add website scrolling device mockup in Elementor?](https://theplusaddons.com/docs/website-scrolling-device-mockup-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 connecting multiple scrolling device mockups in Elementor?**
A: The setup depends on three things: The Plus Addons for Elementor Pro must be installed and activated, Elementor must be installed and active, and the widget itself has to be enabled under The Plus Addons > Widgets. The page also calls for a tall vertical screenshot, because scroll travel is just the image height minus the device screen height. A short image barely moves, so the effect looks weak even when everything is configured correctly.

**Q: How do multiple device mockups scroll together with one hover?**
A: The grouping is controlled by Dynamic Device Connection ID. Give two or more mockups the same ID and they behave as one hover group, so hovering one device scrolls the others in sync. The page notes that the mockups can be different device types and still share the same group. The key detail is that every widget in the group must use the exact same ID, including capitalization.

**Q: Why is the Dynamic Device Connection ID field missing?**
A: That field only appears when Layout is Normal, Content is Image, Scroll Image is on, and Manual Scroll is off. Manual Scroll is usually the reason people think something is broken, because it hides the ID field and prevents grouping. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that field as the group name, so if any of those conditions are wrong, the widget cannot join a shared hover group.

**Q: Why do only some of my scrolling mockups move together?**
A: Mismatched IDs are the usual cause. The page says the value is compared exactly as written, so grp-a and Grp-A are different groups. It also says every mockup in the group needs Scroll Image on. A practical habit here is to copy the ID instead of retyping it, because spaces and punctuation can cause trouble when the value is used as a CSS class.

**Q: What should I set so grouped mockups stay in sync?**
A: Transition Duration matters because it controls how long each mockup takes to travel in seconds. The page says each widget keeps its own timing, so if one device uses a different duration it will finish at a different moment and look out of step. Matching Transition Duration across all widgets in a group keeps them aligned visually. That matters most when you mix device types or screenshots with different sizes.

**Q: Can I mix laptop, phone, and tablet mockups in one scrolling group?**
A: The tested setup mixed device types freely, including a laptop with a phone in the same group. One example used three mockups on a page: two devices shared grp-a and a tablet used grp-b. Hovering one group moved only that group, while the other stayed still. That makes separate IDs useful when you want side-by-side comparisons without every mockup reacting at once.