22 мая, 2021

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

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

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

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

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

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

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

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

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

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

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

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

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

sekcziya. rasshirennye.vneshnij otstup.svyazat znacheniya
Кнопка «Связать значения»

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

sekcziya. rasshirennye.vneshnij otstup.adaptiv

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

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

sekcziya. rasshirennye.vneshnij otstup.adaptiv.pc
Отступы для ПК
sekcziya. rasshirennye.vneshnij otstup.adaptiv.tablet
Отступы для планшета
sekcziya. rasshirennye.vneshnij otstup.adaptiv.mobile
Отступы для смартфона

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

sekcziya. rasshirennye.vnutrennij otstup02

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

sekcziya. rasshirennye.vnutrennij otstup 1

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

z-index.

sekcziya. rasshirennye.z

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

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

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

sekcziya. rasshirennye.z index

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

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

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

CSS ID.

sekcziya. rasshirennye.id

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

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

CSS классы.

sekcziya. rasshirennye.class

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

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

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

0

Интересные статьи

Секция. Вкладка Макет.

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

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

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

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.