Documentation

Component groups

Learn how to reuse Frontend component combinations across page versions.

Component groups let you create sets of Frontend components that you can use across multiple pages on your website. For example, you can use component groups if you use the same layout for the header and footer of your pages.

You can use component groups on your pages by adding them to page versions from the page builder.

If in the page builder you use component groups that contain errors, you will not be warned about it. Check your component groups regularly to detect and correct any errors.

Create a component group

To create a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

    The Component groups pane in the Templates area

  2. Click + New component group: the Create new component group dialog opens.

  3. In the Component group name field, enter the name of the component group.

  4. If you need to add a data source to the component group, click + Add data source filter in the Data source section: the data source filter editor opens.

  5. Click Save: the component group is saved in the Component groups pane.

  6. Click the Edit icon related to the component group you created: the component group builder opens.

  7. In the component group builder, define the structure and content of the component group. After you save the component group, it will be available in the page builder.

Edit a component group

Edit a component group layout

To edit the layout of a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the Edit icon related to the component group to edit: the component group builder opens.

  3. In the component group builder, edit the component group as you need.

Changes to the component group will update all page versions where it is used. Check the preview before saving your changes.

Edit a component group settings

To edit the settings of a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the More icon related to the component group to edit.

  3. Click Settings: the Component group settings dialog opens.

  4. Edit the settings as you need. Then, click Save.

Duplicate a component group

To duplicate a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the More icon related to the component group to duplicate.

  3. Click Duplicate: the Duplicate component group dialog opens.

  4. Edit the component group name. Then, click Save: the component group is saved in the Component groups pane.

  5. Click the Edit icon related to the duplicate component group and edit it in the component group builder.

Delete a component group

To delete a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the More icon related to the component group. Then, click Settings: the Component group settings dialog opens.

  3. In the Component usage section, make sure the This component group isn't used on any pages message is displayed. Then, close the Component group settings dialog.

    Deleting a component group that is used on one or multiple page versions might break them. Make sure the component group is not used before deleting it.

  4. Click the More icon related to the component group to delete. Then, click Delete: the Delete component group forever? dialog opens.

  5. In the text box, enter DELETE. Then, click Delete.