Обзор вкладок настроек Elementor: Содержимое, Стиль, Дополнительно

Elementor — один из самых популярных конструкторов страниц для WordPress, и его сила во многом заключается в продуманной структуре настроек. Когда вы выбираете любой виджет, секцию или контейнер в редакторе Elementor, в левой панели открываются три основные вкладки: «Содержимое» (Content), «Стиль» (Style) и «Дополнительно» (Advanced). Каждая из них отвечает за свой аспект настройки элемента, и понимание их назначения — ключ к эффективной работе с конструктором. В этой статье мы детально разберём каждую вкладку, рассмотрим все доступные опции и дадим практические рекомендации по их использованию.

1. Вкладка «Содержимое» (Content)

Вкладка «Содержимое» — это первая и основная вкладка, которая открывается при выборе любого элемента. Она содержит настройки, непосредственно связанные с назначением и данными виджета.

Что настраивается во вкладке «Содержимое»

Набор опций здесь полностью зависит от типа выбранного виджета. Каждый виджет имеет свой уникальный набор параметров содержимого. Рассмотрим на примерах:

• Виджет «Заголовок» (Heading): здесь вы вводите сам текст заголовка, выбираете его размер (тег H1–H6) и при необходимости добавляете ссылку.
• Виджет «Изображение» (Image): здесь вы загружаете или выбираете изображение из медиатеки, задаёте его размер, выравнивание, подпись и ссылку.
• Виджет «Текст» (Text Editor): здесь находится визуальный редактор, в котором вы вводите и форматируете текстовое содержимое.
• Виджет «Кнопка» (Button): здесь вы задаёте текст кнопки, ссылку, значок и выбираете стиль кнопки.
• Виджет «Вкладки» (Tabs): здесь вы добавляете, удаляете и редактируете отдельные вкладки, задаёте их заголовки, иконки и содержимое.

Ключевые особенности

• Контент-ориентированность: все настройки в этой вкладке так или иначе связаны с тем, что будет отображаться на странице — текст, изображения, видео, ссылки и другие данные.
• Уникальность для каждого виджета: вкладка «Содержимое» у разных виджетов выглядит по-разному. Например, у виджета «Галерея» здесь будут настройки изображений, а у виджета «Форма» — настройки полей ввода.
• Структура и компоновка: помимо самих данных, здесь часто можно настроить базовую структуру — например, количество колонок в виджете «Вкладки» или ориентацию элементов.

Практический совет

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

2. Вкладка «Стиль» (Style)

Вкладка «Стиль» отвечает за визуальное оформление содержимого. Если вкладка «Содержимое» определяет, что отображается, то вкладка «Стиль» определяет, как это выглядит.

Что настраивается во вкладке «Стиль»

Набор опций здесь также зависит от виджета, но есть и общие для многих элементов параметры:

• Цвета: настройка цвета текста, фона, границ и других элементов. Можно задавать цвета как для обычного состояния, так и для состояния при наведении курсора (hover).
• Типографика: настройка шрифта, размера, жирности, стиля, высоты строки и межбуквенного интервала.
• Выравнивание текста: горизонтальное и вертикальное выравнивание содержимого внутри виджета.
• Тени: настройка тени текста и тени блока (box-shadow).
• Фон: настройка фона элемента — сплошной цвет, градиент или изображение.
• Границы и скругления: настройка типа, толщины, цвета границ и радиуса скругления углов.
• Размеры: ширина, высота и другие размерные параметры элемента.
• Отступы внутри элемента (padding): пространство между содержимым и границей элемента.

Примеры для разных виджетов

• Виджет «Заголовок»: вкладка «Стиль» позволяет настроить цвет текста, типографику и тень заголовка.
• Виджет «Изображение»: здесь можно настроить CSS-фильтры, прозрачность, обводку и тени для изображения.
• Виджет «Кнопка»: здесь настраиваются цвета и типографика текста кнопки, цвета и градиенты фона, тени, скругления углов, а также отдельные стили для состояния при наведении.

Адаптивный дизайн

Важная особенность вкладки «Стиль» — возможность настраивать параметры отдельно для разных устройств (десктоп, планшет, мобильный телефон). Рядом с некоторыми настройками вы увидите иконку видоискателя (viewport) — это означает, что значение можно задать индивидуально для каждого типа устройств.

Практический совет

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

3. Вкладка «Дополнительно» (Advanced)

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

3.1. Раздел «Макет» (Layout)

Этот раздел отвечает за расположение элемента внутри контейнера:

• Margin (Внешние отступы): управляет пространством снаружи виджета — между этим элементом и соседними. Можно задавать значения в px, em, rem или %. Положительные значения увеличивают пространство, отрицательные — уменьшают.
• Padding (Внутренние отступы): управляет пространством внутри виджета — между границей элемента и его содержимым.
• Width (Ширина): позволяет выбрать ширину виджета — полная ширина (100%), автоматическая (inline) или пользовательская с указанием конкретного значения.
• Align Self (Выравнивание): выравнивает элемент внутри flex-контейнера. Доступны варианты: start, center, end, baseline, stretch.
• Order (Порядок): задаёт порядок элемента внутри flex-контейнера. Меньшие значения отображаются раньше.
• Position (Позиционирование): позволяет выбрать абсолютное или фиксированное позиционирование. При выборе Absolute или Fixed появляются дополнительные настройки для точного указания координат по осям X и Y.
• Z-Index: определяет порядок наложения элементов. Элемент с большим значением Z-Index будет отображаться поверх элементов с меньшим значением.

3.2. Раздел «CSS» (CSS)

Здесь вы можете задать пользовательские идентификаторы и классы для дальнейшей стилизации через CSS:

• CSS ID: назначает элементу уникальный идентификатор. Позволяет обращаться к элементу в пользовательских CSS-правилах или создавать якорные ссылки для навигации по странице.
• CSS Classes: назначает элементу один или несколько CSS-классов. Можно добавить несколько классов через пробел.

3.3. Раздел «Анимация» (Animation)

Настройки анимации делают страницу более динамичной и интерактивной:

• Entrance Animation (Анимация появления): добавляет эффект анимации при появлении виджета в области видимости пользователя. Доступны различные эффекты: fade in, zoom in, bounce, flip и другие.
• Scrolling Effects (Эффекты при прокрутке, Pro): позволяет настроить различные эффекты и взаимодействия, которые происходят при прокрутке страницы пользователем.
• Mouse Effects (Эффекты мыши): добавляет эффекты, основанные на движении мыши — например, наклон (tilt) или отслеживание (track).
• Sticky (Липкий элемент, Pro): делает виджет «липким» при прокрутке. Полезно для создания шапок, подвалов или боковых панелей, которые остаются видимыми.

3.4. Раздел «Трансформация» (Transform)

Позволяет трансформировать элемент различными способами:

• Rotate (Поворот): вращает элемент вокруг своего центра. Положительные значения вращают по часовой стрелке, отрицательные — против.
• Offset (Смещение): сдвигает элемент относительно его нормального положения по горизонтали и вертикали.
• Scale (Масштабирование): изменяет размер элемента. Значение 1 соответствует нормальному размеру.
• Skew (Наклон): наклоняет элемент по горизонтальной и вертикальной осям.
• Flip Horizontal / Vertical (Отражение): зеркально отражает элемент по горизонтали или вертикали.

3.5. Раздел «Фон» (Background)

• Background Type: выбор типа фона — классический (сплошной цвет) или градиент.
• Настройки для обычного состояния и состояния при наведении (hover).

3.6. Раздел «Граница и тень» (Border & Shadow)

• Border Type: выбор стиля границы: сплошная, двойная, пунктирная, штрихпунктирная и другие.
• Border Radius: скругление углов. Чем больше значение, тем более округлыми становятся углы.
• Box Shadow: добавление тени к элементу с настройкой цвета, размытия, распространения и положения тени.

3.7. Раздел «Маска» (Mask)

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

3.8. Раздел «Пользовательский CSS» (Custom CSS, Pro)

Если у вас установлена версия Elementor Pro, в этой вкладке появляется поле для ввода пользовательского CSS-кода, который будет применяться именно к этому элементу.

3.9. Раздел «Условия отображения» (Display Conditions)

Позволяет контролировать видимость элемента на основе различных параметров — например, показывать элемент только определённым пользователям или на определённых страницах.

Практический совет

Вкладка «Дополнительно» — мощный инструмент, но используйте её осознанно. Начинайте с настройки Margin и Padding для создания правильных отступов между элементами. Анимации и эффекты добавляйте дозированно, чтобы не перегружать страницу и не ухудшать пользовательский опыт.

Заключение

Три вкладки настроек Elementor образуют стройную и логичную систему:

Вкладка	Назначение	Что настраиваем
Содержимое	Данные и наполнение	Текст, изображения, ссылки, контент
Стиль	Визуальное оформление	Цвета, шрифты, тени, фон, границы
Дополнительно	Позиционирование и поведение	Отступы, анимации, CSS, эффекты

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