---
title: "How to connect multiple scrolling device mockup in WordPress?"
url: https://nexterwp.com/docs/connect-multiple-scrolling-device-mockup-in-wordpress/
date: 2023-02-22
modified: 2026-04-15
author: "Aditya Sharma"
description: "If you are using multiple device mockups to show your portfolio images, particularly responsive design layout, you can connect them to create a more compelling user experience. The Dynamic Device..."
image: https://nexterwp.com/wp-content/uploads/2024/05/connect-multiple-scrolling-device-mockup-in-wordpress-1024x519.jpg
word_count: 310
---

# How to connect multiple scrolling device mockup in WordPress?

## Key Takeaways

- Dynamic Device block from Nexter Blocks allows interconnection of multiple blocks using a unique ID.
- Users can adjust the image scroll speed from the Transition Duration section in the Dynamic Device block settings.
- Selecting a tall vertical image enhances the scrolling effect when using the Dynamic Device block.

If you are using multiple device mockups to show your portfolio images, particularly responsive design layout, you can connect them to create a more compelling user experience.

The Dynamic Device block from the Nexter Blocks has a unique feature that allows you to interconnect multiple Dynamic Device blocks using a unique id easily.

*To check the complete feature overview documentation of the Nexter Blocks* Dynamic Device block, [click here](/docs/dynamic-device-block-settings-overview/).

***Requirement  - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-device-mockups/)

To do this, add multiple Dynamic Device blocks on the page. 

Select one block and from the **Layout** section choose **Normal**.

After choosing the appropriate device type and mockup, go to **Content Type **and select **Image **from the section.

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

![](https://nexterwp.com/wp-content/uploads/2023/02/dynamic-device-normal-image-vertical-new.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 create long website screenshots from a url.*

Now go to **Style** > **Image** 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.

![](https://nexterwp.com/wp-content/uploads/2023/02/dynamic-device-style-image-scroll-image-device-conn-id-new.png)

> *Note: You must use this same id on all the Dynamic Device blocks you want to interconnect.* 

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

That’s it! All the Dynamic Device blocks with the same id are interconnected, and all will scroll together on mouse hover. We have used custom positioning to overlap the devices above each other to add a better look.

Also, check [How to create a Device Slider in WordPress](https://nexterwp.com/docs/device-slider-in-wordpress/).

## Frequently Asked Questions

**Q: What should I do if my Dynamic Device blocks are not scrolling together?**
A: If your Dynamic Device blocks are not scrolling together, ensure that you have used the same unique ID in the Dynamic Device Connection ID field for all the blocks you want to interconnect. This ID must be consistent across all blocks to enable the scrolling effect. Additionally, check that the Scroll Image toggle is enabled in the Style settings for each block.

**Q: What type of image works best for the scrolling effect in Dynamic Device blocks?**
A: For the best scrolling effect in Dynamic Device blocks, it's recommended to use tall vertical images. This type of image enhances the scrolling experience when users hover over the mockups. You can create long website screenshots from a URL using free tools to achieve this.

**Q: What happens if I forget to set the unique ID for my Dynamic Device blocks?**
A: If you forget to set the unique ID for your Dynamic Device blocks, they will not be interconnected, and the scrolling effect will not work as intended. Each block must share the same ID to synchronize scrolling, so double-check this setting to ensure a seamless user experience.

**Q: Are there any performance considerations when using multiple Dynamic Device blocks?**
A: Using multiple Dynamic Device blocks can impact page performance, especially if they contain high-resolution images. Since Nexter Blocks load only 1 CSS and 1 JS file per page, the overall impact is minimized, but it's still wise to optimize your images for web use to maintain fast loading times.