---
title: "Using the layout canvas to create layouts for templates and components"
date: "2017-11-12T08:54:42+00:00"
summary: "Create stunning layouts for components and templates with Site Studio's intuitive Layout canvas. Learn how to add, edit, and organize elements effortlessly, saving time and enhancing your design workflow."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/using-layout-canvas-create-layouts-templates-and-components"
id: "4d031bd2-d449-47f8-99f2-5ceb1d997799"
---

Table of contents will be added

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.

![8564f508-layout-canvas-for-components-templates.png](https://acquia.widen.net/content/5619f327-47bf-4db9-b645-0b4e026fc9bb/web/8564f508-layout-canvas-for-components-templates.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.

![c1830b16-drag-elements-onto-layout-canvas.gif](https://acquia.widen.net/content/2e2f37e9-8540-4c6d-a3db-ff5c43d67418/web/c1830b16-drag-elements-onto-layout-canvas.gif?animate=true)

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

![3a72ff04-click-to-add-elements-onto-layout-canvas.gif](https://acquia.widen.net/content/7fdd39ee-8e1b-47c6-82bc-3440fd338e9e/web/3a72ff04-click-to-add-elements-onto-layout-canvas.gif?animate=true)

Important

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.

![5f52198c-nest-elements-on-layout-canvas.gif](https://acquia.widen.net/content/982a8d79-b22c-4c76-975d-3dea56de8209/web/5f52198c-nest-elements-on-layout-canvas.gif?animate=true)

Important

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

For more information about the individual layout elements see [Layout and content elements](/drupal-starter-kits/add-ons/site-studio/content-elements "Layout and content elements").

![2dbfacc0-edit-element-settings.gif](https://acquia.widen.net/content/cdb39329-f2ac-41f6-97b5-465bdc0ca7c5/web/2dbfacc0-edit-element-settings.gif?animate=true)

Important

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.

![95f3e789-dragging-elements-around-layout-canvas.gif](https://acquia.widen.net/content/36a2a9cb-9a74-4775-9257-1d981013dc7e/web/95f3e789-dragging-elements-around-layout-canvas.gif?animate=true)

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.

![d34574f1-open-close-elements.gif](https://acquia.widen.net/content/957998d9-1c59-4342-a2e7-54cac53814d0/web/d34574f1-open-close-elements.gif?animate=true)

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

![ce5bc5c0-save-layout-as-helper.gif](https://acquia.widen.net/content/59c4388e-eb24-4360-9baf-4912c100a17a/web/ce5bc5c0-save-layout-as-helper.gif?animate=true)

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.

![4d7969ca-duplicate-elements-layout-canvas.gif](https://acquia.widen.net/content/7d325b2e-0a9c-4e38-90ce-07087169e447/web/4d7969ca-duplicate-elements-layout-canvas.gif?animate=true)

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.

![fba8f3a4-delete-element-layout-canvas.gif](https://acquia.widen.net/content/946e3573-b375-4bae-b57e-0d73d8189ab9/web/fba8f3a4-delete-element-layout-canvas.gif?animate=true)

Important

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