Using the page builder
The page builder helps you structure the layout of page versions using Frontend components.
Page builder interface
The page builder can be divided into four sections:
- The menu bar at the top of the page builder
- The Components section on the left of the page builder
- The Layout section in the middle of the page builder
- The Preview section on the right of the page builder
It displays the available Frontend components, which are the building blocks for your page. Before adding Frontend components, you must add a layout element.
Add a component
Frontend components are grouped by their category for easier access. You can also search for the Frontend component by entering it's name in the search box. To add a Frontend component, drag it to the layout element.
Edit a component
To edit a Frontend component, click it in the layout section. In the Component settings pane, expand the General settings section and choose from the following options:
- For Name, enter the name to be displayed on the component in the layout section. The name field can be used to differentiate between multiple components of the same type in your page version.
- Show on mobile toggles the component's visibility on mobile devices.
- Show on tablet toggles the component's visibility on tablets.
- Show on desktop toggles the component's visibility on desktops.
- Anchor displays the anchor ID you can use for linking another Frontend component to this component.
Depending on the selected component's schema, other additional settings might be displayed.
Reorder a component
To reorder a Frontend component, drag it within the same layout element or to another layout element.
A Frontend component can only be moved to a layout element.
Duplicate or delete a component
To duplicate or delete a Frontend component, hold the pointer over the component, click More, and then select Duplicate or Delete.
It displays the HEAD, MAIN, and FOOTER sections where you can place layout elements and Frontend components to build the page version.
Add a layout element
To add a layout element, click Add layout element in the respective section and select a layout element or component group in the Layout elements dialog.
A Frontend components can be added after adding the layout element.
Edit a layout element
To edit a layout element, click the layout element. In the Layout element settings pane, expand the General settings section and choose from the following options:
For Name, enter the name displayed on the layout element in the layout section.
For Layout element width, select the width for the layout element. Layout elements have predefined breakpoints for different devices—mobile, tablet, and desktop. The table below 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
Show on mobile toggle enables the component's visibility on mobile devices.
Show on tablet toggles enables the component's visibility on tablets.
Show on desktop toggles enables the component's visibility on desktops.
Reorder a layout element
To reorder a layout element and all Frontend components within, drag the layout element to the new location.
Duplicate or delete a layout element
To duplicate or delete a layout element, hold the pointer over the component, click More, and then select Duplicate or Delete.
It displays the page version's preview URL and QR code, if no components or layout elements are selected in the page builder. The QR code is useful when previewing your page version on a mobile device.
Alternatively, you can also access the preview link an QR code from the menu bar at the top of the page builder.