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?

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.
2. Created at least one Component. For more information, see 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.

Switch the view of the sidebar browser

1. You can switch the view of the Sidebar browser between List view and Thumbnail view.

Drag a component onto the Layout canvas

1. From the sidebar browser, click and drag one of your components onto the Layout canvas.

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.

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.

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.

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.

1. Look for a component with a drop zone.
2. Click and drag a Component into the drop zone to nest it.

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.

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.

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.

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.

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

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.

Creating content with components

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?

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.
2. Created at least one Component. For more information, see 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.

Switch the view of the sidebar browser

1. You can switch the view of the Sidebar browser between List view and Thumbnail view.

Drag a component onto the Layout canvas

1. From the sidebar browser, click and drag one of your components onto the Layout canvas.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.