Полное руководство по Контейнерам в Elementor. Как использовать и перейти с секций

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

Нарушаю собственный режим тишины, затворничества и потихоньку возвращаюсь.

В этом руководстве мы смотрим как устроены контейнеры в конструкторе сайтов и страниц Elementor.

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

К тому же, рано или поздно Elementor удалит старую структуру секций, рядов и колонок, и на контейнеры перейти придётся.

Ну что ж, почитая старые традиции говорю: Поехали!

Контейнеры Elementor, видеоруководство

Что такое контейнеры

Что такое контейнеры в Flexbox

Для начала, давайте разберёмся что такое контейнеры в принципе, а потом уже пойдём в Elementor.

Есть такая вещь как каскадные таблицы стилей или CSS. А в CSS есть модуль Flexbox или на сленге — флексы. Флексбокс позволяет более гибко управлять элементами на странице с помощью простых свойств.

Флекс контейнер и то как он работает — это неотъемлемая часть флексов.

Философию Flexbox, свойства ему присущие и практику применения я разобрал в своём курсе «CSS Flexbox на каждый день». Поняв флексбоксы вы 100% поймёте как устроены сетки и макеты в Elementor и любых других конструкторах.

С программой и преимуществами курса вы можете ознакомиться по ссылке 👇🏻

Забирайте изучайте, а мы идём дальше.

Визуальное управление CSS Flexbox

Новички зачастую не понимают, что Elementor не какая-то машина по производству сайтов, а лишь надстройка на WordPress с помощью которой мы можем создавать дизайн визуально и либо совсем без кода, либо почти без кода.

Так вот, контейнеры в Элементор — это ни что иное, как визуальное представление CSS Flexbox. Где мы с помощью специальных опций задаём настройки поведения самого контейнера и его содержимого.

Как начать использовать контейнеры

Во-первых включить контейнеры в настройках

Для этого идём в Elementor > Настройки > вкладка Функционал. Флекс-контейнер выбираем Активен и сохраняем настройки.

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

И тут резонный вопрос: а как перейти на контейнеры? Для этого есть конвертация.

Конвертация из секций в контейнеры

Откройте в Elementor собранную страницу или шаблон. Есть 2 способа перевести секции в контейнеры:

Индивидуально каждую секцию

Выбрать секцию. На вкладке Настройки появится кнопка Преобразовать. Нажмите её и Elementor сконвертирует секцию в контейнер создав её копию;

Все секции в документе

Перейти в настройки страницы (иконка шестерёнки):

• В старом редакторе левый нижний угол панели редактора
• В новом редакторе в верхней панели

и нажать кнопку преобразовать.

Elementor создаст копии всех секций сделав из них контейнеры.

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

Обзор настроек контейнера

Контейнер — это родительский блок внутри которого размещаются элементы.

Макет контейнера

Как будет вести себя контейнер, как Flex или как Grid. В этом уроке мы выбираем Flex, а по Grid поговорим в другом.

Размеры макета

Здесь, как и в секциях всё по-прежнему:

• Ширина макета
  • Ограниченная — содержимое выстраивается по ширине заданной в контейнере или глобальных настройках;
  • Во всю ширину говорит само за себя. Содержимое контейнера располагается по ширине экрана и ограничивается только ей;
• Ширина — ползунком или числовым значением устанавливается максимальная ширина, которой ограничивается содержимое;
• Высота — отличается от того, что было в секциях и отвечает собственно за высоту контейнера. За счёт разных величин можно достигать разных результатов.

Имейте в виду, что это не ширина контейнера в целом, а ширина контента внутри. Дело в том, что контейнер состоит из двух частей:

1. Внешняя обёртка — растягивается во всю ширину независимо от заданной;
2. Внутренняя обёртка — вот её ширину мы как раз и выбираем. Именно она ограничивает ширину контента.

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

Направление

Это аналог свойства флекс-контейнера flex-direction.

Управляет расположением дочерних элементов:

1. По горизонтали или в ряд. Значение свойства row
2. По вертикали или как колонка. Значение свойства column
3. По горизонтали в обратном порядке. Значение свойства row-reverse
4. По вертикали в обратном порядке. Значение свойства column-reverse

Распределение содержимого

Это аналог свойства флекс-контейнера justify-content. Оно отвечает за выравнивание дочерних элементов относительно основной оси контейнера. Всю философию осей я здесь объяснять не буду, отсылаю вас к своему курсу по флексам.

Однако, какие есть варианты выравнивания и как они работают разберём.

1. Начало или значение свойства контейнера flex-start. Элементы выстраиваются в начале контейнера: слева или вверху;
2. Центр или значение свойства контейнера center. Элементы выстраиваются по центру;
3. Конец или значение свойства контейнера flex-end. Элементы выстраиваются в конце контейнера: справа или внизу;
4. Расстояние между или значение свойства контейнера space-between. Элементы равномерно распределяются по контейнеру. Первый и последний элемент прижимаются к его краям;
5. Расстояние около или значение свойства контейнера space-around. Элементы равномерно распределяются по контейнеру. Расстояние перед первым и после последнего элементов равно половине расстояния между всеми элементами;
6. Равное расстояние или значение свойства контейнера space-evenly. Одинаковое расстояние между элементами, а также в начале и конце.

Философия осей на пальцах

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

• Ряд — то начало будет слева
• Отражённый ряд — начало справа
• Колонка — начало сверху
• Отражённая колонка — начало, как бы это не звучало парадоксально, в конце

Переключаясь между настройками направления мы видим как иконки распределения содержимого и выравнивания меняют своё расположение. Это и есть краеугольный камень флексов если вы это поймёте вы поймёте как устроен Flexbox ну и как устроены контейнеры в Elementor.

Таким образом, если в Направлении выбран Ряд, то распределение содержимого работает по горизонтали. Если же выбрана Колонка — по вертикали.

Подробно о философии Flexbox я рассказывал в курсе. Забирайте 👇🏻

Выравнивание элементов

Это аналог свойства флекс-контейнера align-items. Оно отвечает за выравнивание дочерних элементов по второстепенной оси.

Если выбрать направление Ряд, то основной осью будет горизонталь, а второстепенной — вертикаль.

Если же выбрать направление Колонка, то уже наоборот основной осью станет вертикаль, а второстепенной — горизонталь.

Доступны следующие варианты выравнивания:

1. Начало или на языке флексов flex-start. Элементы выстраиваются в начале контейнера: слева или вверху;
2. Центр или значение свойства center. Элементы выстраиваются по центру;
3. Конец или значение свойства flex-end. Элементы выстраиваются в конце контейнера: справа или внизу;
4. Растянуть или на языке флексов stretch. Значение по умолчанию. Элементы заполняют весь контейнер по второстепенной оси.

Отступ между элементами

Это аналог универсального свойства флекс-контейнера gap. Отвечает за… что бы вы думали: отступы между элементами.

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

Но если выбрать произвольное значение (иконка карандаша), то можно ввести размеры в формате: 40px 30px. Где первое значение будет отступом по вертикали (между рядами), а второе — по горизонтали (между колонками).

Перенос рядов

Отвечает за то, будут ли элементы, которые не помещаются, переносится на следующие ряды.

По умолчанию все элементы будут пытаться уместиться в 1 ряд сжимаясь на сколько это возможно. Однако, если выбрать значение Переносить, то всё, что не помещается будет переноситься на следующие ряды.

Выравнивание содержимого

Эта опция появляется только если в предыдущей выбрано Переносить, так как она является аналогом свойства флекс-контейнера align-content. Оно выравнивает ряды флекс контейнера внутри, когда на второстепенной оси есть дополнительное пространство.

Свойство будет работать только когда свойство контейнера flex-wrap: wrap, а значит элементы располагаются в несколько рядов. В нашем случае, когда установлена настройка Переносить.

Варианты расположения такие же как у опции распределение содержимого, поэтому просто перечислю их без подробностей:

• Центр;
• Начало;
• Конец;
• Расстояние между — элементы равномерно распределяются по контейнеру;
• Расстояние около — в начале и конце отступы 50% от тех, что между элементами;
• Равное расстояние — равные отступы в начале, конце и между элементами.

Обзор настроек элемента

Если контейнер это родитель, то всё, что внутри него является элементами по отношению к нему.

У элементов во Flexbox есть свои свойства. В Elementor эти свойства вынесены во вкладку Расширенные.

Ширина

Отвечает за ширину элемента. Чаще всего вы будете оставлять по умолчанию или использовать Во всю ширину 100% и Произвольно. Лучше всего смотрите видеоруководство. Там я показал примеры использования ширины.

Индивидуальное выравнивание

Это аналог свойства флекс-элемента align-self — переопределяет выравнивание относительно второстепенной оси.

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

Доступны варианты:

• Начало;
• Центр
• Конец;
• Растянуть — элемент растянется на весь размер второстепенной оси.

Порядок

Это аналог свойства флекс-элемента order. Отвечает за управление порядком отображения элемента.

По умолчанию flex-элементы располагаются в исходном порядке, как они прописаны в HTML или в нашем случае добавлены в виде виджетов. Однако свойство order управляет порядком, в котором они появляются в flex-контейнере.

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

Если говорить на языке Elementor, то у нас есть значения:

• Начало;
• Конец;
• Произвольный.

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

Размер

Блок размер соответствует свойствам flex-grow и flex-srink. Первый отвечает за коэффициент увеличения, а второй — сжатия.

Увеличение

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

Чтобы увидеть эффект, всем элементам нужно задать Увеличение или его произвольное значение = 1. Для элемента же, который нужно увеличить, нужно задать коэффициент увеличения.

Так, если есть 2 кнопки и:

• Одной задать Увеличение;
• Второй — Увеличение = 2

то вторая кнопка увеличится вдвое по отношению к первой.

Сжатие

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

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

Если задать одному элементу Сжатие = 3, то он сожмётся сильнее остальных в 3 раза. Если же задать Сжатие = 0, то элемент не будет сжиматься вовсе.

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

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

Параметры Контейнера в глобальных настройках

Находятся в глобальных настройках:

• В старой панели иконка бургер в левом верхнем углу;
• В новой — иконка с ползунками настроек в левой верхней части панели.

далее раздел Макет.

Ширина макета

Глобальная ширина, которая будет ограничивать ширину контента контейнера. По умолчанию выставлена 1140px как некий золотой стандарт веба. Если изменить, то измениться ширина содержимого всех контейнеров, в которых она не задана индивидуально.

Внутренний отступ контейнера

По умолчанию установлен на 10px и по мне так эта настройка ни туда, ни сюда. Для колонок этот отступ полезен, а вот для контейнера который нужен как обертка для виджетов где-нибудь внутри колонки — нет.

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

На проектах, которые делаю выставляю 0 по кругу, а потом где нужно задаю вручную.

Отступ между элементами по-умолчанию

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

Преимущества и недостатки контейнеров в Элементор

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

Разумеется лучше посмотреть видео. Я там это наглядно показываю на примерах.

Преимущества контейнеров

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

Недостатки реализации контейнеров в Elementor

• Чтобы создать вложенную структуру с нуля, нужно сделать слишком много действий. Придётся добавить контейнеры много раз и задать им нужные параметры, чтобы получилось то, что нужно
  • Если бы Elementor сделали возможность вставить контейнер из палитры контейнеров и выбрать предустановленный макет, как в родительском контейнере, то было бы удобнее
• Нелогично и трудно догадаться, что для того, чтобы выставить нужную ширину внутреннего контейнера-элемента, необходимо установить Во всю ширину
• Как только контейнер стал родительским, внутренним ему уже не стать. Если я хочу поместить родительский контейнер внутрь другого — у меня не получится
• В готовых макетах у разработчиков хватило ума сделать 2 и 4 колонки, но 3 — нет. Его постоянно не хватает и приходится доделывать руками
• 3 колонки по 33,33% помещаются в 1 ряд, а 3 виджета по столько же — нет.

Практика сборки макетов

В видео я показал несколько примеров сборки макета:

• Двухъярусная шапка
• Подвал в несколько колонок
  • 4 меню в ряд
  • 3 меню и 1 контейнер с логотипом и соцсетями
• Страница/запись с сайдбаром
• Две колонки и во вторую кнопка с ссылкой
• Блок с иконкой в несколько рядов

Выводы и резюме

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

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

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

Ставьте ⭐️⭐️⭐️⭐️⭐️, делитесь статьёй в соцсетях и пишите комментарии.

Новый материал через неделю, поэтому не прощаемся. Хорошего дня!

С уважением, Цифровой Алекс