Особенности работы со свободной секцией

На платформе Flexbe доступно два вида секций: базовые и свободные секции.

В базовой секции контент автоматически выстраивается по сетке и адаптируется для разных устройств. 90% задач можно реализовать с помощью базовых секций.

Дополнения в базовой секции возможно реализовать использованием абсолютных элементов. Правила выбора точки привязки и контейнера для них будут такие же, как в Свободной секции.

В свободной секции элементы можно перемещать и поворачивать. Это дает больше свободы при создании уникального дизайна сайтов, но также обязывает правильно привязывать элементы в секции, что позволяет секциям адаптироваться под различные устройства.

Полноэкранный режим означает, что секция по умолчанию занимает весь экран и ее высота автоматически подстраивается под высоту экрана. 

Свободную секции в полноэкранном режиме можно настроить по следующим параметрам:
1. Высота
2. Минимальная высота
3. Максимальная высота

Рассмотрим переменные подробнее:

1) Высота
По умолчанию полноэкранная секция занимает 100% экрана посетителя сайта. Если Максимальная высота тоже указана и ее значение превышает высоту экрана, то значение Высоты игнорируется. 

2) Минимальная высота — это высота, меньше которой секция или элемент не будет даже на самом маленьком экране. Если экран посетителя будет меньше минимальной высоты, в окне браузера появится скролл.

Минимальную высоту необходимо выбирать таким образом, чтобы все элементы поместились в секции впритык. То же правило работает для Свободных окон и остальных элементов на Flexbe, у которых можно настроить минимальную высоту.

Минимальная высота является фиксированным значением, поэтому указывается в пикселях ( px).

Элементы в секции всегда находятся в каком-либо контейнере. Контейнером может быть сетка в секции, сам экран, карточка или окно.

Контейнер является родителем элемента, относительно которого элемент меняет свое положение на экранах разных размеров.

При смене размера экрана элемент "исчезает" с изначального места и его положение рассчитывается заново. При этом остальные элементы в секции не учитываются. Элемент ведет себя так, будто других элементов в секции нет.

Поэтому важно правильно выбрать точка привязки и контейнер для каждого элемента в секции, чтобы секция корректно выглядела на всех популярных размерах экранов. 

Пример:
В секции добавлен абсолютный элемент Фигура. 
Он позиционируется относительно Сетки (сетка является контейнером, в котором находится Фигура). Элемент привязан в левый верхний угол сетки. 
Точка привязки будет началом отсчета точки координат по оси X и Y. 
Для элемента выставлены значения: 
По оси Х : 250 px;
По оси Y: 150 px
При смене размера экрана элемент всегда будет располагаться на 150 px ниже и 250 рх правее точки привязки (см. видео ниже).

В настройках абсолютного элемента доступно 9 точек привязки. Чтобы правильно выбрать точку привязки, представите, что размер контейнера с элементом начал меняться. Где элемент должен находиться при смене размера контейнера?

Если элемент должен находиться внизу по центру секции, то точкой привязки нужно выбрать Внизу по центру. Чтобы элемент находился всегда вверху справа, выберите точку привязки Сверху справа и т.д.

Также можно зажать клавишу CTRL при перемещении элемента. Ближайший угол привязки будет назначен автоматически.

Настройки элемента находятся в большей степени в Панели настроек. Вызвать Панель настроек можно кликом на клавишу TAB.

Также вы можете попасть в настройки через настройку конкретного элемента. Панель настроек представлена на скриншоте ниже (справа).

Выберите в Панели настроек точку привязки и контейнер элемента. Что такое контейнер и для чего он нужен, расскажем далее в статье.

Контейнер — это область, в которой расположен элемент. Например, элемент может быть привязан к сетке, к окну, к экрану, к колонке или к карточке. Контейнер является родителем, относительно которого позиционируется элемент при смене размера экрана. 

Привязка по Cетке
В свободной секции контейнером для элементов чаще всего является является Сетка. Включить сетку в редакторе можно сочетанием клавиш ALT + G.

Сетка имеет ширину 1150px на ПК и 360px на мобильных. Она подходит для адаптации секции под большинство экранов, поэтому все основные элементы секции необходимо размещать внутри сетки. Привязку для таких элементов необходимо указать По сетке.

Привязка по Экрану 
Привязка по Экрану означает, что родителем для элемента становится экран браузера, то есть при смене размера экрана он будет позиционироваться относительно всего экрана.

Привязка по Секции
Привязка по Секции означает, что родителем для элемента становится вся секция. При смене размера экрана, поменяется размер секции, и элемент будет позиционироваться относительно всей секции.

Это актуально для элементов, которые размещаются вне сетки, например, декоративные элементы в секции. 

На анимации ниже показана разница привязки элементов по сетке и по экрану. Элементы шапки (логотип и меню) и трава  на фоне привязаны по Экрану. Текстовые элементы и кнопка привязаны по Сетке.

Вспомним, что сетка и экран являются контейнерами для элементов. Видно, как при смене размера экрана элементы зафиксированы на своих координатах относительно контейнеров привязки. 

Позиционирование абсолютных элементов на мобильных устройствах необходимо настраивать отдельно от ПК версии.

Для перехода в мобильный режим настройки кликните значок в панели редактора.

Размер, расположение и точку привязки элемента можно настроить отдельно для мобильных. 

Например, если в ПК версии вы продублировали элемент и перетащили его в другую секцию, на мобильных этот элемента останется привязанным к старой секции.