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:

30723072

On the left, you have the list of available Frontastic 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:

30723072

The middle section is the layout of your page and where you add and order your Frontastic components to build your page:

30723072

You'll need to add layout elements before dragging in Frontastic 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:

30723072

If you click on a Frontastic component in the middle section, or you drag a Frontastic 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 Frontastic component, including which devices you want to show that Frontastic component on:

30683068

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:

30723072

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

30723072

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

30703070

Once you're happy with your changes, click the Save button on the top right of your screen, which will save your changes. You can exit the page without saving your changes by clicking the back arrow on the top left of your screen:

30723072

📘

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 Frontastic component into it.

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

30723072

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

30723072

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:

35843584

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

35843584

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.

35843584

👍

Tip

If you want to delete all Frontastic 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 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/3

1/3

2/3

1/1

2/3

2/3

1/4

1/2

1/4

1/4

1/6

1/1

1/3

1/6

Once you have your layout elements in place, you can add your Frontastic 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 Frontastic components

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

30663066

Adding Frontastic components

Once you've added a layout element to your page, you can add a Frontastic 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 Frontastic components available in your list will depend on what your developers have made available to you.

Duplicating Frontastic components

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

Hover on the Frontastic 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 Frontastic components within that layout element.

30723072

Reordering or removing components

To reorder the Frontastic 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 Frontastic component, you need to hover on the component you want to delete, select the more icon, then select the trash can icon.

30723072

Configuring components

When you add a Frontastic 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 Frontastic component.

Every Frontastic 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.

25562556

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 Frontastic schemas article shows some possibilities.


Did this page help you?