В этой статье я расскажу, как добавить пользовательский 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 в конструкторе сайтов: 29 комментариев
Жаль нет описания как получить имя дочернего элемента
В смысле имя? В стилях имя не получают, а используют. Или я не понял вопроса (
Я ни где не нашел как узнать имя дочернего элемента в самом Elementor. Сейчас создаю страницу и в html коде ищу имя класса, что бы обратно вернуться в Elementor и использовать его в CSS.
Михаил. Класс дочернего элемента можно узнать как и в любом другом сайте через браузер (инспектором). Отдельного функционала по выявлению дочернего элемента в elementor нету. Да и по сути надобности такой нет (только в редких случаях). Обычно хватает или использование selector как описано выше для ссылки на родителя т.е по сути на текущий элемент или прямое задания класса на вкладке «Расширенные» для привязки к классу блока или элемента.
Наверно лучше если расскажите какая у вас ситуация, зачем вам понадобилось на сайте такое, а я постараюсь помочь решением.
Задача простая: для виджета Posts в элементе Box задать градиентные цвета. Код CSS простейший, проблемой стал поиск имен классов .elementor-post и .elementor-post__text. Может стоит к статье для таких новичков как я добавить пример разбора виджета по дочерним классам.
Да, в данном случаи вы правильно сделали. По разбору, тут можно написать статейку. По сути статей таких полно т.е по поиску классов на странице сайта с помощью инспектора кода.
А как придать для кнопки класс fancybox-inline? Установил плагин easy fancybox, для создания всплывающей формы обратного звонка. Прописываю класс fancybox-inline в настройках кнопки, придается почему то id
Никак. Доступен только id. Поищите другой плагин всплывающих форм. Их много и более функциональны. Или создайте кнопку в html со своим классом и прочими данными.
Подскажите. Вставляю объект с помощью виджета html-в котором есть свои свойства стиля css. В этих свойствах стиля указываются ключевые селекторы которые есть и в основном стиле шаблона. Как сделать что бы вставляемый стиль применялся только к одному объекту а не ко всей странице?
Нужно посмотреть что у вас за код такой, что стили применяются. Если стили описаны в коде html, то достаточно добавить родительский селектор.
Т.е обрамляем код html в блок
Здравствуйте! Скажите как реализовать на элементор, на странице кнопку назад, точно такую как в браузере (что бы она возращала на прежнее место, без перезагрузки страницы)? Заранее спасибо!
П. С. Коды не знаю(
Здравствуйте. Без кодов нельзя сделать. Попробуйте использовать виджет html код и вставить один из вариантов кода
< input type="button" onclick="history.back();" value="Назад"/>< a href="#" onclick="history.back();return false;" rel="nofollow">Назад
пробел между < input и < a убрать и далее можно оформить стилями.
Спасибо заработало! Но не могу понять как сделать что бы нажимая на иконку элементор (крестик закрытия svg) , воиспроизводилась эта функция… Или как поменять внешность кнопки на обычный серый крестик…
Вариантов масса, от изменении надписи Назад на букву Х и будет крестик, до вставки изображения в код ссылки типа http://htmlbook.ru/HTML/IMG
до вставки тега из fontawesome типа
или другой отсюда https://fontawesome.com/v4.7.0/icons/
а в бесплатной версии елементора можно вставить свой стиль?
Можно. Не так удобно как в платной, но все же. А точнее вставка стиля не в элементор, а посредством функционала ворпресса. Например можно вставить необходимые стили через Консоль — Внешний вид — Настроить — Дополнительные стили.
Добрый день! А можно ли создать карусель в элементоре, что при наведении на изображения они будут закрываться каким нибудь фоном и будет появляться текст и можно будет сделать текст кликабельным для перехода по ссылке. Я подумал о том, что можно узнать класс каждой из картинки и добавить фон, но потом понял, что не знаю как добавить ссылку. Вот ссылка для примера
День добрый. Да, можете задать класс для виджета и на основе класса, выполнять различные css и js операции над слайдами.
Здравствуйте. Как простым способом отбить заголовок тире слева и с права. Пример:
— ДЛИННЫЙ ЗАГОЛОВОК САЙТА —. чтобы на мобильной версии текст становился друг под другом, а тире были посередине, по вертикали.
Заключить тире в теги типа span с каким либо классом и потом написать медиазапрос для данного класса, чтобы исправить на блочный режим.
@media (max-width: 478px) {
.tire {display:block;}
}
.
Либо без CSS. Просто разделить на 3 заголовка (два из них тире) и в свойствах на вкладке Расширенные, в позиционирование, выбрать Друг за другом. А для моб устройств, выбрать другой.
Добрый день, не подскажите, как вставить кастомную анимацию css в елементоре про? Сгенерила на сайте animista код css
.scale-down-center {
-webkit-animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ———————————————-
* Generated by Animista on 2021-2-20 0:43:22
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ———————————————- */
/**
* —————————————-
* animation scale-down-center
* —————————————-
*/
@-webkit-keyframes scale-down-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
@keyframes scale-down-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
не могу понять применение селектора в данном случае(например нужно применить анимацию ко всей колонке с несколькими элементами), буду очень благодарна, если подскажите!
День добрый. Назначить для колонки свой идентификатор id на вкладке Расширенные и на основе этого подправить css.
Но, что вам не хватает в штатной анимации? Ведь очень много чего в elementor pro есть и так!
А как переопределить заголовок.
В браузере вижу:
Вступление
А мне нужно H2.
Так — selector {section-title side-pattern: h2;} — не получается. ))
А через css переопределяют так заголовок? Если такое не работает в инспекторе кода, то и на элементоре тоже не заработает. А вообще совсем не понятно что нужно.
хотела уменьшить расстояние между строками в блоке список с иконками. но не получается. можете подсказать какой код css вставить? я пробовала так my-class {margin: 0 0 1px;} и так selector {margin: 0 0 1px;} страница с блоком иконки с текстом тутhttps://www.anilatur.com/turyi/syirovarnya-alberobello-olivkovoe-maslo.html
нужно переписать стили темы, добавив так
.elementor-icon-list-item span {
margin-bottom: 0 !important;
}
На будущее. Лучше не использовать готовые темы, а делать сайт на основе темы от elementor Hello. Тогда не будет проблем со стилями итд.
благодарю, это помогло. я разместила код в спец. настройках для css. но я бы хотела как то научиться использовать css для отдельных блоков. как тут на скрине https://prnt.sc/26doptk ,
есть место куда вписывать css но как то не получается, они тут не работают. у меня бесплатная версия. как если здесь вставить css ?
Все также делать, только писать стили с учетом указанного класса. При этом нужно еще просматривать код инспектором в браузере. Т.е есть блок , но нужно в нему вручную прописать стили, то в указанном поле css классы, пишите myblok , а в итоге получаете доступ с помощью .myblok {…. итд } Но как говорил выше, что бы не переписывать стандартные стили темы, используйте голую тему от элементор и почти все можно будет сделать с помощью обычных настроек. Ну а в платной версии еще больше возможностей.