20 мая, 2021

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

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

Это изображение имеет пустой атрибут alt; его имя файла - sekcziya.-rasshirennye.adaptivnost.polzovatelskie-css.png

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

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

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

selector{
background-color: yellow;
}

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

Это изображение имеет пустой атрибут alt; его имя файла - sekcziya.-rasshirennye.adaptivnost.polzovatelskie-css.-stili-1024x269.png

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

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

polzovatelskie stili 001

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

polzovatelskie stili 002

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

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

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

0

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

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

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

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

Пользовательские CSS в Elementor. Вкладка Расширенные. Общие настройки виджетов 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.