A screenshot on its own looks like a screenshot. The same picture inside a phone looks like a product.
The Dynamic Device block wraps your content in a device frame — and what goes inside can be an image, one of your patterns, or a genuinely live page.
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 screenshot of your site, cropped to roughly the shape of the screen it will sit in.
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.
- Pick the exact frame in Mobile Device (or the equivalent for your device type).
- Set Content Type and add your screenshot.
- Put the block in a column, or give it a maximum width.
- Publish and check the size on a phone as well as a desktop.
Give the block a width. The device frame fills whatever space it is in, and measured at full width a phone mockup rendered 1092 by 2289 pixels — over two thousand pixels tall. Put it in a column, or set a maximum width, before you judge how it looks.
What Can Go Inside
| Content Type | What appears in the screen | Guide |
|---|---|---|
| Image | A screenshot or any picture | — |
| Pattern | One of your saved patterns, rendered live | Pattern inside a device |
| Iframe | A real, working web page | Live website in a mockup |
The Other Settings
| Setting | What it does | Guide |
|---|---|---|
| Layout | A single device, or a carousel of several | Device slider |
| Scrolling image | A tall screenshot that scrolls inside the screen | Scrolling device mockup |
| On Click | Makes the device a link, or opens the linked page in a lightbox | — |
| Show Icon | Puts a play icon or badge over the device | — |
How It Behaves
- The frame is a real image — choosing the white flat iPhone renders
iphone-white-flat.pngand puts that name on the block as a class, so every frame is a picture rather than a drawing in CSS. - The frame scales to its container. That is why the width matters: measured full width, the phone came out 2289 pixels tall, while the desktop frame was a reasonable 811.
- Carousel sizes itself sensibly — the same phone rendered 334 by 700 there.
- On Click needs a link. Choosing Link or Popup without filling in the URL renders a plain device with nothing to click — measured. With a URL, Popup opens that page in a lightbox.
- The iframe really is live. It renders a genuine
<iframe>with the title you give it.
Limitations
- Pro only.
- Give the block a width. The device frame fills whatever space it is in, and measured at full width a phone mockup rendered 1092 by 2289 pixels — over two thousand pixels tall. Put it in a column, or set a maximum width, before you judge how it looks.
- The AJAX option for patterns does not work. The screen renders empty and nothing is ever fetched — measured. Leave it off.
- The frame images are decorative, so the device itself contributes nothing to search. What is inside does, as long as it is an image or a pattern rather than an iframe.
- Tall phone and tablet frames make a page very long on mobile. Consider a laptop or desktop frame for small screens.
Troubleshooting
The mockup is enormous
It is filling the space it was given. Put it in a column or set a maximum width — a full-width phone frame measured over two thousand pixels tall.
Nothing happens when I click the device
On Click needs a URL. With the field empty, both Link and Popup render nothing to click.
My pattern does not appear inside the device
Check Content Type is set to the pattern option and a pattern is chosen. If you switched the AJAX option on, switch it off — it leaves the screen empty.
The live page in the iframe refuses to load
Many sites block being framed by others. That is their setting, not this block. Use a screenshot instead.
The block is missing from the inserter
Switch Dynamic Device on under Nexter > Blocks.
