Рано или поздно каждая сборка Elementor попадает в стену, на которую не может подняться панель управления: эффект наведения на веревку, который не предлагает вкладка Стиль, или анимация ключевого кадра, которую вы нашли в учебнике. Elementor сохраняет пользовательский CSS для каждого элемента за лицензией Pro. The Пользовательские CSS расширение в Мастер-аддоны для Elementor удаляет эту стену: редактор CSS в каждом разделе, контейнере, столбце и виджете в бесплатном редакторе.
Вот оно в редакторе. CSS приземляется в ящик, и свидетельские карточки начинают скользить по холсту в ту же секунду:
Что делает пользовательское расширение CSS #
После включения каждый элемент редактора Elementor получает a Пользовательские CSS раздел под своим Продвинутый вкладка. внутри сидит редактор кода с подсветкой синтаксиса и номерами строк. все, что вы там пишете, относится только к этому элементу, и холст просматривает его в реальном времени, поэтому вы наблюдаете, как правило вступает в силу при вводе.
Редактор поддерживает селектор ключевое слово, которое расшифровывается как собственная обертка элемента Написать selector { } и правило нацелено именно на этот раздел или виджет, никакой охоты за сгенерированными названиями классов Elementor. подборщики детей тоже работают: selector .some-class достигает внутри элемента.
Прежде чем начать #
- WordPress с Элементор установлен и активен. достаточно бесплатной версии.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Пользовательский CSS является бесплатным расширением, поэтому лицензия Pro не требуется.
- Некоторые CSS. Даже фрагменты, вставленные в копирование, работают, поскольку ключевое слово селектора удаляет жесткую часть.
Как включить пользовательское расширение CSS #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Пользовательский CSS находится в Виджеты утилит группа с популярным значком рядом с Custom JS и Дубликатор сообщений/страниц. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения и дождитесь зеленого “Настройки успешно сохранены” уведомление.
Откройте пользовательский редактор CSS на элементе #
Выберите любой элемент в редакторе Elementor, целый контейнер в демо-версии и откройте Продвинутый вкладка. Прокрутить до Пользовательские CSS раздел с фиолетовым значком MA и развернуть его Появится пустой редактор кода, под которым подсказка: используйте ключевое слово “selector” для таргетинга элемента оболочки.
Записать или вставить CSS #
Демо-версия превращает статический ряд карточек отзывов в движущийся шатер с одной анимацией ключевого кадра:
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Вставьте его и холст подчиняется немедленно: карты начинают скользить справа налево, обратный ход в конце, и петля, точно так, как показывает GIF в верхней части этой страницы, Нет ничего, чтобы сохранить или освежить в первую очередь.The selector ключевое слово привязывает анимацию к этому контейнеру, поэтому ничего больше на странице не затрагивается.
Результат на странице #
Хит Публиковать и на передней части работает та же анимация: ряд отзывов перемещается по смотровому полю, приостанавливает направление на каждом конце и продолжает ездить на велосипеде самостоятельно.
Одну привычку, которую стоит сохранить: CSS живет на элементе, а не в глобальной таблице стилей. Дублируйте раздел на другую страницу, и анимация будет путешествовать вместе с ним.
Где помогает индивидуальный CSS для каждого элемента #
- Анимации ключевых кадров. Шатры, пульсирующие кнопки, плавающие значки - все, что не может выразить панель управления.
- Государства наведения.
selector:hoverправила для лифтов, теней и цветовых сдвигов на картах. - Исправления фрагмента. Тот ответ Stack Overflow, который устраняет ошибку макета, применяется именно там, где живет ошибка.
- Отзывчивые настройки. Медиа-запрос в одном разделе вместо редактирования таблицы стилей в масштабе всего сайта.
- Дизайнерские эксперименты. Проверьте правило в прямом эфире на холсте, прежде чем продвигать его на CSS вашей темы.
Видео Учебник #
Следите за всем потоком, от включения расширения до анимированных карт, работающих на опубликованной странице.
Часто задаваемые вопросы #
Как добавить пользовательский CSS в Elementor без Pro?
Включите расширение Custom CSS на вкладке Расширения главных дополнений, выберите любой элемент в редакторе и откройте Custom CSS на вкладке Дополнительно.Запишите или вставьте CSS в редактор кода, и это применимо к этому элементу с предварительным просмотром в реальном времени, лицензия Pro не требуется.
Что делает ключевое слово селектора?
Он расшифровывается как обертка элемента, который вы редактируете Правило типа селектор {color: red; } нацелен именно на этот раздел или виджет, не зная сгенерированных Elementor имен классов, и селектор .child достигает элементов внутри него.
Применяется ли CSS ко всему сайту или только к одному элементу?
Только элемент, несущий его. каждый раздел, столбец или виджет имеет свой собственный Custom CSS поле, поэтому правила остаются scoped. дублирование элемента копирует его CSS вместе с ним, что сохраняет эффекты переносимыми между страницами.
Могу ли я запустить CSS-анимацию с этим расширением?
Да. Редактор принимает полный CSS, включая @keyframes, медиа-запросы и псевдоклассы, такие как ховер. Демо-версия на этой странице запускает анимацию шатров ключевых кадров в строке отзывов, предварительно просматриваемую в прямом эфире в редакторе перед публикацией.
Бесплатно ли расширение Custom CSS?
Да. пользовательские CSS поставляется с бесплатной версией главных дополнений для Elementor, в группе виджетов утилит вкладки Расширения. на странице цен указано, что добавляют планы Pro.
Завершая #
Расширение Custom CSS дает Elementor бесплатный аварийный люк, который в конечном итоге понадобится каждому реальному проекту: обладатель областей CSS-редактор на любом элементе с предварительным просмотром в реальном времени и ключевым словом селектора, которое избавляет вас от археологии имени класса. Соедините его с Расширение фона с анимированным градиентом (Pro) для движения без записи ключевых кадров вообще и просмотра полного набора Виджеты и расширения Master Addgets для остальной части набора инструментов.
