Using the layout canvas to create layouts for templates and components

 

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.

Using the layout canvas to create layouts for templates and components

 

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 elements 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.

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 elements 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.