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

Рано или поздно каждая сборка 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 вашей темы.

Видео Учебник #

Следите за всем потоком, от включения расширения до анимированных карт, работающих на опубликованной странице.

Часто задаваемые вопросы #

Завершая #

Расширение Custom CSS дает Elementor бесплатный аварийный люк, который в конечном итоге понадобится каждому реальному проекту: обладатель областей CSS-редактор на любом элементе с предварительным просмотром в реальном времени и ключевым словом селектора, которое избавляет вас от археологии имени класса. Соедините его с Расширение фона с анимированным градиентом для движения без записи ключевых кадров и просмотра полного набора Виджеты и расширения Master Addgets для остальной части набора инструментов.