Using the layout builder

    To access the Layout builder: 

    To start using the Layout builder quickly and preview your layouts, add the Layout canvas field to a Content type. See Adding the layout builder to content entities.

    The layout builder user interface

    The Layout builder user interface consists of three main sections:

    • The Layout canvas (Blue dashed highlight) - This is where you create your layout
    • The Sidebar browser (Pink dashed highlight) - This provides access to the Layout elements and Components you will drag onto the Layout canvas.

    Layout-canvas-sidebar-browser-v5.png
     

    The Sidebar editor (Pink dashed highlight) - This provides access to the settings and content of the Layout elements and Components on your layout canvas.


    Layout-builder-sidebar-editor-v5.png
     

    Adding elements to the layout canvas

    Use Elements to add content, structure and interactivity to your layout. There are two methods for adding Elements to your layout canvas: 

    Dragging elements onto the layout canvas

    To drag an element onto the Layout canvas:

    1. Click on the + button on the Layout canvas to open the Sidebar browser
    2. Click and drag an Element from the Sidebar browser into the Dropzone on the Layout canvas.


    Drag-and-drop-element-onto-canvas-v5.gif

    Add elements to the layout canvas using a click

    To add an Element using a click:

    1. Click on the + button at the top of the Layout canvas to open the Sidebar browser
    2. Click on the + button against the Element you want to add.

    Click-to-drop-element-onto-canvas-v5.gif

    The + button at the top adds Elements to the top and the + button at the bottom adds elements to the bottom of the Layout canvas.

    Add elements within other elements

    To add an Element within another Element on the layout canvas using click:

    1. Click on the (...) Ellipsis icon on the Parent element to open the Sidebar browser
    2. In the menu click on +Add
    3. The Parent element will take on an orange active state
    4. Click on the + button against the Element you want to add.

    Click-to-drop-element-within-element-v5.gif

    To add Elements within Elements more quickly, single click on the Element name on the Sidebar browser and it will select the element and open the Sidebar editor.

    Edit the content and settings of an element on the layout canvas

    To edit the content and settings of an Element on the layout canvas:

    1. Click on the (...) button
    2. Click on Edit
    3. The Sidebar editor will open 
    4. Edit the content and settings of the Element
    5. Click Apply.

    You can open the Sidebar editor for an Element by double clicking on the Element on the Layout canvas.

    For more information about the individual layout element see Layout and content elements.

    Edit-element-setting-v5.gif

    To edit Elements more quickly, double click on the element title bar and the Sidebar editor will open.

    Dragging elements on the Layout canvas to reposition them

    To drag an Element and change its position on the layout canvas:

    1. Click and hold the Element
    2. Drag it to a different position.
    3. Let go of the Element where you want to place it.

    Note: Some elements cannot be dragged into other elements. For example, you cannot drag an Image element directly into a Row for columns element. If you try to, you simply won't be able to drop the Image element inside.


    Drag-an-element-on-canvas-v5.gif

    Open and close elements on the layout canvas

    You can open and close Elements if they can contain child Elements. Elements that cannot contain children do not have the Expand button.

    To open and close an element:

    1. Click on the Expand button on the element bar.

    Open-and-close-element-canvas-v5.gif

    Close all elements

    To close all Elements on the Layout canvas:

    1. Click on the Collapse button at the top of the layout canvas to close all elements.

    Close-all-element-on-canvas-v5.gif
     

    You cannot open all elements with the same button. This is because opening too many Elements at the same time may cause the Layout canvas to slow down.

    Duplicate an element on the layout canvas

    To duplicate an Element on your layout and all of its children:

    1. Click on the (...) Ellipsis button 
    2. Then select Duplicate on the menu.

    Duplicate-element-on-canvas-v5.gif

    Delete an element from the layout canvas

    To delete an Element on the Layout canvas,

    1. Click on the (...) Ellipsis button 
    2. Then select Delete on the menu
    3. Click on OK in the confirmation modal.

    Delete-element-from-canvas-v5.gif

    When you delete an Element from the Layout canvas, it will also delete any children it may contain.

    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