В марте прошлого года разработчики Элементора представили новую фичу для своего конструктора – возможность перейти с традиционных секций\колонок на флексбокс-контейнеры. Функция стартовала в альфа статусе, как экспериментальная, и многими пользователями, в том числе и мной, успешно игнорировалась.
И вот, полтора года спустя, флексы выходят на первый план и теперь активны в Elementor по умолчанию. Что это такое, и почему нам следует немедленно начать ими пользоваться, я кратко поясню в данной статье.
Механика верстки сайта на флексах знакома разработчикам довольно давно. В стандарт CSS её внедрили аж в 2009 году, с тех пор только улучшая и расширяя поддержку браузерами. Это не эталонный и не «единственно верный и самый крутой на планете» метод сборки сайта, однако в контексте Элементора это большой шаг вперед.
Что умеют флекс-контейнеры?
Технология Flexbox позволяет быстро и без лишнего кода выстраивать элементы сайта друг относительно друга по горизонтали и вертикали. Позиционирование очень гибкое и включает в себя многочисленные варианты центровок, выравниваний, смещений, переносов и много чего ещё.
Вы заметили фразу быстро и без лишнего кода, верно? Адепты Elementor-а наверняка знают, что их любимый конструктор живет на целых деревьях из div-ов с десятками уровней вложенности. С переходом на флекс-контейнеры мы, наконец-то, свободны от этих жутких дебрей кода, а это значит, что сайты будут открываться быстрее, имея более чистую и легкую архитектуру. Flex способен несколькими строчками кода заменить целые секции.
Кстати, про вложенность. Контейнеры позволяют конструировать собственные элементы дизайна из множества вложенных друг в друга контейнеров, живущих на flex-законах. Больше никаких секций и внутренних секций с их костылями. Да, по началу, вам может быть непривычно, но как только вы освоитесь и подружите себя с флекс-контейнерами, вы вздохнёте с облегчением. Я не буду выкладывать здесь как работает технология Flex CSS – на эту тему в интернете есть множество статей с картинками и доступным пояснением. Что касается Элементора, то дам полезный лайфхак: научитесь мысленно разбивать каждый элемент дизайна на столбцы и строки, от большего к меньшему. Так вы сможете легко и без пробуксовки верстать любые, даже самые навороченные, дизайны на Elementor Flexbox.
Как их включить и можно ли перевести старый сайт на флексы?
Во-первых, обновитесь до актуальной версии Elementor. Далее переходим в Настройки > Функционал и убеждаемся, что Флекс-контейнер активен. В новых версиях Элементора он активен по умолчанию, но всё же убедитесь.
Теперь что касается непосредственно редактора. Вместо секций, колонок и внутренних секций у вас будет только контейнер, а при создании нового блока на выбор предложат 12 предзаготовленных лэйаутов. Лично я выбираю только первые два, которые обозначают выстраивание элементов в строку или в столбец, и далее уже конструирую элементы вручную, основываясь на их взаимном позиционировании в дизайн-макете.
Если у вас есть готовый сайт на секциях, его можно переформатировать в флекс-контейнеры. Для этого есть кнопка преобразования, которую надо прожать вручную в каждой секции. Имейте в виду, что идеального преобразования всего сайта не получится, так как Flex CSS работает на несколько иных принципах. Переделывать многостраничный сайт, думаю, не имеет смысла – это займет немало времени. А вот небольшой лендинг вполне удастся «пересадить» за несколько часов.
Подведем итоги. Что мы получаем благодаря переходу Elementor на технологию флексбокс:
- Сайты стали ближе к чистой верстке
- Возросла скорость загрузки страниц
- Более простая и логичная адаптация под мобильные устройства
- Значительно снизилась масса HTML-кода
- Стало удобнее верстать сложные дизайн-макеты
