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
- Navigate to Site Studio > Components > Components
- Click +Add component
- On the next screen within, within the Details area, enter a name in the Title field
- Select a category in the Category field. This determines where the Component is displayed on the Sidebar browser
- Check the Enable inline editing checkbox to allow the components content to be edited directly on the website.
- 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
- Click on the + plus button on the Layout canvas to open the Sidebar browser
- Drag a Paragraph element onto the Layout canvas.
Step 3 - Create the component form
- Click on the + plus on the Component form builder to open the Sidebar browser
- You will see that the Elements within the Sidebar browser are Form elements. If not, click on the Fields tab at the top
- Drag a Plain text area field element onto the Component form builder
- You will see [Field 1] has been added next to the field name.
Step 4 - Link the component form to the component layout
- Double click the Paragraph element on the Layout canvas to open its settings
- Click on the + icon to switch all fields into variable mode. This allows you to enter tokens into the fields
- 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.
- Click on the + icon to toggle out of variable mode
- All fields should turn back to their original state except for the Paragraph text field
- Click Apply
Step 5 - Preview your form and save your component
- Preview your component form in the Component form preview area
- Click Save and continue to save your new Component
Step 6 - Add your component to a page
- Navigate to and edit a page which has the Layout canvas
- Click on the +plus button to open the Sidebar browser
- Click on the Components tab
- Drag your new Component onto the Layout canvas
- Double click on the Component to edit its settings
- Add some text to the Plain text area
- Preview your page to see your Component applied.