Вкладка Расширенные. Общие настройки виджетов Elementor.

Рассмотрим свойства данный блок объединяет очень важные расширенные настройки отображения виджетов:

• расширенные;
• эффекты движения;
• адаптивность;
• атрибуты;
• пользовательские css

Расширенные.

Данный раздел отвечает за внутренние (padding) и внешние (margin) отступы виджета, за положение виджета по оси Z (z-index), а также позволяет присвоить уникальный идентификатор (id) и класс (class).

Список всех настроек ниже:

• отступ снаружи;
• отступ внутри;
• z-index;
• css ID;
• css класс.

Отcтуп снаружи.

Отступы (в css – margin) снаружи виджета. Регулирует расстояние, на которое один виджет отделенот другого.

Отступ указывается как в абсолютных (px), так и в относительных (em, %, rem) единицах измерения.

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

Справа от настроек отступов есть по умолчанию активный значок “Связать значения”. При его активации при вводе отступа в любом поле значение будет автоматически применено ко всем полям. Если Вы хотите указать разные отступы для верха и низа, нужно деактивировать данный переключатель.

Наличие значка устройства (desktop, tablet, mobile) указывает на то, что для устройств с разным размером экрана можно назначать свои отступы, которые будут меняться при просмотре с ПК, планшета или смартфона.

Рассмотрим это на примере.

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

Отступ внутри.

Устанавливает внутренние отступы (padding) между содержимым виджета и ее границами.

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

z-index.

Свойство z-index отвечает за положение виджета относительно оси-Z.

Чем больше значение z-index, тем выше расположен элемент по оси z. При использовании плагина Elementor для WopdPress данную настройку обычно используют для создания прилипающего верхнего меню.

Видео с примером работы данного свойства смотрите ниже.

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

Для свойства z-index так же, как и для отступов, возможно установить различные значения для устройств с разным размером экрана.

CSS ID.

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

Помните важное правило – уникальный ID должен быть один на странице. Не присваивайте разным секциям один и тот же идентификатор.

CSS классы.

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

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

Для классов (class) и идентификаторов (id) существует дополнительная настройка в виде динамических тегов, которые мы рассмотрим более подробно в отдельной статье.