How to Create an iFrame Widget in Elementor

iFrames are used commonly in many sites to present content from another website. It’s like a window for users to see the external content right on an existing page.

You can display an image, video, map, or even a full webpage without violating the copyright. These media files come from other sites so they won’t eat up your server storage either.

It’s possible for you to create and customize an iframe in your WordPress content using source code. If you use Elementor to build the website, you may be surprised by how easy it is to add an iframe to your page. Here are 2 different options that will keep you creating iframes using Elementor on the go.

How to Embed iFrame in Elementor Using Shortcode

Elementor comes as a free page builder plugin for WordPress sites. It helps simplify the process of designing a webpage without the coding knowledge required.

Elementor free version allows you to embed a video iframe to your page and post via its Shortcode block. Still, you’re unable to show external pages inside the iframe. The guide below walks you through 3 steps to create an iframe with Elementor.

You firstly have to get the Elementor page builder activated and ready on your site. Then, head to Pages/Posts to create a new one or open an existing one.

In the Elementor widget section, search for “shortcode” and drag-and-drop that block to the page. Now click on the “pen” icon of the shortcode widget to edit it.

 pda-shortcode-widget

The next step is to get the iframe shortcode of your video and paste it into the widget. If you intend to display a YouTube video, you can take code by:

  1. Opening the video on YouTube
  2. Press the Share button under the video
  3. Choose the Embed option
    pda-youtube-share-button
  4. Copy the video’s source code and enter it into the Elementor shortcode widget you’ve just created

You can change values in the code to adjust the iframe appearance such as the height, width, and border, e.g.

pda-add-video-shortcode-elementor-iframe

How to Add an Elementor iFrame using Iframe Widget

You need help from the Iframe Widget add-on to embed other content types to Elementor iframe, besides videos. What you need to do includes:

  1. Purchase and download the Iframe Widget add-on from the Element Pack website
  2. Go to PluginsAdd New in your WordPress admin dashboard
    pda-add-new-plugin
  3. Hit the Upload Plugin button and choose the plugin file you’ve just downloaded

Upon activation, the add-on will automatically add a new block called Iframe to your Elementor widgets. Now open the page you plan to create an iframe then drag-and-drop that block to the content.

pda-iframe-widget-elementor

Next, click on the Content and tab enter the URL of the page you want to embed to your content in the Content Source section.

 pda-elementor-content-source

You have other options to style the iframe, for example, Iframe Heigh, Lazyload Settings, Allow full screen, and Show scroll bar.

You’re enabled to set a border for the iframe as well. Deciding the border color, radius, and shadow has never been easier thanks to the Border settings section in the Advanced tab.

That’s it!

Make Use of Elementor iFrames

iFrames prove useful in sharing content from other websites right on your WordPress page. You can avoid hosting large files on your site along with copyright issues and at the same time improve user experience.

Commonly, WordPress allows you to add iframe to content in two ways, using iframe code and using plugins. For websites using the Elementor page builder, the process is a bit different.

The first path is using the Shortcode widget. But you should notice that it’s for videos only. In case you wish to display other content types, seek help from the Iframe Widget add-on.

Do you know that you can still protect HTML files inside the iframe? Check out this documentation for the detailed guide.

Leave a Reply

Your email address will not be published. Required fields are marked *