---
title: "How to show Pattern Block inside a Device Mockup?"
url: https://nexterwp.com/docs/reusable-block-inside-a-device-mockup/
date: 2023-02-22
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "A screenshot goes stale the moment you change the thing it is a picture of. A pattern inside the device is the real thing, built from blocks — edit it..."
image: https://nexterwp.com/wp-content/uploads/2023/02/How-to-show-Pattern-Block-inside-a-Device-Mockup_-1024x519.jpg
word_count: 379
---

# How to show Pattern Block inside a Device Mockup?

## Key Takeaways

- Nexter Blocks Dynamic Device block uses Pattern inside a device mockup to show images with text, video, or complex layouts in the WordPress/Gutenberg editor.
- Dynamic Device block requires Nexter Blocks to be installed and activated, then the Layout is set to Normal and Content Type is changed to Pattern before selecting a Pattern from the dropdown.
- Standard AJAX loads content when someone clicks or hovers over the coupon code, and it requires Enable Ajax Templates under Nexter Blocks > Extra Options > Settings.

A screenshot goes stale the moment you change the thing it is a picture of.

A pattern inside the device is the real thing, built from blocks — edit it once and every mockup updates.

*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 saved pattern**, built narrow enough to sit inside a device screen.

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

- Set **Content Type** to the pattern option.

![Content Type set to the pattern option](https://nexterwp.com/wp-content/uploads/2026/09/ddev-pattern.webp)

- Choose your saved pattern.

- Leave the AJAX option switched off.

- Publish and check it at the device's real size.

> ***Leave the AJAX option off.** With it on the device renders an empty screen and no request is ever made — measured, and the same fault affects the Expand block.*

## How It Behaves

- **The pattern really renders inside the frame.** Measured: the pattern's own four links were present in the page, inside the device.- **It is live content, not a picture** — links work, text is selectable, and search engines can read it.- Editing the pattern updates every device that uses it.- **Backend Visibility** previews it in the editor; it is off by default because it makes editing heavier.

## Limitations

- **Pro only.**- **The AJAX option is broken** — with it on the screen renders empty and no request is made. The same fault affects the Expand block.- A pattern built for full width will not fit a phone screen. Build it at the width it will appear.- Live content inside a small frame can overflow where a screenshot would simply crop.

## Troubleshooting

### The device screen is empty

Either no pattern is chosen, or the AJAX option is on. Switch AJAX off.

### The pattern overflows the screen

It is too wide for the frame. Rebuild it narrower, or use a laptop or desktop device.

### I see nothing in the editor

Switch **Backend Visibility** on to preview, then off again when you are done.

## Related Docs

- [Live website in a mockup](https://nexterwp.com/docs/how-to-show-a-live-website-in-a-mockup-using-iframes-in-wordpress/)- [Dynamic Device: all settings](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/)- [Scrolling device mockup](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/)