---
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-04-15
author: "Aditya Sharma"
description: "When creating a website for a business, one of the most important aspects to consider is the user experience. From the navigation to the design, creating a website that is..."
image: https://nexterwp.com/wp-content/uploads/2024/05/website-scrolling-device-mockup-in-wordpress-1024x519.jpg
word_count: 263
---

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

When creating a website for a business, one of the most important aspects to consider is the user experience. From the navigation to the design, creating a website that is easy to use and visually pleasing is essential for any company’s success. An effective design element for an improved user experience can be a scrolling device mockup.

With the Dynamic Device block from the Nexter Blocks, you can interactively show your portfolio images using a scrolling device mockup.

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

First, add the block on the page, and from the **Layout** section choose **Normal**.

After selecting the appropriate device type and mockup, go to **Content Type **and choose **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.

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

If you want to add a manual scroll instead of scrolling on mouse hover for your image, you can do that by turning on the **Manual Scroll** toggle.

Also, check [How to connect multiple scrolling device mockup in WordPress](https://nexterwp.com/docs/connect-multiple-scrolling-device-mockup-in-wordpress/).