Using the component group builder

From the component group builder you can define the layout and content of component groups.

Access the component group builder

You can access the component group builder by editing a component group from Templates > Component groups.

Component group builder interface

The component group builder interface consists of four parts:

The menu bar at the top
The components pane on the left
The layout section in the middle
The preview section on the right

The main interface of the component group builder

The menu bar displays the following commands:

Back arrow: closes the component group builder and navigates to Templates > Component groups.
Component groups drop-down: lets you switch from one component group to another.
Device drop-down: lets you see the component group configuration for the selected device. For example, if a Frontend component is configured to be displayed only on mobile and tablet devices and you select desktop from the drop-down, the component is greyed out in the layout section because it is not active for desktop devices.
Undo: reverts your last change.
Redo: reverts your last undo action.
Preview: opens the Preview your component group dialog that displays a link and QR code to the preview. The QR code is useful when previewing your component group on a mobile device. You can also access the preview link and QR code from the preview section.
Save: saves your changes. Otherwise, click the drop-down arrow to select from the following option:
- Save and duplicate: saves the component group and creates a duplicate component group.
Comment icon: opens a pane that lets you comment and tag team members.
Version history icon: opens the Version history pane.

Components pane

The pane displays the Frontend components that you can add to the layout section to design the component group. In the pane, Frontend components are grouped by category for easier access. You can also search for a Frontend component by entering its name in the search box.

Layout section

From here you can create the structure of the component group by adding layout elements and Frontend components. Make sure you create a structure that you want to use across multiple page versions.

Layout elements are containers for Frontend components, they have predefined breakpoints for different devices: mobile, tablet, and desktop. The following table shows how the layout element is displayed on each device.

Layout element	Mobile	Tablet	Desktop
1/1	1/1	1/1	1/1
1/2	1/1	1/2	1/2
1/3	1/1	1/2	1/3
2/3	1/1	1/2	2/3
1/4	1/1	1/2	1/4
1/6	1/2	1/6	1/6

Add a layout element

To add a layout element, click Add layout element and select the layout element from the dialog.

Edit a layout element

To edit a layout element, select the layout element in the layout section. Then, in the Component settings pane, set the configuration values in the General settings section:

In the Name field, enter the name to be displayed on the layout element in the layout section, it helps identifying the layout element.
From the Layout element width drop-down, select the width of the layout element.
Set the layout element visibility by clicking the following toggles:
- Show on mobile: makes the layout element visible on mobile devices.
- Show on tablet: makes the layout element visible on tablets.
- Show on desktop: makes the layout element visible on desktop devices.

Entering the name of a layout element in the Name field of the Layout element settings. The layout element name is displayed in the layout section.

Reorder a layout element

To reorder a layout element, drag it to the new location.

Duplicate or delete a layout element

To duplicate or delete a layout element, hold the pointer over it, click More, and select Duplicate or Delete.

Add a component

To add a Frontend component, you first need to add the layout element to contain the component if it is not present. Then, select the component from the Components pane and drag it to the layout element.

Edit a component

To edit a Frontend component, follow these steps:

Select the component in the layout section. Then, in the Component settings pane, set the configuration values in the General settings section:
- In the Name field, enter the name to be displayed on the component in the layout section, it helps identifying the component.
- Set the component visibility by clicking the following toggles:
  - Show on mobile: makes the component visible on mobile devices.
  - Show on tablet: makes the component visible on tablets.
  - Show on desktop: makes the component visible on desktop devices.
  Frontend components are fetched on the client side, even when they are hidden for the type of device in use. Components are included in the DOM, but the hidden ones are not rendered on the screen. Hiding DOM elements using CSS is a common approach to create responsive websites and the hidden DOM elements don't affect your website's performance.
Set the configuration values in the other sections that vary depending on the selected component's schema.

For information on the configuration fields of Frontend components, see Component settings.

A Frontend component selected from the layout section and the related Component settings pane open.

Reorder a component

To reorder a Frontend component, drag it within the same layout element or to another layout element.

Duplicate or delete a component

To duplicate or delete a Frontend component, hold the pointer over it, click More, and select Duplicate or Delete.

Preview section

The preview section displays the component group's preview URL and QR code. The QR code is useful when previewing your component group on a mobile device. You can also access the preview link and QR code from the menu bar.

The component group's preview is not related to the device you selected from the device drop-down in the menu bar, but it is related to the device you are viewing it on. For example, if you selected desktop from the device drop-down but you are displaying the preview on a mobile device, the preview will display the component group for mobile devices.

You can work from the component group builder with the preview open, the changes will be reflected instantly on the preview. When you click on a Frontend component from the component group builder, the component is highlighted on the preview.

Version history pane

The version history pane displays previously saved versions of the component group from the last 90 days.
To restore a version, select it from the list and click Duplicate Version. You can then edit the duplicated version from Templates > Component groups.
When the version history pane is open, the component group builder is locked and you cannot make any changes to the component group layout and content.

Layout element	Mobile	Tablet	Desktop
1/1	1/1	1/1	1/1
1/2	1/1	1/2	1/2
1/3	1/1	1/2	1/3
2/3	1/1	1/2	2/3
1/4	1/1	1/2	1/4
1/6	1/2	1/6	1/6

Layout element	Mobile	Tablet	Desktop
1/1	1/1	1/1	1/1
1/2	1/1	1/2	1/2
1/3	1/1	1/2	1/3
2/3	1/1	1/2	2/3
1/4	1/1	1/2	1/4
1/6	1/2	1/6	1/6

Using the component group builder

Access the component group builder.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Component group builder interface.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Menu bar.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Components pane.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Layout section.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Add a layout element.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Edit a layout element.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Reorder a layout element.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Duplicate or delete a layout element.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Add a component.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Edit a component.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Reorder a component.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Duplicate or delete a component.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Preview section.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Version history pane.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}