---
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 interconnects multiple Dynamic Device blocks with a unique id, and all blocks with the same id scroll together on mouse hover.
- Scroll Image toggle in Style > Image makes the uploaded image scroll on hover, and Transition Duration adjusts the image scroll speed.
- Tall vertical images create a good scrolling effect, and the post uses custom positioning to overlap the devices above each other for a better look.

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