Embed any website content using Elementor iframe

If you want to build an amazing and mobile optimized websites without the need of any code, Elementor is a great WordPress plugin and a page builder. While building a webpage there are sometimes that you may want to add content from other websites to your own page. For instance, a video, map or a contact form.

How can you do that?

The answer is using an iframe element into your Elementor page. Let’s see what an iframe is and how it works.

What is an iframe?

An iframe is an HTML tag that lets you create a window or a frame within your webpage that can display content from another source. Think of it as a mini-browser that shows another webpage inside your Elementor page. For example, iframe is used to embed a YouTube video, a Google Map, or a contact form into your web page.

Why do we use an iframe in Elementor page builder?

There are many benefits of using an iframe in an Elementor or any WordPress Webpage, such as:

• Show external content:  An iframe can help you display your content on a webpage from other sources without visiting that specific website.
• No storage space issue: You don’t have to worry about the server storage, space and bandwidth as it loads the content from external sources.
• Enhanced Functionality: Provides extra functions and interactivity to your Elementor page by adding these features.
• Easily Customizable: An iframe lets you customize the appearance and behavior of your content to match the website design.

How to add an Elementor iframe?

There are two ways to add an iframe in Elementor: using the shortcode widget or using the iframe widget.

1.  Using the shortcode widget

The shortcode widget is a built-in widget in Elementor that allows you to insert any shortcode into your Elementor page. A shortcode is a special code that WordPress uses to display dynamic content or features. To use the shortcode widget to add an iframe in Elementor, you need to follow these steps:

•  Create a new page or post in WordPress and edit it with Elementor.

•  Drag and drop the shortcode widget from the Elements panel to your desired location on the page.

•  Click on the pencil icon on the widget to open the settings panel.

•  Paste your iframe code into the shortcode box. You can get the iframe code from the source website or generate it using online tools. For instance, if you want to embed a video from YouTube or Vimeo, there is the share button given under these videos and an embed option. Embed option provides you with the code that can be used inside the shortcode widget box.

•  Adjust the settings of the shortcode widget as you like. Elementor gives you an option to adjust its alignment, width and height. For additional changes you can always use custom CSS within the element settings.

•  Click on the update button to save your changes and preview your page.

2.  Using the iframe widget

The iframe widget is an add-on widget that you can get from the Element Pack website. It is a premium plugin that adds more than 180 widgets and extensions to Elementor. The iframe widget allows you to easily embed any webpage into your Elementor page with more options and features. To use the iframe widget to add an iframe in Elementor, you need to follow these steps:

•  Purchase and download the Element Pack plugin from their website.

•  Install and activate the plugin on your WordPress site.

•  Create a new page or post in WordPress and edit it with Elementor.

•  Drag and drop the iframe widget from the Elements panel to your desired location on the page.

•  Click on the pencil icon on the widget to open the settings panel.

•  Enter the URL of the webpage you want to embed into your Elementor page in the Content Source box.

•  Adjust the settings of the iframe widget as you like. You can change the height, lazy load, full screen, scroll bar, border, and custom CSS of the widget.

•  Click on the update button to save your changes and preview your page.

To Conclude:

Adding an iframe in an Elementor is a great way to display content from other sources on your website. Use either the shortcode element or the iframe element to embed any webpage content to your Elementor page. Both of these methods are very easy and effective. We would suggest you to try the iframe widget from Element Pack plugin and explore its options.