Hybrid grid

Hybrid grid combines advantages of standard sections and opportunities of free elements.

Standard sections let you promptly create new sections with a preset structure that is aesthetically and technically thought-out. You can refine standard sections: modify their layout, set up content zones, delete and add new elements. There are more than 30 types of elements to add: text elements, images, maps, buttons, icons, etc.

You can also easily integrate free elements with more flexible settings into standard sections. Use them to create a truly unique design.

In the standard sections, you can bind free elements to content zones: columns, cards, footers, etc. Bound elements properly adapt to mobile devices and stay put when the height values of other content zones change. This is crucial as users browse your site on devices with different viewports.

When you move a card, change the number of cards in a row or reorder them, all free elements bound to a particular card move around with it. Elements bound to the grid stay in the same place ignoring any changes in the order of cards.

If you bind an element to the bottom of any card or column, then this element automatically adapts to any changes of the card height and stays put at the bottom.

If you bind your element to any card in the slider, then this element will move with this card while scrolling.

If you bind the element to the screen or grid, then it will stay put in this place even when you scroll the slider.

You can also bind a free element to the content zone on any tab. In this case, the element will be shown only on the chosen tab. Otherwise, you can bind it to the screen or grid to have it displayed on all the tabs.

By default, Container autoselection is enabled in the Editor options on the upper panel, i.e. an element automatically binds to the nearest content zone. To bind to a content zone, an element should cross it at least by one pixel.

NOTE
An element that doesn't fit into a content zone is not automatically bound to it. You can set up its binding manually. To do that, place the element where needed and select a suitable binding dot in the Context menu → Binding → Container.

For a content zone to get into the list of possible containers for a particular element, this element should cross its border.

To change its binding, you need to remove an element from the content zone.

If you want an element you're moving to retain its binding to a particular container, press and hold CTRL or ⌘ while moving the element, or disable Container autoselection in the Editor options. The element will also retain its container if you move it with the keyboard arrows.

You can manually set up the height of content zones even in the standard sections. To learn more about it, read the article on Resizing columns and cards.