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

Пользовательские CSS.

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

Написание своих стилей в Elementor имеет некоторую особенность — необходимо использовать специальный внутренний селектор элементора для родительского элемента, который так и называется — selector.

Например, чтобы покрасить фон секции, нужно прописать следующее свойство:

selector{
    background-color: yellow;
} 

Результат на изображении ниже.

Если назначить для секции свой собственный класс или id (Вкладка «Расширенные» -> поля «CSS ID» и «CSS классы»), то «selector» использовать необязательно. Достаточно в стилях прописать присвоенный класс или ID. Пример ниже.

Присвоим название класса для секции.

Далее зайдем во вкладку «Пользовательские CSS» и пропишем для присвоенного класса css-свойства.

Мы изменили фон секции кодом лишь для примера, так как фон можно изменить через стандартные настройки Elementor на вкладке «Стиль».

При использовании selector (отдельно или с дочерними селекторами) стили применятся только к элементу, которому вы присвоили selector. При использовании других css-id и css-классов без использования selector, все свойства, применимые к этим классам и id применятся глобально для всех элементов на странице, которые будут иметь такие же классы и id.

Расширенное стилевое оформление поддерживают все виджеты Elementor.