Elementor — это популярный конструктор страниц для WordPress, предоставляющий удивительные возможности для настройки внешнего вида вашего сайта. Но, иногда нам нужно внести изменения, которые не предоставляются «из коробки» конструктором Elementor. Один из таких сценариев — изменение цвета заголовка при наведении курсора. Давайте рассмотрим, как это можно сделать с помощью CSS.
Создание заголовка
- Перетащите виджет «Заголовок» на вашу страницу в Elementor.
- Введите текст заголовка и выберите нужный уровень (от H1 до H6).
Добавление стилей CSS
- Перейдите в «Расширенные настройки» для элемента заголовок.
- Откройте вкладку «Пользовательские CSS».
- Вставьте следующий код:
selector :hover {
color: #ВАШ_ЦВЕТ_ПРИ_НАВЕДЕНИИ;
}Замените #ВАШ_ЦВЕТ_ПРИ_НАВЕДЕНИИ на желаемый цвет, например, #FF5733 или напишите название цвета на английском без хэш-тега red.
Сохранение изменений и тестирование
После ввода кода не забудьте сохранить страницу, чтобы изменения вступили в силу. Теперь, когда вы добавили пользовательский CSS, протестируйте заголовок, наведя на него курсор. Цвет должен измениться на тот, который вы указали.
Заключение
С помощью пользовательского CSS вы можете легко расширить функциональность Elementor и добавить дополнительные эффекты и стили, которые не предоставляются по умолчанию. Изменение цвета заголовка при наведении — это всего лишь один из многих примеров того, что вы можете сделать с этим мощным инструментом.