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.
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.
- Set Content Type to the iframe option.
- 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.
