---
title: "How to add website scrolling device mockup in WordPress?"
url: https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/
date: 2023-02-22
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "A whole web page squeezed into a phone screen is unreadable; cropped to the top, it says nothing about the rest. The scrolling option puts the full-length screenshot inside the..."
image: https://nexterwp.com/wp-content/uploads/2024/05/website-scrolling-device-mockup-in-wordpress-1024x519.jpg
word_count: 349
---

# How to add website scrolling device mockup in WordPress?

## Key Takeaways

- Nexter Blocks Dynamic Device block shows portfolio images in a scrolling device mockup.
- Style > Image turns on the Scroll Image toggle, so the image scrolls on mouse hover, and Transition Duration adjusts the scroll speed.
- Manual Scroll toggle switches the effect from hover-based scrolling to manual scrolling for the image.

A whole web page squeezed into a phone screen is unreadable; cropped to the top, it says nothing about the rest.

The scrolling option puts the full-length screenshot inside the frame and moves it, so visitors see the whole page in the space of one device.

*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.- **A full-page screenshot** — tall, showing the whole page rather than just the top.

## 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)

- Switch the scrolling option on in the device settings.

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

- Add your tall screenshot.

- Set the transition duration, and decide whether it scrolls on hover or the visitor drags it.

- Publish and hover the device.

## How It Behaves

- **The scrolling is real.** Measured: the content wrapper gains `tpgb-scroll-img-js` and the scroll elements appear inside the frame.- **Manual mode hands control to the visitor** instead of scrolling on hover, which suits a long page someone may want to study.- **Transition duration sets the pace** of the automatic scroll.- It works with any device frame, though a tall phone shows the least at a time.

## Limitations

- **Pro only.**- A very tall screenshot is a large file. Compress it before uploading.- Automatic scrolling needs hover, which touch screens do not have — manual mode is the better choice if phone visitors matter.- The screenshot is a picture, so nothing in it is selectable or searchable.

## Troubleshooting

### Nothing scrolls

Check the scrolling option is on, and that your screenshot is actually taller than the screen area.

### It scrolls too fast to read

Raise the transition duration, or switch to manual so the visitor sets the pace.

### Nothing happens on my phone

Automatic scrolling is on hover. Use manual mode for touch screens.

## Related Docs

- [Connect several scrolling devices](https://nexterwp.com/docs/connect-multiple-scrolling-device-mockup-in-wordpress/)- [Dynamic Device: all settings](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/)- [Device slider](https://nexterwp.com/docs/device-slider-in-wordpress/)