How to create Iframe widget in Elementor

For a lot of reasons, you may need to create an iframe widget on your webpage. It includes images, videos, another webpage, etc.

Generally, the idea is to speed load the target item from an external source and reduce the load on your site.

As for how to embed it, you have two ways to do it.

  • Use raw code
  • Use an Iframe plugin

In this blog, we will tell you exactly how you can create an iframe widget in Elementor.

What is iframe

Iframe is mainly a part of the same HTML structure that runs a website. It lets you add or embed content from other websites into your website.

Websites having strict security policies may not allow an iframe to embed content. But the number of supporting websites are greater. So, it is a quick solution for adding multi-layered content to your website.

How to create iframe with code

Being a part of an open-source software WordPress, Elementor has a lot of integrations. One of them is Shortcode. Even for operations like an iframe, there are shortcodes available.

To put it simply, you can open any page using WordPress Gutenberg editor or Elementor editor, insert shortcodes and summon an iframe. Easy as pie!

create iframe widget

Just get an HTML editor block on your page and add the above code. This will simply summon the desired content/website in a box with 400px height.

Creating an iframe widget has some attributes that you can use to customize the appearance of the content.

  • Src – Source link. (https://) may be necessary to avoid blocking from site security protocol.
  • Width/Height – Pixel values that define the content size area.
  • Align – Defines the iframe alignment within the page.
  • Frameborder – Adds border around the iframe if the value is greater/equal to 1. Shows no border upon value 0.
  • Scrolling – Allow content scroll option on the iframe by defining ‘yes’, ‘no’, and ‘auto’.

Except for the HTML code, iframe does support CSS attributes as well. So, you can add more features to it.

One thing you need to remember is, not every website is iframe supported. That means your website might refuse a website iframe or vice-versa.

Blog for you
Editor's Pick

Learn to make outstanding CTA now!

Create iframe widget with plugins

IFrame being a broadly used function has been made into a widget to make it more dynamic and easy to use.

Element Pack also has an iFrame widget for creating iframe. Being made into a widget, you will have more control over the content.

You can add various types of content, be it video, audio, text, image, websites, using this widget.

Watch this video to know how to use it properly.

Note that the iframe widget by Element Pack gives you an integrated Lazyload feature. So, you will be improving your website performance using this tool. Check this demo page for examples.


That’s it. Hope you have learned the method to create iframe widget today.

Thanks for staying up!

Popular blog

How to add a background video with Elementor Page Builder

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Leave a Reply

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.