Add an Iframe Block to a Custom Page

Want to embed content from another website — like a form or a video — directly on your site? Iframe blocks make it possible.

This article covers the following topics:

• What is an iframe?
• Where to add an iframe block on a page
• Adding and configuring an iframe

What is an iframe?

Iframe stands for inline frame. Think of it as a window into another website — it pulls in content from that site and displays it within yours.

You can add iframes to any page of your website.

Where to add an iframe block on a page

Open the page you want to edit from the Website module. To do this:

1. Go to Website > Menu;
2. On the custom page you want to edit (identifiable by the icon ), hover over the three horizontal dots ;
3. then click Edit page.

You are now on the page in edit mode.

If you're logged in as an Administrator and viewing your site in preview mode, click the Edit page button at the top of any page to go directly to the editing menu.

Adding and configuring an iframe

To add an iframe to your page, drag the Iframe block and drop it onto your page grid:

Configuring the iframe block

Once you drop the block onto the grid, an editing window opens. (If the block is already placed, just double-click it to reopen this window.) You can then enter:

• A website URL in the "URL to embed" field — the entire site will be displayed in the iframe; or
• A specific embed code in the "Embed code" field — only the elements you specified will be displayed.

The second option is great for embedding specific elements from sites like Dailymotion, Vimeo, and others.

If you're having trouble adding your iframe, check out this article.

Other block options

Editing options appear at the top of the left-hand menu. If they don't appear, make sure the block is selected — click on it if needed.

• Edit the URL or embed code entered (also accessible by double-clicking the block);
• Delete the block;
• Choose a background — Set the background color;
• Choose a border — Add a border and adjust its thickness using the slider that appears. You can also change the border color;
• Adjust the outer margins of your block;
• Duplicate the block. A new editing window will open so you can customize the duplicated block if needed.

Once you've made your changes, don't forget to click "Save" in the top left corner of the editing page.