Best Elementor iFrame Widgets to Add & Use iFrame in WordPress Elementor (2023)

The Problem & Solutions Upfront: So you already know that using iFrame can…

• Help you enhance your website’s functionality
• Improve user experience & average time on the page
• Create more dynamic & interactive websites to keep your visitors engaged

Thus, you want to use iFrame in Elementor.

Unfortunately, there are no widget/settings offered by Elementor that allows you to add iFrame inside the Elementor post/page.

Hence you might have Googled – “how to add elementor iframe widget” & probably landed on this blog post.

Well, this is the only post you’ll need to read (yup, read, not skim through) to know everything about using iFrames in WordPress & Elementor.

So without further ado, let’s get into it…

👀 Transparency Note: Methods & steps listed in this blog post may require you to install additional plugins (free or paid).

Also, my blog is reader-supported, hence some of the links to products mentioned are affiliate links (won’t cost you anything extra) & I’ll appreciate it if you use them to purchase the product as those little commissions keep the lights on at my home & sidebars free from third-party ads. Feel free to read the full disclosure here.

What is an iFrame?

An iFrame, short for “inline frame,” is an HTML element that simply allows you to embed content from an external website. 

In simple words, an iFrame creates a small window on a webpage that displays content from another source & it’s often used to display content such as videos, maps, or social media feeds, within a website.

iFrames are natively supported by WordPress & hence using iFrames in WordPress is pretty quick & easy. Here’s how to do it…

2 Ways to Add iFrame in WordPress & Elementor

Adding iFrame in WordPress & Elementor using Code

One of the most simple ways to add an iFrame in WordPress is to use the “Custom HTML” block inside the Gutenberg editor.

Similarly, you have got an “HTML widget” inside the Elementor editor that you can use & put the code to display the content.

Here’s an example HTML code to put “elementpack.pro” into an iFrame.

<iframe scr=”https://www.elementpack.pro/” height=”400”></iframe>

The above code & attributes shouldn’t scare you as these iFrame attributes explain the stuff…

iFrame attributes:

• Src: The source of the iFrame (URL)
• Height/Width: Height and width to define the size of the iFrame
• Align: Define the alignment of the iFrame within the page (top, left, bottom, right)
• Scrolling: Adds Scrollbar in your iFrame (values include – yes, no, auto)
• Frameborder: Adds border around the iFrame

The problem with adding iFrames using this simple code is its limitations & hence it’s better to use the second method of adding iFrames using a plugin/addon.

Adding iFrame in WordPress & Elementor using Plugin (Addon)

Creating more dynamic layouts will require you to add a plugin/addon as it offers more control & better iFrame functionalities.

If you’re looking to add iFrame on a non-elementor page, consider using the above code or adding this iFrame plugin.

💡 Pro Tip: If you wanna add an iframe to an elementor page, then using an addon is the best way as you’ll get more functionalities & widgets.

Unfortunately, out of a dozen, only a couple of Elementor addons offer iFrame widgets that you can use inside your Elementor page/post.

I researched, tried & tested almost all of the popular Elementor addons which include QI Addons, ElementsKit, Essential Addons, ElementsPack Pro, Ultimate Elementor, Happy Addons, Xpro Addons, PowerPack Element, Plus Addons & many more for the iFrame functionalities.

My Findings: Out of a dozen of Elementor addons, only 2 listed below provide iFrame widgets & advanced functionalities & they are as follows…

ElementPack Pro: iFrame Widget

ElementPack developed by BDThemes is one of the most powerful elementor addons. As of writing this post, it has over 80K+ Active Installs & customer ratings of 4.7 out of 5.

With over 240+ Widgets, 300+ ready-made pages & 1900+ Ready-made blocks, it’s the leading elementor addon.

It offers an “iFrame Widget” that will allow you to embed audio, video, Google Maps & any website with additional features of lazy loading, scroll bars, 360-degree view & more customization options.

Dynamic.ooo: iFrame & Remote Content

Another addon that provides a couple of widgets – iFrame & Remote content allows you to dynamically embed every type of content from external sources into your website. It’s simple & basic.

Out of both, the iFrame widget offered by ElementPack comes with a lot more options such as lazy loading, and 360-degree view & hence I recommend using ElementPack’s iFrame widget for adding iFrame in elementor. Here's how to do it…

Step-by-Step Guide on How to Add iFrame in Elementor

Step 1: Download, Install & Activate ElementPack
ElemetPack is a powerful elementor addon that comes with over 240+ widgets, 300+ ready-made pages & 1900+ Ready-made blocks along with dynamic carousels, confetti effects, advanced iFrames & visibility controls.

Step 2: Get Inside the Elementor Editor
Once you’ve installed & activated the ElementPack plugin, create a new page/post, give your page a title & then click on Edit with Elementor button

Step 3: Add an iFrame Widget
Once you’re inside the elementor editor, search for iFrame in the search bar over the widgets panel & drag & drop the “iFrame widget” to the canvas.

Here’s a quick video that demonstrates how to add iframe in elementor…

Step 4: Configure the iFrame Widget
Click on the iFrame widget to open its layout settings. Under the content source, enter the URL of the website or page you want to embed in the iFrame.

Just for demonstration, I've added ElementPack's official URL. You can add any website URL.

Next up, feel free to play around with additional options such as…

• Setting iFrame height or set it to auto-height
• Alignment & Lazyload settings
• Additional settings such as showing or hiding the scroll bar, iFrame device (chrome, desktop, mobile, etc)

Step 5: Save and publish your Page to see the iFrame in Action
Once you’ve configured the iFrame widget to your liking, simply save & publish your page.

See your page live & check if the iFrame is working fine or not. Make sure to test it on different browsers & devices as well. That's it!

By following the 5 simple steps outlined in this guide, you should be able to create an engaging & functional iFrame in WordPress & Elementor.

Creating & adding an iFrame widget in Elementor using ElementPack is a simple process that can add a lot of value to your website.

Before wrapping up, let me share some quick tips & answer some of the FAQs…

Tips for Using Elementor iFrame correctly

Here are some tips & best practices for using iFrames in Elementor…

• Consider using iFrames from secured & trustworthy sites (make sure the site you’re embedding has an SSL i.e. https version)
• Use iFrames Sparingly as adding too many iFrames to your website can affect your website’s loading time & performance
• Test your iFrames on different devices & browsers to ensure they display correctly on all devices

FAQs on Elementor iFrame

Wrapping Up

By now, you should have an iFrame widget working on your Elementor page as you have all the necessary information.

So, will you be using ElementPack addon or the basic code to add iFrame to Elementor?

Do let me know in the comments below.

Apart from that, if you’ve got any questions, feel free to drop them in the comments & I’ll be more than happy to answer.

Lastly, if you feel this blog post was helpful, then do give it a share on social platforms. I can sense that you’re good at hitting those sharing buttons (especially the Facebook one 😉)