Вопрос или проблема
Я следовал этому видео, чтобы создать поп-ап, который появляется, когда я навожу курсор на элемент на своей главной странице: https://www.youtube.com/watch?v=9eI84lhU7II
Мне нужно добавить класс ‘showpopup’ к элементу, который должен показывать поп-ап, но:
Вы не можете напрямую изменить CSS класс кнопки Call to Action, только весь блок CTA. Я не хочу, чтобы поп-ап отображался, когда наведён курсор на весь блок, только на кнопку.
Я не могу найти способ применить класс ‘showpopup’ только к кнопке CTA. Спасибо за помощь!
Ответ или решение
Чтобы добавить CSS-класс к кнопке внутри блока призыва к действию (Call-to-Action, CTA) в Elementor, вам потребуется использовать некоторые дополнительные действия, так как Elementor по умолчанию не позволяет напрямую модифицировать классы кнопки внутри блока CTA. Давайте разберём данный процесс по шагам.
Шаг 1: Создание структуры
- Добавьте блок CTA в Elementor: Откройте редактирование вашей страницы в Elementor и добавьте виджет "Call to Action".
- Настройте CTA: Настройте заголовок, текст и другие параметры блока согласно вашим требованиям.
Шаг 2: Использование пользовательского CSS для кнопки
Elementor не позволяет изменять класс кнопки непосредственно через интерфейс, но у нас есть возможность использовать пользовательский CSS. Вам потребуется несколько дополнительных стилей и JavaScript, чтобы связать класс с кнопкой.
-
Выберите кнопку: В редактировании блока CTA выберите кнопку и убедитесь, что вы можете определить ее идентификатор или класс. Это может выглядеть примерно так:
<a class="elementor-button" href="#">Кнопка</a> -
Дайте кнопке ID или кастомный класс: Чтобы легче было ссылаться на эту кнопку, в панели настроек кнопки дайте ей уникальный класс. Например,
custom-cta-button.
Шаг 3: Добавление пользовательского JavaScript
Чтобы сделать так, чтобы поп-up появлялся только при наведении на кнопку, вам нужно будет немного добавить JavaScript. Это можно сделать с помощью плагина для пользовательского JS или включив его в файл темы.
Пример JavaScript кода:
jQuery(document).ready(function($) {
$('.custom-cta-button').hover(
function() {
$(this).addClass('showpopup');
},
function() {
$(this).removeClass('showpopup');
}
);
});Шаг 4: Добавление CSS для обработки класса showpopup
Теперь, когда вы сделали кнопку чувствительной к наведению с помощью JavaScript, вам нужно будет определить некоторые стили, чтобы ваш поп-up отображался только когда к классу добавляется showpopup. Добавьте следующий CSS в настройки пользовательского CSS вашего сайта или в секцию дополнительного CSS:
/* Скрыть поп-up по умолчанию */
.your-popup-class {
display: none;
}
/* Показать поп-up когда класс showpopup добавлен */
.custom-cta-button.showpopup + .your-popup-class {
display: block;
}Заключение
Теперь, когда пользователь наводит курсор мыши на кнопку, к ней будет добавляться класс showpopup, который будет активировать появление поп-апа, связанного с кнопкой. Убедитесь, что ваш JavaScript загружен после того, как загружены все элементы страницы, чтобы избежать каких-либо ошибок.
Если вы следовали этим шагам, ваш запрос о добавлении CSS-класса к кнопке внутри блока призыва к действию должен быть успешно решен. Не забудьте протестировать все изменения, чтобы убедиться, что все работает должным образом.