Using the page builder

From the page builder you can define the layout and content of page versions.

Access the page builder

You can access the page builder by editing a page version from the following Studio areas:

Page builder interface

The page 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 menu bar displays the following commands:

Back arrow: closes the page builder and navigates to the previous page.
Page versions drop-down: lets you switch from one page version to another, either in the same page folder or in a different one.
Device drop-down: lets you see the page version 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 page version dialog that displays a link and QR code to the preview. The QR code is useful when previewing your page version on a mobile device. You can also access the preview link and QR code from the preview section.
Save: saves your changes. For additional options, click the drop-down arrow and select from the following options:
- Save and duplicate: saves the page version and creates a duplicate page version.
- Save and schedule: saves the page version and opens the Schedule page version dialog.
- Save and make live: saves the page version and publishes it immediately.
- Save and make default: saves the page version and makes it Default.
- Save and save as template: saves the page version and opens the Create new page template dialog, where you can enter the name of the page template and save the page version as a page template. To edit the page template, from the Studio home page or from the left menu, go to Templates.
- Save and assign for review: saves the page version and lets you assign a team member to review the changes. To learn more about page version reviews, see Reviews.
If you edit a live page version, you cannot save changes but only publish them.
Publish: directly publishes the page version. For additional options, click the drop-down arrow and select from the following options:
- Publish and duplicate: publishes the page version and creates a duplicate page version.
Comment icon: opens the comments pane.
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 page version. 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

The layout section is divided into the HEAD, MAIN, and FOOTER sections. From here you can create the structure of the page version by adding layout elements, component groups, and Frontend components.

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 or a component group

To add a layout element or a component group, click Add layout element in the respective section and select the layout element or component group 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.

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.

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 page version's preview URL and QR code. The QR code is useful when previewing your page version on a mobile device. You can also access the preview link and QR code from the menu bar.

The page version'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 page version for mobile devices.

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

Version history pane

The version history pane displays previously saved versions of the page version 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 the Draft section on the Site builder.
When the version history pane is open, the page builder is locked and you cannot make any changes to the page version layout and content.