The IFrame content type of the Dynamic Device widget loads a real web page inside the device screen, so the mockup shows the live site rather than a screenshot of it.
It is the quickest way to show a client’s site, a demo or a landing page in a laptop or phone frame and keep it up to date without ever retaking a screenshot.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Dynamic Device ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and there is no free version of it.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Dynamic Device and turn its toggle on.
- Prerequisite: a URL whose site allows being framed. A site that refuses to be embedded shows an empty frame — that is the browser, not the widget.
Load a live page into the mockup
- Edit your page with Elementor and drag the Dynamic Device widget onto the layout.
- In Content > Content, leave Layout on Normal. The IFrame content type does not exist in the Special Carousel layout.
- Choose a Type and then a frame in the dropdown below it. A wide frame such as Macbook Black (800px x 500px) suits a desktop site; a phone frame suits a mobile-first page.
- Set Content to IFrame.
- Put the address of the page you want to show in IFrame URL. The field is empty by default and shows https://www.demo-link.com as its placeholder.
The widget then renders an iframe sized to fill the device screen, and the page loads inside it.
Settings that matter here
| Setting | Where | What it does |
|---|---|---|
| Content | Content > Content | Set it to IFrame. The default is Image. |
| IFrame URL | Content > Content | The page that loads inside the device screen. Empty by default. |
| Width Adjust(%) | Style > Device Layout | Scales the whole mockup, 10% to 100%. The default is 100. |
| Alignment | Style > Device Layout | Left, Center or Right. The default is Center. |
| Box Shadow | Style > Device Background | X, Y, Blur and Color for the shadow under the device, with Normal and Hover tabs. |
How It Behaves
- The page really loads inside the frame. With IFrame URL set to a page on the test site, the widget rendered an iframe filling the device screen and that page appeared inside the mockup.
- The iframe fills the screen area. It is written out at 100% width and height of the device screen with no border, so it follows whatever frame and Width Adjust(%) you set.
- There are no icon options with IFrame. The Icon Options section is hidden as soon as Content is set to IFrame; it is only offered for Image and Template content.
- The scrolling effects do not apply. Scroll Image and Manual Scroll belong to the Image content type. An iframe scrolls the way the framed page itself allows.
On the front end it behaves as a small live window onto the other page:
Limitations
- Not every site can be framed. A site can tell browsers to refuse being embedded, with an X-Frame-Options header or a restrictive Content-Security-Policy. When it does, the mockup shows an empty frame. That is the browser enforcing the other site’s rules, and no widget setting can override it. If you do not control the target site, test the URL before you ship the page.
- You are loading a whole page inside your page. Everything the framed site loads — its scripts, fonts and images — loads with your page, so a heavy target site makes your page heavier.
- The framed page is not resized for you. A desktop layout squeezed into a phone frame is shown at the frame’s size, not redesigned for it.
- A Custom mockup hides your content unless its screen area is transparent. The frame image is drawn over the content, so an ordinary opaque JPEG shows only itself — the image, template or page behind it is completely invisible. Use a PNG with the screen cut out. Nothing in the editor warns you about this.
- Desktop has exactly one frame. Desktop Device offers iMac Minimal (1000px x 565px) and nothing else, so there is no choice to make there.
Not verified
So you know exactly what has and has not been checked:
- Third-party sites in the IFrame. Only a page on the same site was loaded inside the mockup. Whether a particular external site renders or comes up blank was not tested.
- Responsive behaviour. Nothing was measured at tablet or mobile breakpoints, and the responsive Width Adjust(%) and Transition Duration values were not exercised.
- Framing refusals. No site that blocks embedding was tried, so the exact appearance of a blocked frame in this widget is not documented here.
Troubleshooting
The mockup is empty
First check the URL in IFrame URL — a typo or a missing https:// leaves the frame blank. If the address is right, the target site is very likely refusing to be embedded. Open your browser’s console on the published page; a refusal is reported there. Use a site you control, or fall back to the Image content type with a screenshot.
There is no IFrame option in the Content dropdown
Layout is set to Special Carousel. Switch it back to Normal.
The Icon Options section disappeared
That is expected. Icon Options is hidden for IFrame content and comes back when you choose Image or Template.
