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 (URL) - Enter the URL of the page to show within the iFrame
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.
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 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.
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.