Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Elementor 3.6 — Flexbox контейнеры

Обновлено: 13.05.2022
2 комментариев

Elementor 3.6 знаменует собой первый шаг в серии обновлений инфраструктуры, которые изменят способ создания веб-сайтов, начиная с контейнеров Flexbox. Использование этой функции позволит вам создавать точные, отзывчивые и компактные дизайны с точностью до пикселя.

Используйте все возможности CSS Flexbox для создания сверхгибких и отзывчивых макетов для создания ваших самых продвинутых дизайнов.

Напрягите свои творческие мускулы с помощью Flexbox - нового блока Elementor, который позволяет вам эффективно раскладывать, выравнивать и распределять элементы в контейнере сверхлегким и гибким способом.

Контейнеры Flexbox

В Elementor 3.6 мы представляем контейнеры Flexbox, новую структуру компоновки, которая переносит CSS Flexbox в редактор. Такая структура позволяет быстро создавать адаптивный дизайн с идеальной точностью до пикселей и высокоразвитые макеты с гораздо более тонкой разметкой, что значительно повышает производительность. Эта функция знаменует собой кардинальный сдвиг в том, как веб-сайты создаются с помощью конструктора Elementor, и является основой множества дополнительных, расширенных возможностей.

Контейнеры Flexbox - это новый строительный блок в Elementor, который позволяет вам эффективно размещать, выравнивать и распределять элементы в контейнере легким и гибким способом. С помощью контейнеров Flexbox вы можете размещать виджеты непосредственно внутри контейнера, а также бесконечно размещать контейнеры. Затем вы можете управлять расположением и распределением виджетов в контейнере и настраивать свой контент в соответствии с любым размером экрана, что приводит к большей отзывчивости, без ущерба для скорости и без написания ни одной строки кода.

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

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

В чем разница между контейнерами и секциями?

Когда вы активируете эксперимент с Контейнером, вы сможете добавлять Контейнеры на свою страницу, а также перетаскивать Контейнеры на Холст или в другой Контейнер с помощью виджета из Панели Редактора. Вы также заметите, что границы Контейнера имеют более темный оттенок синего, чем границы Секции. 

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

Свобода в размещении ваших Макетов и Позиций

Перетащите ваши виджеты в контейнер и расположите их так, как вы хотите. Еще никогда в Elementor не было так просто размещать виджеты в вашем макете.

1. Создайте любой макет за считанные минуты

2. Разместите элементы в столбце или строке

3. Оберните предметы, чтобы они удобно помещались на любом устройстве

4. Определите расстояние между элементами

5. Выровняйте и выровняйте их, чтобы они выглядели правильно.

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

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

Сделайте так, чтобы ваш сайт выглядел Отлично на любом устройстве

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

Используйте разные точки остановки (брикпоинты), чтобы определить, как элементы увеличиваются и уменьшаются, настраивайте направление, распределение или порядок, чтобы они соответствовали любому размеру экрана, не дублируя содержимое.

Больше производительности, меньше кода

Легкий, компактный и чистые контейнеры Flexbox имеют меньше элементов-оболочек, которые генерируют меньше кода, поэтому ваш сайт загружается и работает намного быстрее.

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

2 комментариев

  • На сколько быстрее загружаются сайты сделанные на контейнерах, есть тесты?

    • A

      Где то были тесты, но они не только для флекс, а в сумме со всеми экспериментами. Сами контейнеры дают не большой прирост скорости, но дают более правильную адаптивность блоков.

Оставьте свой комментарий