Using the page builder

In this article, we'll go through the layout of the page builder as well as how to use it.

Layout

Once you've clicked the edit icon on the name of a page version (or clicked Save when creating a new page version), the page builder will open and you'll see a screen similar to the below: Page builder layout.png

On the left, you have the list of available Frontend components that you can drag into a section (for example, HEAD or MAIN) on the page. The list is searchable so you can easily find what you're looking for: Page builder layout components section.png

The middle section is the layout of your page and where you add and order your Frontend components to build your page: Middle section in page builder.png You'll need to add layout elements before dragging in Frontend components. Click the blue add icon to add a layout element.

On the right is the preview section. By clicking the link (or typing it into a browser), you can see the changes you make within your page instantly on any browser on any device. If you scan the QR code on your mobile device, it'll open straight away. You can also access the preview at any time by clicking the Preview button on the top right of your screen: Accessing preview on page builder.png

If you click on a Frontend component in the middle section, or you drag a Frontend component into the layout of your page, the right of your screen will change to the component editor. This is where you can edit the settings of that particular Frontend component, including which devices you want to show that Frontend component on: Component settings editor.png

The device icons in the center of the screen highlight which device version you're currently working on. For example, the below shows we're building the mobile version. The light blue component is the selected component. The dark blue component is visible on the selected device. The grey components aren't visible on the selected device.

You can select the different versions (tablet and desktop) to view the different structures per device: Using device selector in page builder.png

You can also add a name for your component that's only shown in the studio: Add name to component.png

You can undo or redo any unsaved changes using the arrow icons: Undo redo changes.png

Once you're happy with your changes, click the Save button on the top right of your screen, which will save your changes.

Save page builder progress.png

Or click the drop-down menu to select the saving mode.

Save button actions.png

You can exit the page by clicking the back arrow on the top left of your screen (click this before saving if you want to discard your changes):

Exit page builder.png

If you're editing a live page version, the Save button will become a Publish button.

Using layout elements and component groups

A layout element must be added to a page for you to be able to add a Frontend component into it.

To add a layout element to your page, click the blue add icon: Adding a layout element.png

A pop up will open and you can select if you want to add a layout element width or a component group: Select a layout element.png

Once you've added a layout element, you can adjust the size by clicking on the layout element and adjusting the width in the settings panel: Edit width of layout element.png

You can add a name to your layout element that's only shown in the studio. Add a name for your layout element.png

You can also choose the devices to make the layout element visible rather than at the component level.

You can use the more icon to access duplicate or delete the layout element and all the components in it. Layout element more icon.png

If you want to delete all Frontend components within a layout element, use the trash can icon on the layout element then all components within it will also be deleted.

Layout elements create automatic breakpoints for different devices: mobile, tablet, and desktop. Below is how they'll display on each device:

Layout elementMobileTabletDesktop
1/11/11/11/1
1/21/11/21/2
1/31/11/21/3
2/31/11/22/3
1/41/11/21/4
1/61/21/61/6

Once you have your layout elements in place, you can add your Frontend components to them.

You can also add a component group that you've created in Templates by clicking the blue add icon and selecting the component group you want to add. See the creating a component group article for more information.

Searching for Frontend components

You can either search for the name of a Frontend component using the search bar, or you can scroll through the list of available components until you find the one you want to add. Frontend components are grouped under categories to help you find what you're looking for more easily. Searching Frontend components.png

Adding Frontend components

Once you've added a layout element to your page, you can add a Frontend component to it by dragging it from the list and dropping it into your layout element. You can add multiple components within 1 layout element or just have 1.

The Frontend components available in your list will depend on what your developers have made available to you.

Duplicating Frontend components

You can copy a Frontend component within the same page to save time inputting the same details.

Hover on the Frontend component, click the duplicate icon, and it will copy the component within the same layout element. You can then move the component to where you want it to be and adjust the settings as you wish.

The same can be done for a layout element and any Frontend components within that layout element. Duplicate component.png

Reordering or removing components

To reorder the Frontend components in your page, you can drag and drop them to where you want them to be. That can be within 1 layout element or moving it into another layout element. You can even create a new empty layout element and drag it into there.

You can't drag a component into a component group, a component group must be edited in Templates.

To remove a Frontend component, you need to hover on the component you want to delete, select the more icon, then select the trash can icon. Delete component.png

Configuring components

When you add a Frontend component to your page or click on 1 within your page, you activate the component editor panel. Any changes you make will only affect this specific Frontend component.

Every Frontend component has General settings that's accessible using the expand icon. You can select if you want the particular component to be available on certain devices (mobile, tablet, and desktop) using the toggle switches. You can also add a name to know what the component is, and it's not shown anywhere to your customers. Component general settings.png

The other setting sections will be shown depending on what type of component you've clicked on. These can be anything, like:

  • Position (where it will sit within your page)
  • Image (where you can change your image and edit the text over the image)
  • Data source filter (where you can select, edit, or add a data source filter for products or content)
  • Links (where you add URLs for your users to open)
  • Text (where you add your copy)

The schemas article shows some possibilities.