Special features of free sections
Types of sections in the editor
There are two main types of sections in the editor: standard and free sections.
Content in a standard section is automatically aligned to the grid, and it adapts to different devices. You can fulfill 90% of all design tasks using standard sections.
You can also customize the design of standard sections using elements with absolute positioning. The rules to select the dots of binding and containers for such elements are the same as when you set up a free section.
Free sections let you move and rotate elements. This gives more freedom to create websites with unique design but also requires you to properly bind elements in the section, which allows sections to adapt to different devices.
Moving elements freely around the section is achieved thanks to the position:absolute CSS property.
Setting up the Full-screen mode in free sections
The Full-screen mode means that a section, by default, takes up the whole viewport and its height automatically adapts to the viewport height.
You can set up the following parameters of the full-screen mode in the free section:
- Height
- Minimum height
- Maximum height
Height
By default, a full-screen mode section takes up 100% of the visitor's viewport. If the Maximum height is also set and its value is bigger than the viewport height, the Height value is ignored and the section becomes scrollable.
By default, a full-screen mode section takes up 100% of the visitor's viewport. If the Maximum height is also set and its value is bigger than the viewport height, the Height value is ignored and the section becomes scrollable.
Minimum height
It's the height value of a section or an element retained even in the smallest viewport. If the visitor's viewport is smaller than this value, the section becomes scrollable.
It's the height value of a section or an element retained even in the smallest viewport. If the visitor's viewport is smaller than this value, the section becomes scrollable.
Minimum height is a fixed value setting therefore it is specified in pixels (px).
Set the minimum height value to fit the section tightly. The same rule applies to free pop-ups and other elements that have a minimum height setting.
If you are building a site on a big screen computer, do not specify too large a minimum height value. This will make your section, element or pop-up take up several viewports on small screen devices.
Maximum height
It's the height value above which the section won't be displayed even on the larger screen devices. For example, if you specify a maximum height of 1500 px and the visitor's viewport is 2500 px, the section will still be displayed with the height of 1500 px.
It's the height value above which the section won't be displayed even on the larger screen devices. For example, if you specify a maximum height of 1500 px and the visitor's viewport is 2500 px, the section will still be displayed with the height of 1500 px.
How absolute positioning works
Elements in the section are always placed in the container. The grid, the viewport itself, any card or pop-up can serve as a container.
The container serves as the parent for an element. When the viewport size changes, the element changes its location relative to its parent on devices with different viewport sizes.
When the viewport size changes, the element with absolute positioning "disappears" from its initial place and its position is calculated anew. Other elements in the section are not taken into account, their positions are ignored.
That's why it's crucial to select a proper dot of binding and container for each element of the section in order to create sections that display correctly on all popular devices.
For example, let's add a Shape, an element with absolute positioning. We select the Grid as its container to define positioning. We bind the element to the top left corner of the grid. The selected dot of binding will be the origin of coordinates along the X and Y axes.
Let's specify 250 px on the X and 150 px on the Y axis. Each time the viewport size changes, the element will always be positioned 150 px below and 250 px to the right of the dot of binding (see the video below).
Choosing a dot of binding for an element
There are 9 dots of binding to position an absolute element. To choose the right dot of binding, imagine that the container with the element has started to resize. Where should the element be located after the container has finished resizing?
If the element should be located at the bottom in the center of the section, then choose Center Bottom as the dot of binding. To ensure that the element is always at the top right corner, the dot of binding should be set to Right Top, etc.
Choosing a container to bind an element
The container is the area where an element is located. For example, an element can be bound to the grid, to a pop-up, to the screen, to a column, or to a card. The container is the parent for an element. When the viewport size changes, the element changes its location relative to its parent.
Binding to the grid
In the free section, the Grid is the most common container for an element. To enable or disable the Grid display in the editor, press ALT + G.
In the free section, the Grid is the most common container for an element. To enable or disable the Grid display in the editor, press ALT + G.
The grid has a width of 1150 px and it is suitable for adapting the section to most viewport sizes, so you should place all the main elements of the section within the grid. Therefore choose the Grid as the container for such elements.
Binding to the screen
When you choose the Screen as the container for an element, the element is positioned relative to the user's viewport. When the size of the viewport changes, the element is relocated.
When you choose the Screen as the container for an element, the element is positioned relative to the user's viewport. When the size of the viewport changes, the element is relocated.
It comes in handy for elements located outside the grid, for example, for custom-designed elements that adorn sections. It's also suitable for a free section that you turn into a viewport-wide header of your site.
The video below shows the difference between binding elements to the grid and to the screen. The header elements (logo and menu) and the background grass are bound to the Screen. The button and text elements are bound to the Grid.
You can see how, while changing the viewport size, the elements keep their positions relative to the specified coordinates and set containers.
Setting up dots of binding and containers on mobile devices
You need to set up positioning of absolute elements on mobile devices separately from the PC version of your site. To go to the Mobile phones mode, click the icon on the editor panel.
You can set up the size, position, and dot of binding for elements on mobile devices.
Containers cannot be separately set up for mobile devices.
For example, if you duplicate an element in the PC version and drag it to another section, on mobile devices this element will remain bound to the old section.
This will cause the element to "disappear" (go below the section) on scroll. To avoid this on mobile devices, always add the element to the section (container) where the element will actually be located.
Keyboard shortcuts
Learn more about available keyboard shortcuts.