Пользовательский CSS в конструкторе сайтов

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

Добавление пользовательских CSS к элементам

1. Нажмите кнопку свойств на необходимом элементе (виджет, колонка, секция), чтобы отобразить свойства в панели свойств слева.

2. Перейдите на вкладку Расширенные, далее в группу свойств Пользовательские CSS

3. Добавьте ваш CSS код в поле редактора CSS

4. Для примера добавим следующий код, который добавить красный фон для выбранного элемента.

selector {background-color:red;}

элемент мгновенно применит указанные стили.

Обратите внимание на встроенный специальный селектор selector перед стилями, который внедрен специально чтобы указать на необходимость применения свойств к текущему элементу.

Используйте «selector» для указания родительского элемента. Примеры:
selector {color: red;} // Для основного элемента
selector .child-element {margin: 10px;} // Для дочернего элемента
.my-class {text-align: center;} // Или используйте любой селектор

Как задать необходимы класс элементу?

2. Перейдите на вкладку Расширенные, далее в поле CSS ID или CSS класс введите необходимые данные, например класс для секции необходимо ввести в поле CSS класс в виде my-class т.е просто без точки.

3. Далее вы можете использовать данный класс из любого места вордпресс, точно так же как будто бы вы добавили класс для элемента вручную непосредственно в код html шаблона.

Редактирование стилей на странице

1. В панеле свойств перейдите к настройкам документа нажав на кнопку Настройки (рис справа)

2. Далее необходимо перейти на вкладку Стили

3. В группе свойств Пользовательские CSS вы можете написать свой код css который вам необходим.