fiFrames 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’s 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.
Before you read further.... Free Download (PDF)
Secret Side Door
Secret Google Search Tactic That Will Skyrocket Your Sales, Connect You to the Perfect Partners, Influencers & Affiliates and Send Your Google Rankings Soaring! FREE when you sign up for Digital Creators Edge, a free newsletter for Digital Creators who wish to take their business to the next level.
You first 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.
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:
- Opening the video on YouTube
- Press the Share button under the video
- Choose the Embed option
- 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.
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:
- Purchase and download the Iframe Widget add-on from the Element Pack website
- Go to Plugins → Add New in your WordPress admin dashboard
- 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.
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.
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.
