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

Locating the iFrame element

To find the iFrame element:

• Navigate to a component or a template with the Layout canvas
• Click the + button on the Layout canvas
• 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.

iFrame element

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

Locating the iFrame element

To find the iFrame element:

• Navigate to a component or a template with the Layout canvas
• Click the + button on the Layout canvas
• 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

Important

When adding the desired URL, make sure to remove the <iframe> tags. You only need to include the source URL. Some external websites may not allow their pages to be displayed within iFrames due to their local security settings.

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.