How to embed Elementor iFrame widget in web pages

Elementor iframe

Elementor is a popular page builder plugin allowing you to design custom websites without coding knowledge. One of the many features that make Elementor an excellent choice for website development is the iFrame widget. This elementor widget lets you embed content from external sources onto your website, such as a video or a map.

If you’re new to using Elementor or need help with how to add iFrame widget to wordpress, don’t worry!

In this article, we'll show you everything you need to know about using the fantastic Elementor iFrame widget.

What is Elementor?

Elementor is a popular WordPress plugin that offers a visual drag-and-drop interface to create custom pages and templates in WordPress using Elementor plugin. It has a vast library of pre-designed templates, blocks, and widgets that can be easily customized to match your website’s style.

Suppose you are using the elementor plugin. I highly recommend using the hello elementor theme or hello elementor child theme in your WordPress site. With this theme, you can easily design, customize and develop your site.

Learn how to install the elementor plugin to design a website and download the hello elementor child theme.

What is the iFrame Widget in Elementor?

Before we get into the nitty-gritty of how to use the iFrame widget, let’s take a moment to understand what it is. An WordPress iFrame (short for “inline frame”) is a window within a window.

It allows you to embed content from one WordPress site into another WordPress site. This can be incredibly useful if you want to display content from a third-party website on your website, such as a video or a social media feed.

The iFrame for Elementor allows you to easily embed an iFrame into your WordPress site without writing any code. You must enter the website URL you want to embed iFrame, and Elementor plugin will handle the rest.

Why use the iFrame Widget in Elementor?

There are many reasons why you should use the iFrame widget in Elementor.

Here are just a few:

  • Display third-party content: As mentioned earlier, the iFrame widget allows you to display content from third-party websites on your website easily. This can be particularly useful to showcase content from your social media accounts or other websites relevant to your business.
  • Streamline your website: If you have multiple websites that you want to display on your main website, using iFrames can be a great way to streamline your website. Rather than having to navigate between multiple websites, your visitors can view everything they need on one page.
  • Add interactive elements: The iFrame widget can add interactive elements to your website, such as quizzes or calculators. By embedding an iFrame containing the interactive element, you can provide visitors with a more engaging experience.

3 Method to Add iFrame in WordPress with Elementor

Adding elementor iFrame in WordPress using these steps:

Use the Video and Maps Elementor iFrame Widget

Adding the Elementor iFrame widget to your website is quite easy.

Follow these steps:

Step 1: First, open the page where you want to add an iframe in elementor.

Step 1 open page

Step 2: Click on the plus sign to add a new section.

Step 2 click plus buttons
Step 3: In the widget search bar, search for the Youtube widgets.
Search youtube

Step 4: Drag the video widget onto the section.

Drop elements

Step 6: A new panel will appear on the left side of the screen where you can edit the widget’s settings.

sidebar widget setting

Step 7: Paste the website URL you want to embed into the URL field.

Paste your video URL

Step 9: Customize the widget settings, such as the video size and autoplay settings and publish your page.

Video height and width setting

How to create an iframe with HTML code in elementor

Create an iFrame Widget: To use the Elementor HTML widget, you’ll need to follow these steps:

Step 1: Open the Elementor editor for the page you want to create an iFrame.

Step 1 open page
Step 2: Locate the iFrame widget by clicking on the “Elements” tab on the left-hand side of the editor.
Step 3: Search the HTML widget and drag and drop the HTML widget onto your page.
html elements
Step 4: A new box will appear on the left side of the screen where you can embed your HTML or iframe code.
HTML box

Step 5: Open youtube and search for the Video you want to add to your website. Click the share button and next click the embed option.

youtube video add

Step 6: Now you will see the iframe code on the right side.

Iframe code

Step 7: Copy the video iframe source and return to the Elementor editor and paste the URL into the “iFrame URL” field.

How to create an iFrame in Elementor Using Shortcode

Adding the Elementor iFrame widget with a shortcode to your website is easy.

Follow these steps:

Step 1: First, open the page where you want to add the iFrame widget.
Step 1 open page
Step 2: Click on the plus sign to add a new section.
Step 2 click plus buttons
Step 3: In the elementor widget search bar, search for the shortcode widget.
search shortcode widget
Step 4: Drag the shortcode widget onto the section.
Step 5: A new panel will appear on the left side of the screen where you can embed your shortcode.

Step 6: Open the youtube  and search your  video you want to add on your page. Click the share button and next click the embed option.

youtube video add
Step 8: Now you will see the iframe code on the right side.
Iframe code

Step 9: Copy the video source code and paste it into the elementor shortcode widget.

Add shortcode

Conclusion

The Elementor iFrame widget is a unique element that can help you create engaging and interactive web pages. You can provide visitors with a seamless and immersive experience by embedding external content directly into your pages. With the tips and tricks we’ve shared in this article, you can use the Elementor iFrame widget like a pro.
Facebook
Pinterest
Twitter
LinkedIn

Leave a Reply

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

Let's Connect

Contact us

We would be glad to have you visit the operation center.

Headquarters

Please complete the following form. Our team of specialists will assess your request and respond as soon as possible.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

CAPTA NOT DELL
Site Key:6LdXExcdAAAAAMRgziMjqokglXNmXSNKG0a2Qynv
……………
Secret Key :6LdXExcdAAAAAG1KqLLAq0l45muRas3IUGRB3sgD
……………
Score Threshold : 0.5

Contact us

We would be glad to have you visit the operation center.

Please complete the following form. Our team of specialists will assess your request and respond as soon as possible.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.