Using the page builder

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

Menu bar

It displays the page builder's general commands as follows:

• The back arrow closes the page and takes you back to the Site builder.

• The drop-down displays a list of page versions to switch between page versions on the same page folder, or to find other page versions through the different page folders.

• The device icons lets you choose a device version and highlights the device currently selected.

• 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.

• Save directly 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 and publishes the page version immediately.
  • Save and make default saves and makes the page version Default.
  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.

Component section

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.

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.

Layout section

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.

Preview section

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.