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

Новые статьи

22 мая, 2021

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

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

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

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

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

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

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

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

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

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

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

Внешние отступы по 100px вверху и внизу. Отступы слева и справа неактивны.

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

Кнопка «Связать значения»

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

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

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

Отступы для ПК
Отступы для планшета
Отступы для смартфона

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

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

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

z-index.

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

Изображение с сайта puzzleweb.ru

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

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

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

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

CSS ID.

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

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

CSS классы.

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

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

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

Оставьте комментарий

Напишите нам!

Мы постараемся ответить Вам в ближайшее время!