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.