How to Create Scrollable Website Device Mock-ups in WordPress (Gutenberg) | Website Portfolio Page [Video Tutorial]

Updated On : April 14, 2026By : Reading Time : 1 minute

Key Takeaways

  • Dynamic Device for Gutenberg allows users to create scrollable website mock-ups for portfolio pages.
  • Users can showcase past website works using images, URLs, and videos inside device screens.
  • The video tutorial lasts 17 minutes and 47 seconds, providing a comprehensive guide to creating mock-ups.
Table of Contents

YouTube video

Video Duration: 17 : 47

Video Overview

Learn how to Create Scrollable Dynamic Devices Website Mock-ups for your Website Portfolio Page. Show Website design from image, URL (Iframe), Videos etc inside device screens.

This will help you show your past website works in a better way to your clients. You can combine multiple screens and show them together in carousels, or one above the other. The Dynamic Device for Gutenberg will give the best web design preview of your works.

▶️ Live Demo – https://nexterwp.com/nexter-blocks/blocks/wordpress-device-mockups/


⚡ Plugin Website – https://nexterwp.com/
⚡ Get the Plugin https://nexterwp.com/nexter-blocks/
USE CODE ” YOUTUBE10 ” TO ENJOY 10% DISCOUNT

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 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.

WordpressThemesElementorn8nAIClaudeAutomationServer
LinkedIn X Website

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What should I do if my device mock-ups aren't displaying correctly?

If your device mock-ups aren't displaying correctly, check the image or URL you provided for the mock-up. Ensure that the URL is accessible and that the image is in a supported format. Additionally, verify that you are using the latest version of the Nexter Blocks plugin, as updates may fix compatibility issues. For more details on creating device mock-ups, refer to the Nexter Blocks Device Mock-ups page.

What is the best way to arrange multiple device mock-ups on my portfolio page?

The best practice for arranging multiple device mock-ups is to use carousels or stack them one above the other. This layout allows visitors to easily navigate through your past work without overwhelming them with too much information at once. Using the dynamic device feature in Nexter Blocks can help you achieve a clean and organized presentation. For more tips, refer to the Nexter Blocks documentation.

Does NexterWP support other page builders besides Gutenberg?

NexterWP is primarily built for Gutenberg and is not designed to work as a standalone theme without it. While it does support Elementor and Bricks, the core functionality and features are optimized for the Gutenberg experience. If you're looking to create scrollable device mock-ups, using Gutenberg with Nexter Blocks is the recommended approach.

What happens if I try to use Nexter Blocks without Gutenberg?

If you try to use Nexter Blocks without Gutenberg, the plugin will not function as intended. NexterWP is built exclusively for the Gutenberg editor, meaning all features, including device mock-ups, rely on Gutenberg's framework. Ensure you have Gutenberg activated to take full advantage of Nexter Blocks' capabilities.

Are there any limitations when using Nexter Blocks for device mock-ups?

While Nexter Blocks offers extensive features for creating device mock-ups, one limitation is that it relies on the quality of the images or URLs you provide. If the source content is low resolution or not optimized for web display, it may affect the overall appearance of your mock-ups. Always use high-quality images and ensure that URLs point to responsive content for the best results.

Last reviewed: April 14, 2026

Related Docs

Advance Border Radius for WordPress (Gutenberg) – Custom Border Shape [Video Tutorial]
icon
Advanced Typography Styles for WordPress (Gutenberg) – Rotate, Marquee, Stroke, Vertical, Blend [Video Tutorial]
icon
Carousel Slider Sync Remote for Gutenberg WordPress | Connect with Arrows, Dots, Tabs, Accordion etc [Video Tutorial]
icon
Combined Social Media Feed in WordPress (Gutenberg) – Facebook, Instagram, Twitter, YouTube & Vimeo [Video Tutorial]
icon
Create Dynamic WordPress with Custom Post Loop Skins with ACF & CPT (Gutenberg) [Video Tutorial]
icon
Create Unique Image Accordion Horizontal and Vertical with Gutenberg Blocks [Video Tutorial]
icon
123……8