Как добавить новую секцию и настроить её в Elementor: работа с фоном, отступами и шириной
Содержание
Elementor — один из самых популярных конструкторов страниц для WordPress, и его главная сила заключается в гибкой работе с секциями (Sections). Секция — это базовый строительный блок любой страницы, который содержит колонки и виджеты. В этой статье мы подробно разберём, как добавить новую секцию и настроить все ключевые параметры: фон, отступы и ширину.
1. Как добавить новую секцию в Elementor
Шаг 1: Открытие редактора
Зайдите в админ-панель WordPress, откройте нужную страницу или запись и нажмите кнопку «Edit with Elementor».Шаг 2: Добавление секции
В интерфейсе редактора найдите и нажмите на синюю кнопку с иконкой «+» (Add New Section). Она обычно расположена в рабочей области страницы.Шаг 3: Выбор структуры колонок
После нажатия откроется окно выбора структуры колонок. Вы можете выбрать:- Одну колонку
- Две колонки (например, 50/50)
- Три колонки
- И другие варианты
2. Доступ к настройкам секции
Чтобы начать настраивать секцию, наведите курсор на её верхнюю часть и нажмите на иконку с шестью точками (ручка секции). После этого в левой панели откроются все настройки секции, разделённые на три вкладки:- Layout (Макет) — ширина, высота, выравнивание
- Style (Стиль) — фон, границы, тени
- Advanced (Дополнительно) — отступы (margin/padding), z-index, CSS-классы
3. Настройка ширины секции (вкладка Layout)
Вкладка Layout отвечает за основные параметры макета секции.Content Width (Ширина содержимого)
Здесь доступны два варианта:- Boxed — содержимое секции имеет фиксированную максимальную ширину. При выборе этого варианта появляется ползунок Width, с помощью которого можно задать точную ширину в пикселях (например, 1200 px).
- Full Width — содержимое секции растягивается на всю доступную ширину экрана.
Stretch Section (Растянуть секцию)
Эта опция позволяет принудительно растянуть секцию на полную ширину страницы, независимо от настроек темы. Обычно используется в сочетании с Full Width.Columns Gap (Расстояние между колонками)
Регулирует промежуток между колонками внутри секции. Можно выбрать одно из предустановленных значений или задать своё.Height (Высота секции)
Доступны следующие варианты:- Default — высота определяется содержимым
- Fit to Screen — секция занимает всю высоту экрана (100vh)
- Min Height — задаётся минимальная высота с помощью ползунка
Vertical Align (Вертикальное выравнивание)
Определяет, как содержимое секции выравнивается по вертикали: сверху, по центру или снизу.Horizontal Align (Горизонтальное выравнивание)
Доступно при выборе Boxed — позволяет выровнять содержимое по центру, влево или вправо.4. Настройка фона секции (вкладка Style)
Вкладка Style содержит все визуальные настройки секции, включая фон.Background Type (Тип фона)
Нажмите на выпадающий список в разделе Background и выберите один из вариантов:Classic (Классический)
Позволяет задать:- Цвет — сплошная заливка. Используйте палитру или введите код HEX, RGB или HSL.
- Изображение — загрузите изображение из медиатеки.
Gradient (Градиент)
Создаёт плавный переход между двумя и более цветами. Можно настроить:- Цвета и их положение (по умолчанию первый цвет на 0%, второй на 100%)
- Тип градиента: линейный (Linear) или радиальный (Radial)
Video (Видео)
Позволяет использовать видео в качестве фона секции (доступно для секций, не для колонок и виджетов).Slideshow (Слайд-шоу)
Фон автоматически переключается между несколькими изображениями.Настройки фонового изображения
При выборе изображения появляются дополнительные параметры:- Position — позиционирование изображения (например, центр, верхний левый угол)
- Repeat — повторение изображения, если оно меньше секции
- Size — размер:
- Auto — исходный размер
- Cover — заполняет всю секцию (обрезает при необходимости)
- Contain — вписывает изображение целиком
- Custom — задаётся вручную
- Attachment — поведение при скролле:
- Fixed — изображение остаётся неподвижным
- Scroll — прокручивается вместе со страницей
Background Overlay (Наложение)
Позволяет добавить полупрозрачный слой поверх фонового изображения или видео. Это улучшает читаемость текста и создаёт интересные визуальные эффекты. Настройки наложения аналогичны основному фону: можно выбрать цвет, градиент или изображение.Дополнительные стили
В этой же вкладке доступны:- Border — рамка секции (тип, толщина, цвет, скругление углов)
- Box Shadow — тень
- Shape Divider — фигурный разделитель между секциями
5. Настройка отступов (вкладка Advanced)
Отступы в Elementor делятся на два типа:Margin (Внешние отступы)
Margin — это пространство снаружи элемента. Он отталкивает соседние элементы и создаёт расстояние между секциями. Пример использования: чтобы создать расстояние между двумя секциями, задайте нижний margin (например, 50px) для верхней секции или верхний margin для нижней.Padding (Внутренние отступы)
Padding — это пространство внутри элемента, между его границей и содержимым. Он позволяет создать «воздух» вокруг виджетов внутри секции. Пример использования: чтобы текст внутри секции не прилегал вплотную к краям, добавьте padding со всех сторон (например, по 40px).Как настроить отступы:
- Перейдите на вкладку Advanced → раздел Spacing
- Вы увидите два блока: Margin и Padding
- По умолчанию включена цепочка (lock icon) — все четыре стороны имеют одинаковое значение.
- Чтобы задать разные значения для каждой стороны, нажмите на иконку цепочки, чтобы разблокировать её.
- Введите значения в поля: Top, Right, Bottom, Left (порядок сверху-вниз-слева-направо, или TRouBLe для запоминания).
- Единицы измерения: px, em, %, rem.
6. Дополнительные настройки (вкладка Advanced)
Помимо отступов, вкладка Advanced содержит:- Z-index — определяет порядок наложения секций друг на друга
- CSS ID — уникальный идентификатор для кастомной стилизации
- CSS Classes — классы для кастомной стилизации
- Motion Effects (для Pro) — эффекты при скролле, липкие секции
7. Практические советы
Совет 1: Полноширинная секция с ограниченным содержимым
Хотите, чтобы фон секции был на всю ширину экрана, а текст и кнопки — в центре с ограниченной шириной?- Включите Stretch Section
- Установите Content Width = Boxed
- Задайте Width = 1200px (или другое значение)
- Установите Horizontal Align = Center
Совет 2: Секция на всю высоту экрана
Для создания hero-блока:- Установите Height = Fit to Screen
- Добавьте фоновое изображение с Size = Cover
- Добавьте Overlay для улучшения читаемости текста
Совет 3: Правильное использование отступов
- Используйте padding для создания пространства внутри секции (между границей и контентом)
- Используйте margin для создания пространства между секциями
- Для мобильных устройств проверяйте отступы в режиме предпросмотра
