---
title: "How to Show Image in a Device Mockup in WordPress?"
url: https://nexterwp.com/docs/add-dynamic-device-in-wordpress/
date: 2023-02-22
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/05/dynamic-device-block-settings-overview-1024x519.jpg
word_count: 701
---

# How to Show Image in a Device Mockup in WordPress?

## Key Takeaways

- Nexter Blocks Dynamic Device block shows Image, Pattern, and iFrame content inside a device mockup.
- Dynamic Device block offers two layouts, Normal and Carousel, and supports Mobile, Tablet, Laptop, Desktop, or a custom mockup.
- Image content in Dynamic Device block adds a scrolling image effect, manual scrolling, and a link that opens in a normal browser or popup.
- Carousel Options include Single or Multiple columns, carousel speed, infinite loop slider, autoplay, dots and arrows navigation.

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.

[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 screenshot of your site**, cropped to roughly the shape of the screen it will sit in.

![A published Dynamic Device block: a screenshot inside a laptop frame](https://nexterwp.com/wp-content/uploads/2026/09/ddev-fe-laptop.webp)

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

- Pick the exact frame in **Mobile Device** (or the equivalent for your device type).

![The device chooser](https://nexterwp.com/wp-content/uploads/2026/09/ddev-mobile.webp)

- Set **Content Type** and add your screenshot.

![The Content Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-content.webp)

- 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](https://nexterwp.com/docs/reusable-block-inside-a-device-mockup/) |
| Iframe | A real, working web page | [Live website in a mockup](https://nexterwp.com/docs/how-to-show-a-live-website-in-a-mockup-using-iframes-in-wordpress/) |

## The Other Settings

| Setting | What it does | Guide |
| ------- | ------------ | ----- |
| Layout | A single device, or a carousel of several | [Device slider](https://nexterwp.com/docs/device-slider-in-wordpress/) |
| Scrolling image | A tall screenshot that scrolls inside the screen | [Scrolling device mockup](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/) |
| 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.png` and 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**.

![Dynamic Device switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/ddev-admin-enable.webp)

## Related Docs

- [Device slider](https://nexterwp.com/docs/device-slider-in-wordpress/)- [Scrolling device mockup](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/)- [Live website in a mockup](https://nexterwp.com/docs/how-to-show-a-live-website-in-a-mockup-using-iframes-in-wordpress/)- [Portfolio showcase page](https://nexterwp.com/docs/create-website-portfolio-showcase-page-in-wordpress/)