---
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 includes the Dynamic Device block, which allows users to showcase portfolio images with a scrolling device mockup.
- Users can enhance the scrolling effect by selecting a tall vertical image and enabling the Scroll Image toggle in the Style settings.
- The image scroll speed can be adjusted using the Transition Duration section within the Dynamic Device block settings.

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

## Frequently Asked Questions

**Q: What should I do if my scrolling device mockup isn't displaying correctly?**
A: If your scrolling device mockup isn't displaying as expected, first ensure that the Nexter Blocks plugin is installed and activated. This block is essential for using the Dynamic Device feature. Additionally, check that you have selected a tall vertical image for optimal scrolling effects. If the image is too short, it may not scroll properly.

**Q: What is the best image type to use for the scrolling effect?**
A: For the best scrolling effect, use a tall vertical image. This type of image enhances the visual experience by allowing smoother scrolling. If you need to create long website screenshots, consider using a free tool specifically designed for that purpose.

**Q: Does the Dynamic Device block work with other page builders?**
A: The Dynamic Device block is primarily designed for use with Gutenberg, as NexterWP is built exclusively for this editor. While it supports Elementor and Bricks, the full functionality and features are best experienced within the Gutenberg environment.