How to add website scrolling device mockup in Elementor?

Key Takeaways

  • Dynamic Device widget from The Plus Addons for Elementor creates interactive device scrolling mockups for WordPress websites.
  • Users can adjust the image scroll speed using the Transition Duration section in the Dynamic Device widget settings.
  • The widget requires a tall vertical image for an effective scrolling effect when the Scroll Image toggle is activated.
Table Of Content

The importance of having an eye-catching website cannot be overstated. It can make or break your online presence and can be the difference between success and failure. With the help of image scroll elements, your website can have a modern, interactive look that will draw the eye of visitors and keep them engaged.

With the scrolling device mockup where you can add an image scrolling effect inside a device mockup to showcase your portfolio or image gallery in an interactive way.

With the Dynamic Device widget from The Plus Addons for Elementor, you can make beautiful device scrolling mockups for your WordPress website.

To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Device widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, add the widget on the page and from the Layout dropdown, choose Normal.

After choosing the appropriate device type and mockup, go to Content and choose Image from the dropdown.

Now add your image from the Media Image section.

Dynamic device image

Note: Make sure to choose a tall vertical image for a good scrolling effect. You can use this Free tool to capture long screenshots of website

Now go to Style > Device Background 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.

Dynamic device scroll image

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.

Now you should have a beautiful image scrolling effect inside a device mockup.

Scrolling device demo

Also, learn how to connect scrolling device mockups in Elementor.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the scrolling device mockup isn't displaying correctly?

If the scrolling device mockup isn't displaying as expected, ensure that you have installed and activated The Plus Addons for Elementor. This widget is specifically designed to work with Elementor, and without it, the mockup won't function. Additionally, check that you have selected a tall vertical image for the best scrolling effect, as this is crucial for proper display.

What image dimensions work best for the scrolling effect?

For optimal results with the scrolling effect, it's best to use tall vertical images. This dimension allows for a smoother scrolling experience and ensures that the content is displayed effectively within the device mockup. If you need to capture long screenshots, consider using a free tool designed for that purpose.

Last reviewed: April 12, 2026