Free sections
A free section is a new type of sections with free positioning of elements. You can move all the section elements as you see fit, resize and rotate them, or change the order of layers. Free sections empower you to create unique designs, without using section templates.
Adding a free section
Choose any template from the Free section category.
Section height
To change height of any free section, drag its bottom edge.
Full-screen mode
Full-screen mode means that one section takes up the whole screen space, and its height adopts to viewports across different devices.
In the full-screen mode, all sections have a minimum height. You should specify a value of the section minimum height that allows all the needed elements to fit in.
In the editor, you see sections with their set-up minimum height. The full-screen mode is applied when a visitor’s screen size is bigger than the specified minimum height. You can also see the section's full-screen mode in the Preview mode.
Adding an element
To add elements to a free section, click on the + icon at the top left corner.
You can also right-click on any empty space in the section.
Free section editor
You can find the editor options on the top settings panel.
Show grid
This toggle shows the guides that help align content with the grid and other elements. They also prompt when an element reaches the point you need.
Show distance
This options displays distances between two elements or between an element and the grid border. To see the distances, hover over a neighboring element or start moving the element you want to position.
Snap to objects
This option enables binding of an element to another element and to the grid. It helps to align elements even if they don't touch each other.
Hidden elements and sections
In the editor, this option shows elements and sections hidden for the selected view mode (PCs and tablets or Mobile phones).
If this toggle is turned off, all hidden elements and sections aren't displayed in the editor.
Errors in elements
This toggle turns on displaying of errors in elements. Such errors occur in case when Actions on click aren't properly set up. For example, a product name or price isn't given in the product card or there are some blank fields in the Action on click setting of a form.
