Use the iFrame element to include external pages within your layout via an iFrame. 

Locating the iFrame element¶

To find the iFrame element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the iFrame element.

The iFrame element includes the following fields:

Source¶

• Source (URL) - Enter the URL of the page to show within the iFrame

Custom style¶

Layout style - Apply a Layout custom style to the iFrame. For more information see Applying styles to elements.

Setting a Height is a requirement for the iFrame element. If you are making a responsive website, be aware that the content inside an iFrame should be responsive too, or it may not display correctly on smaller screens.

Apply a height using the Height CSS property within the Styles tab or applying a Custom style to it.

Match heights¶

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name.

For more information on Match heights, see Match the heights of elements.

Comments¶

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.