Creating a component layout
You can create Component layouts using the Component builder or directly from the Layout canvas when you're creating pages.
Creating new components
To create a new Component:
- Navigate to DX8 > Components > Components
- Click +Add component
- In the next screen, enter a name for your Component in the Title field
- In the Category drop-down, select a category of Component. This organizes your Components into logical categories to help your editors find them within the sidebar browser
- Select a preview image of your component which will appear in the sidebar editor when in the visual view mode in the sidebar
- Select whether this Component can be edited via the Inline editing feature using the checkbox titled 'Enable inline editing'
- Restrict which content entity type bundles the Component will be available on using the Available on entity type drop-down select. You can add additional types using the Add another type button
- Use the Layout builder to create your Component layout. For more information, see Using the layout builder
- Click on the Preview icon to preview your component layout. For more information, see Using the Layout canvas preview
- Use the Component form builder to create your Component form for editors. For more information, see Create an editable component
- Click Save and continue.
Create a component directly from the layout canvas
When you're creating page layouts or template layouts using the Layout builder you can choose to save a part of your layout as a Component. This provides a quick way to convert parts of your layout into reusable components.
To save a Component:
- Navigate to a page or template that includes the Layout canvas
- Choose an element on your Layout canvas you want to save as a Component. It can include child Elements
- Click on the ...ellipsis menu
- Within the menu, click Save
- In the modal that opens, enter a name for your Component in the Title field
- In the Type drop-down select Component
- In the Category drop-down, select a category of Component. This organizes your Components into logical categories to help your editors find them within the sidebar browser
- Click Save
- Your Component will be created. Navigate to DX8 > Components > Components and locate it within the list.
Once you've created a component directly from the Layout canvas you have created a Component layout but you have not created a Component edit form. To make the content of your Component editable you need to create the edit form. For more information, see Creating an editable component.