Embedding a Webpage with Gutenberg, Elementor, and WPBakery

Embedding external content into your WordPress site is a simple way to enhance user experience. This guide will walk you through embedding a webpage using the three most popular WordPress page builders.

1. Embedding a Webpage in Gutenberg

Gutenberg is WordPress’s default block editor, and embedding a webpage is straightforward.

Steps:

1. Open the Page/Post Editor: In the WordPress dashboard, go to the page or post where you want to embed the content.
   
   
2. Add an HTML Block:
   • Click the + icon to add a new block.
   • Search for and select the Custom HTML block.
     
     
3. Insert the Embed Code:
   • Paste the following iframe code into the block (don't forgot to change replace the URL):
     
     
   <iframe src="https://yourwebsiteurl.com" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
   
   
4. Preview and Publish:
   • Click on Preview to see how the embedded page looks.
   • Adjust the width and height as needed.
   • Once satisfied, click Publish or Update.

2. Embedding a Webpage in Elementor

Elementor allows you to design with live editing, making embedding content visually intuitive.

Steps:

1. Open Elementor Editor:
   • Go to the page you want to edit and click Edit with Elementor.
     
     
2. Add an HTML Widget:
   • In the Elementor sidebar, search for the HTML widget.
   • Drag and drop it onto the section where you want the webpage embedded.
     
     
3. Insert the Embed Code:
• In the HTML widget settings, paste the iframe code:
  
  
<iframe src="https://yourwebsiteurl.com" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>



4. Preview and Adjust:
   • You’ll see the embedded content immediately in the editor.
   • Modify the width and height if necessary.
   • Click Update to save the changes.

3. Embedding a Webpage in WPBakery

WPBakery provides an easy drag-and-drop interface to manage content embedding.

Steps:

1. Open WPBakery Page Builder:
   • In the WordPress dashboard, open the page/post you want to edit and click Edit with WPBakery.
     
     
2. Add a Raw HTML Element:
   • Click Add Element.
   • Search for Raw HTML or Custom HTML.
     
     
3. Insert the Embed Code:
• In the HTML field, paste the iframe code:
  
  <iframe src="https://yourwebsiteurl.com" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>


4. Save and Preview:
   • After inserting the code, click Save Changes.
   • Preview the page to ensure the webpage is properly embedded.
   • Adjust the size and settings as needed before publishing.