---
title: "How to show a live website in a mockup using iframes in Elementor?"
url: https://theplusaddons.com/docs/live-website-in-mockup-using-iframes-in-elementor/
date: 2023-02-21
modified: 2026-04-12
author: "Aditya Sharma"
description: "An iframe is an HTML element that allows you to embed other elements into your webpage. This can be useful for a variety of purposes, such as displaying external content,..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-show-a-live-website-in-a-mockup-using-iframes-in-Elementor-1024x536.jpg
word_count: 186
---

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

## Key Takeaways

- Dynamic Device widget from The Plus Addons for Elementor displays third-party or live site content inside mockup devices using iframe.
- Users must set the Layout to Normal and select IFrame from the dropdown to add an iframe inside their mockup.
- The website URL is added in the IFrame URL field to make the live site accessible from the device mockup.

An iframe is an HTML element that allows you to embed other elements into your webpage. This can be useful for a variety of purposes, such as displaying external content, like videos or maps, or for integrating third-party services.

With the Dynamic Device widget from The Plus Addons for Elementor you can easily display third party or a live site content inside beautiful mockup devices using iframe.

*To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Device widget, [click here](/docs/dynamic-device-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To add an iframe inside your mockup add the widget on the page, make sure to set the **Layout** to **Normal** and after choosing the appropriate device type and mockup, go to **Content **and choose **IFrame **from the dropdown.

Then add the website URL in the **IFrame URL** field. 

![dynamic device iframe](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-iframe.png)

Now the live site or third party website will be accessible from your device mockup.

![dynamic device iframe demo](https://theplusaddons.com/wp-content/uploads/2023/02/dynamic-device-iframe-demo.gif)

Learn [how to show Elementor Template inside a device mockup](https://theplusaddons.com/docs//elementor-templates-inside-a-device-mockup/).

## Frequently Asked Questions

**Q: What should I do if my iframe isn't displaying the live website in the mockup?**
A: If your iframe isn't showing the live website, ensure that you have set the Layout to Normal and selected IFrame from the dropdown in the Content settings. Also, double-check the URL entered in the IFrame URL field for any errors. A common issue is incorrect URL formatting, which can prevent the content from loading properly.

**Q: What are the best practices for using iframes in Elementor mockups?**
A: When using iframes in Elementor mockups, ensure the URL you provide is accessible and doesn't have restrictions like X-Frame-Options that prevent embedding. It's also important to test the iframe on different devices to ensure it displays correctly. Using responsive design principles will help maintain a good user experience across various screen sizes.

**Q: Are there any limitations when using the Dynamic Device widget for iframes?**
A: One limitation of the Dynamic Device widget is that it only works with The Plus Addons for Elementor and requires the plugin to be installed and activated. Additionally, if the external website has restrictions on being embedded, it may not display correctly in the iframe. Always verify the compatibility of the URL you intend to use.

**Q: What happens if I enter an invalid URL in the IFrame URL field?**
A: Entering an invalid URL in the IFrame URL field will result in the iframe not displaying any content. This can lead to a blank area in your mockup. Always ensure the URL is correct and leads to a publicly accessible page to avoid this issue.