В этой статье я расскажу, как добавить пользовательский 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;} // Или используйте любой селектор
Как задать необходимы класс элементу?
1. Нажмите кнопку свойств на необходимом элементе (виджет, колонка, секция), чтобы отобразить свойства в панели свойств слева.
2. Перейдите на вкладку Расширенные, далее в поле CSS ID или CSS класс введите необходимые данные, например класс для секции необходимо ввести в поле CSS класс в виде my-class т.е просто без точки.
3. Далее вы можете использовать данный класс из любого места вордпресс, точно так же как будто бы вы добавили класс для элемента вручную непосредственно в код html шаблона.
Редактирование стилей на странице
1. В панеле свойств перейдите к настройкам документа нажав на кнопку Настройки (рис справа)
2. Далее необходимо перейти на вкладку Стили
3. В группе свойств Пользовательские CSS вы можете написать свой код css который вам необходим.
Пользовательский CSS в конструкторе сайтов: 8 комментариев
Жаль нет описания как получить имя дочернего элемента
В смысле имя? В стилях имя не получают, а используют. Или я не понял вопроса (
Я ни где не нашел как узнать имя дочернего элемента в самом Elementor. Сейчас создаю страницу и в html коде ищу имя класса, что бы обратно вернуться в Elementor и использовать его в CSS.
Михаил. Класс дочернего элемента можно узнать как и в любом другом сайте через браузер (инспектором). Отдельного функционала по выявлению дочернего элемента в elementor нету. Да и по сути надобности такой нет (только в редких случаях). Обычно хватает или использование selector как описано выше для ссылки на родителя т.е по сути на текущий элемент или прямое задания класса на вкладке «Расширенные» для привязки к классу блока или элемента.
Наверно лучше если расскажите какая у вас ситуация, зачем вам понадобилось на сайте такое, а я постараюсь помочь решением.
Задача простая: для виджета Posts в элементе Box задать градиентные цвета. Код CSS простейший, проблемой стал поиск имен классов .elementor-post и .elementor-post__text. Может стоит к статье для таких новичков как я добавить пример разбора виджета по дочерним классам.
Да, в данном случаи вы правильно сделали. По разбору, тут можно написать статейку. По сути статей таких полно т.е по поиску классов на странице сайта с помощью инспектора кода.
А как придать для кнопки класс fancybox-inline? Установил плагин easy fancybox, для создания всплывающей формы обратного звонка. Прописываю класс fancybox-inline в настройках кнопки, придается почему то id
Никак. Доступен только id. Поищите другой плагин всплывающих форм. Их много и более функциональны. Или создайте кнопку в html со своим классом и прочими данными.