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

Контейнер — это основной элемент, который содержит все остальные элементы страницы. Контейнер может содержать одну или несколько секций.

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

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

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

Как вы уже заметили из предыдущих уроков, все виджеты добавляются в контейнеры. Чтобы создать нашу структуру сайта, нужно перетащить виджет контейнера в контейнер или нажать на плюсик: «Добавить новый контейнер».

Давайте по порядку. Нажимая на плюсик, выбираем макет Flexbox. Здесь можно выбрать структуру сайта: в колонку, в ряд или другие. Потом можно будет поменять расположение. Давайте выберем горизонтальное.

Чтобы было нагляднее, давайте отступ снаружи, cверху, сделаем 80 пикселей. Даже 100. Это чтобы не «прилипало» к предыдущему.

Также для наглядности предлагаю добавить в контейнер четыре заголовка. Поменяем в них текст и фон. Например: «Заголовок 1». Сделаем поменьше типографику: хватит 30. Добавим отступы внутри: желательно поменьше, по 10. Поменяем фон. Вкладки «Расширенные» — «Фон» — нажимаем «Классика». И давайте возьмём какой-нибудь красный. И продублируем три раза.

Здесь поменяем название. Затем так же: «Расширенные» — «Фон» — «Классика». Возьмём, к примеру, жёлтый.

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

А теперь посмотрим на сам контейнер. Макет контейнера выбирается Flexbox. Ширина макета ограниченная. Либо можно сделать на всю ширину сайта. Давайте посмотрим, как это будет выглядеть на рабочем: она растягивается по ширине экрана. Мы сделаем ограниченную. Так аккуратнее и красивее. Далее выбирается ширина самого контейнера внутри. Мы сделаем по умолчанию. Также задаётся минимальная высота. Давайте увеличим для наглядности.

Далее у нас идёт направление главной оси: горизонтальное, вертикальное, горизонтальное реверсивное (элементы располагаются справа налево) и вертикальное реверсивное (элементы располагаются снизу вверх).

Вернёмся к нашему обычному. Далее у нас идёт распределение содержимого по главной оси — так, как будут наши элементы располагаться в контейнере. По умолчанию стоит «Начало». Можно поставить по центру, в конец, «Расстояние между» (крайние элементы «прилипают» к краям контейнера, при этом между ними одинаковое расстояние), «Расстояние около» (это примерно половина от края элемента, а здесь — одинаковое расстояние), «Равное расстояние» (оно одинаково от краёв и между элементами).

Давайте вернёмся в начало. Если поменять направление на вертикальное, то и в этих настройках расположение станет другим: «Начало», «По центру», «Конец», «Расстояние между», «Расстояние около» (половина здесь и одинаковое расстояние) или «Равное расстояние» (везде одинаково).

Вернёмся.

Теперь выровнять элементы. Т. е., раньше мы делали по горизонтали, сейчас выравнивается по вертикали: «Начало», по центру нашего блока, «Конец» и «Растянуть» (как оно и было по умолчанию). Давайте сделаем «Начало».

Далее у нас идёт расстояние между элементами. Давайте зададим побольше для наглядности. 50, например. Можно связать значение, а можно развязать.

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

Чтобы перейти, нужно нажать Wrap. Теперь элементы переносятся и приобретают заданные нами ранее размеры.

Также после того, как мы нажали «Перенос», появляется новая настройка — «Выровнять содержимое». Это можно сделать по центру (это как здесь), «Начало», «Конец» и т. д.

Также в контейнер можно добавить ещё контейнер. Давайте выберем структуру. Добавим контейнер. И ещё контейнер… И ещё… И так до бесконечности.

Ранее я вам говорил, что в настройках сайта в макете внутренний отступ контейнера желательно обнулить, но для наглядности добавим 10 пикселей. Обновим. Вернёмся в редактор. Вот они — три вложенных контейнера.

Удобнее всего с контейнерами работать в навигаторе.

Основной контейнер подсвечивается розовым. Вложенные — сереньким.

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

Также в навигаторе удобно менять местами контейнеры. Например, давайте поставим наверх. Вот он, наш контейнер. Или, допустим, куда-нибудь в середину поставим. Вот. Вернёмся назад.

Также для личного удобства можно переименовать контейнер. Например, давайте этот назовём: «Заголовки».

Давайте посмотрим на нашем примере. Можно назвать его: «Главное», «О нас». Этот можно назвать «Преимущества», «Наша продукция» и т. д. Но это для личного удобства.

Давайте ещё возьмём для примера этот контейнер. Создадим контейнер, сделаем его вертикальным. Во внутренний контейнер сюда добавим, например, заголовок и кнопку. Этот контейнер сделаем горизонтальным. В нём сделаем «Расстояние между», чтобы кнопка и заголовок были так, как здесь.

Теперь добавим ещё один контейнер. Вниз. И добавим эти контейнеры с картинкой и текстом и текстовый. У этого сделаем горизонтальную раскладку — и добавляем. Дублируем два раза и стилизуем вот этот контейнер. Добавим цвет и границу: скругление углов — 15 пикселей.

Так как у нас эти контейнеры одинаковые, можно нажать правой кнопкой «Копировать» и «Вставить стиль». И сюда: «Вставить стиль».

Давайте теперь возьмём блок с изображением и стилизуем. Добавим изображение. Предлагаю взять нашу любимую. Удалим текст. Добавим фамилию и имя. Например, это скопируем. Стилизуем: позиция изображения — слева, вертикальное выравнивание — посередине, скругление углов — 100%. А у текста заголовка поменяем размер: сделаем 30.

Теперь добавим текстовый редактор и поменяем текст. Возьмём, к примеру, этот. Заменяем. И теперь надо добавить отступы, как здесь. Тут по 30 пикселей с краёв и сверху. Чтобы не высчитывать эти пиксели, для этого и рекомендуется в макете их обнулять. Предлагаю так и сделать. «Обновить». Вернёмся в редактор.

И теперь просто в нашем контейнере мы добавляем отступы — 30 пикселей. Также можно скопировать и вставить стиль либо, например, продублировать контейнер уже со встроенными стилями. Осталось только поменять здесь содержимое.

У нас получилось примерно так, как здесь. Вот основной контейнер, в нем вложенный и ещё один вложенный. Основной — розовый. В нём — вложенный контейнер для заголовка и кнопки. Можно сделать выравнивание по центру. И вложенный контейнер с тремя вложенными.

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

На сегодня у меня всё. Увидимся на следующем уроке. Пока.