---
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-09-27
lang: en
author: "Aditya Sharma"
description: "A phone and a desktop side by side tell a responsive story — but only if they move together. Connecting mockups ties their scrolling to one another, so hovering either..."
image: https://nexterwp.com/wp-content/uploads/2024/05/connect-multiple-scrolling-device-mockup-in-wordpress-1024x519.jpg
word_count: 327
---

# How to connect multiple scrolling device mockup in WordPress?

## Key Takeaways

- Dynamic Device in Nexter Blocks Pro links two or more scrolling mockups by shared connect name, so hovering one device scrolls every device with the same name.
- Nexter Blocks Pro stores the connection in markup with data-connectdd and the class tpgb-dd-multi-connect, and devices with different names keep scrolling independently.
- Dynamic Device requires scrolling to be switched on for each device, matching screenshot heights, and hover support, so typos, different lengths, or touch screens stop the linked scrolling behavior.

A phone and a desktop side by side tell a responsive story — but only if they move together.

Connecting mockups ties their scrolling to one another, so hovering either one scrolls both.

*For every Dynamic Device setting in one place, see the [Dynamic Device block guide](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/).*

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

## Before You Start

- **Edition:** **Pro** — the Dynamic Device block is part of Nexter Blocks Pro.- **Block to enable:** Dynamic Device, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Two or more Dynamic Device blocks**, each with a tall screenshot and scrolling on.

## Steps

- Add the **Dynamic Device** block and click **Design from Scratch**.

- Choose the **Device Type** — mobile, tablet, laptop or desktop — then pick the exact frame from the list below it.

![The Device Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-device.webp)

- Set each device up with its own screenshot and scrolling switched on.

![The Content Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-content.webp)

- Give every device you want linked the **same connect name**.

- Publish and hover one of them.

## How It Behaves

- **The connection is a shared name in the markup.** Measured: connected devices carry `data-connectdd` with the name you chose, plus the class `tpgb-dd-multi-connect`.- Every device with the same name scrolls together, so one hover moves the whole set.- The devices can be different types — a phone and a desktop showing the same page is the usual reason to do this.- Devices with different names, or no name, keep scrolling independently.

## Limitations

- **Pro only.**- **The names must match exactly**, and a typo simply leaves the devices unconnected with no warning.- Screenshots of different lengths fall out of step, since each scrolls its own full height.- It relies on hover, so connected scrolling does not happen on touch screens.

## Troubleshooting

### Only one device scrolls

The connect names do not match. Check them character for character.

### They scroll at different rates

The screenshots are different heights. Make them the same length.

### Nothing scrolls at all

Each device needs scrolling switched on individually — connecting them does not enable it.

## Related Docs

- [Scrolling device mockup](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/)- [Portfolio showcase page](https://nexterwp.com/docs/create-website-portfolio-showcase-page-in-wordpress/)- [Dynamic Device: all settings](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/)