---
title: "How to show a live website in a mockup using iframes in WordPress?"
url: https://nexterwp.com/docs/how-to-show-a-live-website-in-a-mockup-using-iframes-in-wordpress/
date: 2023-02-22
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "For a portfolio, nothing beats the actual site running inside the phone. The iframe content type loads a real page into the device screen, so visitors can scroll and click..."
image: https://nexterwp.com/wp-content/uploads/2023/02/show-a-live-website-in-a-mockup-using-iframes-in-wordpress-1024x519.png
word_count: 402
---

# How to show a live website in a mockup using iframes in WordPress?

## Key Takeaways

- Dynamic Device en Nexter Blocks Pro muestran una página real dentro de un marco de dispositivo, con tipo de contenido iframe, título Iframe y opciones de móvil, tablet, portátil o escritorio.
- Nexter Blocks Pro requiere activar Dynamic Device en Nexter > Blocks y usar Design from Scratch antes de pegar la dirección de la página que se quiere mostrar.
- Las limitaciones del iframe incluyen sitios que rechazan ser enmarcados por encabezados anti-framing, carga de una segunda página que afecta el rendimiento y contenido que los motores de búsqueda no leen como parte de la página.

For a portfolio, nothing beats the actual site running inside the phone.

The iframe content type loads a real page into the device screen, so visitors can scroll and click the site itself.

*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 page that allows being framed** — your own site almost certainly does.

## 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 iframe option.

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

- Paste the address of the page you want shown.

- Write an **Iframe Title** describing the page, for screen readers.

- Publish and try scrolling inside the device.

## How It Behaves

- **It is a real iframe.** Measured: the block rendered `<iframe src="…">` with the title supplied.- The page inside is live, so it updates itself and visitors can interact with it.- **The Iframe Title is the accessible name** for the frame — write something meaningful rather than leaving it blank.- It works with any device frame, though a laptop or desktop gives the page enough room to look right.

## Limitations

- **Pro only.**- **Many sites refuse to be framed.** If the page sets an anti-framing header the device will show an error or nothing at all, and there is no way round it from here — use a screenshot instead.- A live page is a whole extra page load, so it costs real performance. One per page is plenty.- The framed page is a third party from the browser's point of view, which matters for cookie notices.- Content inside an iframe is not read as part of your page by search engines.

## Troubleshooting

### The device shows an error or stays blank

The site you linked refuses to be framed. That is its setting; use a screenshot or a pattern.

### The page inside looks like the desktop version

The frame is wide enough that the site serves its desktop layout. Use a narrower device or link a page designed for small screens.

### The page loads slowly

You are loading an entire second page. Consider a screenshot for anything above the fold.

## Related Docs

- [Pattern inside a device](https://nexterwp.com/docs/reusable-block-inside-a-device-mockup/)- [Dynamic Device: all settings](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/)- [Portfolio showcase page](https://nexterwp.com/docs/create-website-portfolio-showcase-page-in-wordpress/)