Build and edit your front-end pages using the builder

The builder is a simple and intuitive tool for creating your pages without requiring any particular knowledge of development or integration. In this article, we explain how to use it.

Go to the Administration - Front-end menu Click on the "Pages" tab. Find the page you want to build or edit. You can search using the search field and/or use the filters by page type and status, or find it directly in the list of created pages.

Once you have found your page, click on the builder icon at the end of the row. You are now in the builder. This is what an empty page looks like. You will rarely encounter this case — this display indicates that the page you are configuring has no components, and also has no header or footer. If this is the case, we invite you to first configure the components of your header and footer, after creating them. Find more information on creating this type of page here.

Add components to your pages

To add a component to your page, click on the component of your choice in the right-hand bar, then drag and drop it to the location of your choice. A green line should appear to indicate that the component is about to be dropped correctly.

To edit a component on your page, click on the component in question. A small menu then appears on the right, at the top or bottom, depending on the size of the component. In this menu, you will find in order:

• The upward arrow: clicking on this icon moves you up one level in the selection of your component. For example, if you select the logo on the screen below, a small menu will appear just above the logo (the logo is a sub-component of the "compact menu" component); if you click the arrow, this will select the "compact menu" component and therefore display the menu shown in the screenshot below.
• The multi-directional arrow: if you click and hold this icon, you can move the component among the other components.
• Duplication: clicking on this icon creates a copy of the component.
• The trash bin: clicking on this icon removes the component from your page.
• The gear wheel: clicking on this icon gives you access to the settings of the component or sub-component.

Configure the settings of each component

Each component or sub-component has its own settings. We invite you to try the various settings in order to test their rendering.

You can for example change which menu of your front-end you wish to display in the "compact menu" component. To learn how to create and configure your menus, click here.

To edit an image in a component, double-click on it. An image upload pop-in then appears.

Once your new image has been uploaded, you can select it by clicking on it. It is applied automatically. You can then close the pop-in by clicking on the cross in the top right corner of the pop-in, or by clicking on the builder visible in the background.

To edit an icon in this type of component, open the component settings. In "Icon type", select the type of icon to use. You can use images or icons. If you choose the "Image" type, simply double-click on each icon to edit it.

If you choose the "Icon" type, edit each icon by displaying its settings as follows: In the icon settings, enter the name of the icon to display. The name is composed as follows:

• It starts with "bi-" (default prefix)
• It ends with the bootstrap icon shortcut. To help you, you will find a list of bootstrap icons on this site: icons.getbootstrap.com

Examples of icons: bi-box, bi-circle, bi-arrow-down-left-square...

To edit the colours of your front-end, click on the "palette" icon. The colour palette is configured for your entire front-end. It will be the same for all pages.

Edit the colours of your front-end palette. Define the main colours of your theme. These can be used in the configuration of each component of your front-end. To edit a colour, click on the colour square. Define your colours using a colour picker, or by directly filling in the RGB fields. Click the "Save" button each time you have finished configuring a component or your palette.

It is possible to edit the CSS but...

...we strongly advise against using this feature if you are not accustomed to CSS integration. Please note: the CSS is configured for the entire builder. It will be the same for all pages. Any changes made in this editor may alter the proper functioning of your front-end. Any intervention by our teams related to the use of this editor will be charged.

The quick access bar

From this bar, you can:

• Change the status of your page by clicking on the current state: switch from draft to published, or from published to draft (offline).
• Edit the page settings by clicking on the "page" icon.
• Switch pages by clicking on the "reversed arrows" icon.

The publication bar

From this icon bar, you can (in order):

• Preview your page before publication.
• Save the draft of your latest changes.
• Undo your changes.
• Publish your latest changes.

Don't forget to configure all your components in each language displayed on your front-end.

Please note: adding or removing a component in one language affects the other languages. Only the configuration is independent language by language.

To exit the builder, click on the exit icon.