Create a component

You can create components using the component builder. Components can include a settings form to allow for editable content, styles and other settings.

Creating a simple editable component

The following steps are an example to demonstrate how to create a very simple component with an editable field. To make a more complex Component, the same steps are used but with a more advanced layout and more form fields.

Step 1 - Create a new component

1. Navigate to Site Studio > Components > Components
2. Click +Add component
3. On the next screen within, within the Details area, enter a name in the Title field
4. Select a category in the Category field. This determines where the Component is displayed on the Sidebar browser
5. Check the Enable inline editing checkbox to allow the components content to be edited directly on the website.
6. Within the Availability section, leave it set to All. For more information, see Restricting where a component can be used.

Step 2 - Create the component layout

Create a component

You can create components using the component builder. Components can include a settings form to allow for editable content, styles and other settings.

Creating a simple editable component

The following steps are an example to demonstrate how to create a very simple component with an editable field. To make a more complex Component, the same steps are used but with a more advanced layout and more form fields.

Step 1 - Create a new component

1. Navigate to Site Studio > Components > Components
2. Click +Add component
3. On the next screen within, within the Details area, enter a name in the Title field
4. Select a category in the Category field. This determines where the Component is displayed on the Sidebar browser
5. Check the Enable inline editing checkbox to allow the components content to be edited directly on the website.
6. Within the Availability section, leave it set to All. For more information, see Restricting where a component can be used.

Step 2 - Create the component layout

1. Click on the + plus button on the Layout canvas to open the Sidebar browser
2. Drag a Paragraph element onto the Layout canvas.

Step 3 - Create the component form

1. Click on the + plus on the Component form builder to open the Sidebar browser
2. You will see that the Elements within the Sidebar browser are Form elements. If not, click on the Fields tab at the top
3. Drag a Plain text area field element onto the Component form builder
4. You will see [Field 1] has been added next to the field name.

Step 4 - Link the component form to the component layout

1. Double click the Paragraph element on the Layout canvas to open its settings
2. Click on the  to switch all fields into variable mode. This allows you to enter tokens into the fields
3. Enter [Field 1] (this is the token of your plain text area field) in the Paragraph text field. Ensure you use square brackets and there's a single space between the Field and 1.
4. Click on the + icon to toggle out of variable mode
5. All fields should turn back to their original state except for the Paragraph text field
6. Click Apply

Step 5 - Preview your form and save your component

1. Preview your component form in the Component form preview area
2. Click Save and continue to save your new Component

Step 6 - Add your component to a page

1. Navigate to and edit a page which has the Layout canvas
2. Click on the +plus button to open the Sidebar browser
3. Click on the Components tab
4. Drag your new Component onto the Layout canvas
5. Double click on the Component to edit its settings
6. Add some text to the Plain text area
7. Preview your page to see your Component applied.

1. Click on the + plus button on the Layout canvas to open the Sidebar browser
2. Drag a Paragraph element onto the Layout canvas.

Step 3 - Create the component form

1. Click on the + plus on the Component form builder to open the Sidebar browser
2. You will see that the Elements within the Sidebar browser are Form elements. If not, click on the Fields tab at the top
3. Drag a Plain text area field element onto the Component form builder
4. You will see [Field 1] has been added next to the field name.

Step 4 - Link the component form to the component layout

1. Double click the Paragraph element on the Layout canvas to open its settings
2. Click on the  to switch all fields into variable mode. This allows you to enter tokens into the fields
3. Enter [Field 1] (this is the token of your plain text area field) in the Paragraph text field. Ensure you use square brackets and there's a single space between the Field and 1.
4. Click on the + icon to toggle out of variable mode
5. All fields should turn back to their original state except for the Paragraph text field
6. Click Apply

Step 5 - Preview your form and save your component

1. Preview your component form in the Component form preview area
2. Click Save and continue to save your new Component

Step 6 - Add your component to a page

1. Navigate to and edit a page which has the Layout canvas
2. Click on the +plus button to open the Sidebar browser
3. Click on the Components tab
4. Drag your new Component onto the Layout canvas
5. Double click on the Component to edit its settings
6. Add some text to the Plain text area
7. Preview your page to see your Component applied.