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:

    1. Navigate to a page or 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 (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.

    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.



    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket