You can use the Layout canvas to create layouts for Components and Templates. 

Access the Layout canvas¶

The Layout canvas is available by default when you build a Component or Template using Acquia Cohesion. For the purpose of this user guide, the following screens show the Layout canvas being used to create a Component layout. To access the Layout canvas:

1. Navigate to Acquia Cohesion > Components > Components > Add component
2. The layout canvas is highlighted below in pink.

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.

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.

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.

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.

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

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.

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.

Save layout as helper¶

To save the Layout canvas:

1. Click on the Options dropdown at the top of the layout canvas or the (...) ellipsis button on the element
2. Click Save as
3. Type a Title for your layout
4. Select the Type
5. Select the Category 
6. Click save.

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.

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.