--- title: "Creating content with components" date: "2020-01-20T12:10:38+00:00" summary: "Create rich, dynamic content effortlessly with Site Studio's drag-and-drop components. Learn how to add, edit, and organize components on the Layout canvas to build engaging web pages quickly and efficiently." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/creating-content-components" id: "d6276846-c9de-442f-ac54-1b7555193492" --- Table of contents will be added You can create rich content and layout using drag and drop components on the Layout canvas. For more information about the advantages of using components, see [What are components?](/drupal-starter-kits/add-ons/site-studio/what-are-components "What are components?") Before you can create content with components you must have: 1. Added the Layout canvas to a content type. For more information, see [Adding the layout canvas to content entities.](/drupal-starter-kits/add-ons/site-studio/adding-layout-canvas-field-content-entities "Adding the layout builder to content entities") 2. Created at least one Component. For more information, see [Create a component](/drupal-starter-kits/add-ons/site-studio/create-component "Create a component") Using components to create content ---------------------------------- 1. Navigate to Content > Add content > **Select a content type** which included Layout canvas 2. Click the **(+) button** in the top left of the Layout canvas. This will open the Sidebar browser 3. The Sidebar browser should display a list or thumbnails of components. If not, you need to create some components first. For more information, see [Components](/drupal-starter-kits/add-ons/site-studio/components "Components"). ![3db3dd42-open-sidebar-browser.gif](https://acquia.widen.net/content/a45c983c-18a4-4634-aed2-89c44be11060/web/3db3dd42-open-sidebar-browser.gif?animate=true) Switch the view of the sidebar browser -------------------------------------- 1. You can switch the view of the Sidebar browser between List view and Thumbnail view. ![81d94e72-switch-sidebar-browser-view.gif](https://acquia.widen.net/content/c674b700-c678-49f3-9f59-d4348e82256c/web/81d94e72-switch-sidebar-browser-view.gif?animate=true) Drag a component onto the Layout canvas --------------------------------------- 1. From the sidebar browser, click and drag one of your components onto the Layout canvas. ![a4124aef-drag-component-onto-canvas.gif](https://acquia.widen.net/content/cd88ce90-11ef-413c-8aeb-1cd6b201308d/web/a4124aef-drag-component-onto-canvas.gif?animate=true) Add a component to the Layout canvas using a click -------------------------------------------------- 1. From the sidebar browser, click on the **(+) icon** next to the component name or **double click** it to add it to the Layout canvas. ![41ffb8ab-add-component-using-click.gif](https://acquia.widen.net/content/a521e606-efc9-411f-8475-e9845bd7eea5/web/41ffb8ab-add-component-using-click.gif?animate=true) Important The **\+ button** at the top of the Layout canvas adds Elements to the top and the **\+ button** at the bottom adds elements to the bottom of the Layout canvas. This is useful for adding components before, or after components you already have on the Layout canvas. Edit the content and settings of a component on the layout canvas ----------------------------------------------------------------- To edit the content and settings of a component on the layout canvas: 1. Click on the **(...) button** on the far right of the component on the Layout canvas 2. Click on **Edit** 3. The Sidebar editor will open  4. Edit the content and settings of the Component 5. Click **Apply.** ![1d290ae4-edit-component-content-and-settings.gif](https://acquia.widen.net/content/c12c4358-ea17-4e5c-94f9-f017062f0fec/web/1d290ae4-edit-component-content-and-settings.gif?animate=true) Important You can **double click on a component** to open its content and settings. Dragging components on the Layout canvas to reposition them ----------------------------------------------------------- To drag a Component and change its position on the layout canvas: 1. Click and hold the **Component** 2. Drag it to a different position. 3. Let go of the **Component** where you want to place it. ![fc9aad8a-reposition-components.gif](https://acquia.widen.net/content/9d7ffc6f-1208-405d-91f9-9cd2559593d9/web/fc9aad8a-reposition-components.gif?animate=true) Dragging components inside other components ------------------------------------------- Some Components will include 'Drop zones'. If a Component includes a drop zone, you can drag other Components within it to nest them. Important Components with drop zones include an **expand and collapse** button on the top right of the component. 1. Look for a component with a drop zone. 2. Click and drag a **Component** into the drop zone to nest it. ![d8aae9fa-nesting-components.gif](https://acquia.widen.net/content/95a8d84c-5cf3-470e-b740-4dc89db8e01f/web/d8aae9fa-nesting-components.gif?animate=true) Duplicate a component on the layout canvas ------------------------------------------ To duplicate a component on your layout and all of its children: 1. Click on the **(...) Ellipsis button**  2. Then select **Duplicate** on the menu. ![fda9daba-duplicating-components-on-layout-canvas.gif](https://acquia.widen.net/content/94440464-6545-4960-9c26-cf144fc53a23/web/fda9daba-duplicating-components-on-layout-canvas.gif?animate=true) Delete a component 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. ![2a244f3c-deleting-components-on-layout-canvas.gif](https://acquia.widen.net/content/66016ca8-72da-4663-953d-68a54b32e90c/web/2a244f3c-deleting-components-on-layout-canvas.gif?animate=true) ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Save a component as a helper ---------------------------- You can save a Component, its content and settings and any of its children (if it has a drop zone) as a Helper. Helpers are a convenient way of reusing layouts. For more information, see [Creating and using helpers](/drupal-starter-kits/add-ons/site-studio/creating-and-using-helpers "Creating and using helpers"). To save the Layout canvas: 1. Click on the **(...) Ellipsis button**  2. Click **Save** 3. Type a **Title** for your layout 4. Select Helper in the **Type drop down** 5. Select the Category  6. Click **Save**. ![d652d893-save-component-as-helper.gif](https://acquia.widen.net/content/7faed750-55fa-46a1-a5a1-cdde5d9f317b/web/d652d893-save-component-as-helper.gif?animate=true) Save your entire layout as a helper ----------------------------------- You can save your layout, including all components, content and settings as a Helper. Helpers are a convenient way of reusing page layouts. For more information, see [Creating and using helpers](/drupal-starter-kits/add-ons/site-studio/creating-and-using-helpers "Creating and using helpers") To save the Layout canvas: 1. Click on the **Options** dropdown at the top right of the layout canvas 2. Click **Save as** 3. Type a **Title** for your layout 4. Select Helper in the **Type drop down** 5. Select the Category  6. Click **Save**. ![71b53e48-save-page-as-helper.gif](https://acquia.widen.net/content/cac7c3bb-ed9c-4bfc-bc01-5dbb7f29e1e4/web/71b53e48-save-page-as-helper.gif?animate=true)