Вы хотите изменить стиль нескольких элементов Divi при наведении или после клика?
В этом уроке мы покажем вам, как изменить стиль нескольких элементов при наведении или нажатии. Divi.
Во-первых, мы воспользуемся встроенными возможностями дизайна Divi разработать планировку раздела.
Далее мы представим простой фрагмент jQuery, который можно использовать в сочетании с пользовательским CSS для настройки стиля любого элемента в этом разделе при наведении курсора или нажатии кнопки.
Это может показаться сложным (особенно для начинающих), но вы можете быть удивлены тем, насколько просто это сделать.
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы создадим в этом уроке.
Изменение элементов при наведении на кнопку
Модификация элементов после нажатия на кнопку
Начнем с создания страницы с помощью Divi Builder.
Смотрите также: Divi: Как создать меню с вращающимся колесом при наведении
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Часть 1: Дизайн макета раздела
Для начала создайте новую строку с двумя столбцами.
Настройки раздела
Перед добавлением модулей откройте настройки раздела и обновите следующее:
- Фон: #ffffff
Добавим разделитель разделов
- Разделитель (сверху)
- Стиль: см. скриншот
- Цвет: #ffffff
- Высота: 5vw
- Разделитель (Нижний)
- Стиль: см. захват
- Цвет: #ffffff
- Высота: 5vw
- Прокладка (сверху и снизу): 6vw
Изображение (до наведения)
В левом столбце строки из двух столбцов добавьте новый модуль изображения.
Затем загрузите изображение, которое хотите выделить.
Под вкладкой Проект, обновите выравнивание и включите опцию Прочность Полная ширина.
- Выравнивание изображения: по центру
- Прочность Полная ширина: ДА
Изображение (при наведении или после клика)
Далее мы создадим еще одно изображение, которое будет отображаться при наведении/нажатии кнопки.
Чтобы создать образ, продублируйте предыдущий модуль изображения.
Затем загрузите новое изображение. Изображение должно быть того же размера, что и другое изображение, так как оно заменит другое изображение при наведении/щелчке.
Для этого изображения мы зададим ему абсолютную позицию. Это приведет к тому, что изображение будет располагаться прямо над другим изображением, не занимая реального места на странице.
- Позиция: Абсолют
Под вкладкой Проект, измените непрозрачность в параметрах фильтра, чтобы изображение было полностью невидимым.
- Непрозрачность: 0%
Добавьте текстовый модуль
В правом столбце добавьте новый текстовый модуль.
Затем вставьте следующий HTML-код в поле содержание от тела:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Обратите внимание, что некоторые слова в тексте окружены тегами пролет. Вот как мы можем настроить эти слова позже с помощью пользовательского CSS.
Под вкладкой Проект, обновите параметры стиля H3 следующим образом:
- Заголовок 3:
- Шрифт: Монтсеррат
- Толщина шрифта Толщина шрифта: очень жирный
- Стиль: ТТ
- Размер текста: 60 пикселей (компьютер и планшет), 40 пикселей (телефон)
- Расстояние между буквами: 0,06em
- Высота строки: 2 см
В следующем разделе мы добавим кнопку, которую будем использовать для инициирования изменений стиля.
Создайте раздел для кнопки
Сначала нам нужно создать новый обычный раздел под текущим разделом.
Затем добавьте строку в столбец раздела.
Добавить кнопку
В колонку добавить новый модуль Button.
Измените текст кнопки на «Продолжение...».
Перейти на вкладку Проект и обновите дизайн кнопки следующим образом:
- Использовать пользовательские стили для кнопки: ДА
- Размер текста: 16 пикселей
- Цвет текста: #ffffff
- Фон кнопки (рабочий стол): #4b4baf
- Фон кнопки (при наведении): #67ddc1
- Ширина границы: 0 пикселей
Читайте также: Divi: как добавить значок гамбургера в модуль меню
- Расстояние между буквами кнопки: 4 пикселя
- Шрифт: Монтсеррат
- Вес шрифта: полужирный
- Стиль шрифта кнопки: TT
- Поле (снизу): 0px
- Прокладка (сверху и снизу): 1.5 см
- Прокладка (слева и справа): 4em
Часть 2. Добавление классов CSS к элементам
Теперь, когда наш дизайн готов, мы внесем остальные изменения в дизайн, используя собственный код (CSS и JQuery).
Но прежде чем мы начнем добавлять наш пользовательский код, нам нужно добавить классы CSS ко всем элементам, которые мы хотим изменить, когда мы наводим/нажимаем кнопку.
Добавьте класс CSS в раздел
Чтобы добавить класс CSS в раздел, откройте настройки раздела и нажмите на вкладку Фильтр. Затем введите следующий класс CSS:
- Класс CSS: et-change-style_section
Добавьте класс CSS в модули изображений
Затем откройте настройки для первого изображения в левом столбце и добавьте следующий класс CSS:
- Класс CSS: et-before-image
Это будет изображение, которое будет отображаться «до» наведения/нажатия кнопки.
Используя модальное окно слоя, откройте настройки для второго изображения (того, которое скрыто фильтром непрозрачности) и добавьте следующий класс CSS:
- Класс CSS: et-after-image
Это будет изображение, которое будет отображаться «после» наведения/нажатия кнопки.
Добавьте класс CSS в модуль Text.
Затем добавьте следующий класс CSS в текстовый модуль в правом столбце:
- Класс CSS: et-style-text
Добавьте класс CSS в модуль Button.
Наконец, добавьте пользовательский класс CSS к кнопке в нижней части следующим образом:
- Класс CSS: et-toggle-button
Нам нужен этот класс, чтобы нацелить кнопку для функциональности наведения/щелчка в коде позже.
Часть 3. Добавьте пользовательский код для изменения стилей при наведении или нажатии
Теперь, когда все наши классы CSS на месте, мы можем добавить необходимый код для изменения стиля всех этих элементов при наведении/нажатии кнопки.
Добавить модуль кода
Чтобы добавить код, добавьте модуль «Код» под кнопкой в нижней части.
Вставьте код jQuery
Затем вставьте следующий JQuery. Не забудьте заключить код в теги script, поскольку мы добавляем код в документ HTML (не в файл JS).
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Измените стиль элементов с помощью пользовательского CSS
Откройте модуль «Код» и вставьте следующий пользовательский CSS над сценарием JQuery, убедившись, что он заключен в необходимые теги стиля.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Затем вставьте следующий дополнительный CSS в теги стиля.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Затем вставьте остальную часть CSS внутри тегов стиля:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}Эти фрагменты CSS используют ту же концепцию для изменения стиля элемента, когда раздел (или кнопка) имеет новый класс.
Окончательный результат (обзор)
После добавления кода сохраните изменения и откройте страницу для просмотра результата. Обратите внимание, как меняются целевые элементы при наведении курсора на кнопку.
Меняйте стили по клику
Чтобы добавить функцию щелчка, замените текущий JQuery следующим (опять же, убедитесь, что он заключен в теги скрипта):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Вот окончательный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
Возможность нацеливать и стилизовать несколько элементов на странице, когда вы наводите курсор или нажимаете на что-то, является полезным навыком в веб-дизайне.
Вы можете использовать эту технику для различных вариантов использования (до и после, CTA и т. д.).
Конечно, полезно немного знать CSS и JS/JQuery. Но, как вы видели в этом уроке, вам не нужны глубокие знания программирования, чтобы получить потрясающие результаты!
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
