Как изменить изображение ролловера на Divi

Знание того, как изменить изображение при наведении, может быть полезным для любого типа Веб-сайт вы работаете. Кроме того, это помогает вам добавить тонкое взаимодействие со страницами. Вы можете, например, использовать его, чтобы дать дополнительную перспективу отзывам, страницам и командным страницам.

С новыми параметрами наведения Divi, вы можете редактировать изображение при наведении, используя только встроенные параметры. Объединив фоны столбцов и фильтр непрозрачности, вы быстро доберетесь до нужного результата.

Давайте!

обследование

Прежде чем углубиться в учебник, давайте взглянем на четыре примера, которые мы воссоздадим с нуля.

Общие шаги

Добавить новый раздел

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

Добавить новую строку

Структура столбца

Затем добавьте новую строку, используя следующую структуру столбцов:

Колонка 1 Фоновое изображение

Еще не добавляя никаких модулей, откройте настройки строки и добавьте фоновое изображение в первый столбец. Выберите изображение, над которым хотите пролететь.

Столбец 1 Фоновое изображение Повтор: без повтора

Добавить изображение в столбец 1

Загрузить изображение

Продолжите, добавив модуль изображения в первый столбец и загрузив изображение, которое вы хотите отобразить, перед наведением курсора.

Добавьте текстовый модуль заголовка в столбец 2

Добавить контент

Во втором столбце нам сначала понадобится заголовок текстового модуля. Давай, добавь немного содержание H3.

Настройки текста заголовка

Затем перейдите к настройкам текста заголовка и внесите некоторые изменения.

Название 3 Шрифт: Балу Тамма
Заголовок 3 Цвет текста: # eda96a
Заголовок 3 Размер текста: 100 пикселей (рабочий стол), 70 пикселей (планшет), 50 пикселей (телефон)
Интервал названия букв 3: -4px

Заголовок 3 Text Shadow Горизонтальная длина: 0.04em
Заголовок 3 Text Shadow Вертикальная длина: 0.04em
Заголовок 3 Цвет Тень текста: rgba (0,0,0,0,6)

расстояние

Наконец, добавьте верхнее поле в настройках интервалов.

Верхнее поле: 50 (рабочий стол), 50px (планшет и телефон)

Добавьте модуль деления в столбец 2

Показать разделитель

Добавьте разделительный модуль под заголовком текстового модуля в столбце 2.

Показать разделитель: да

Цвет разделителя

Затем измените цвет делителя.

Цвет разделителя: # e25300

Режимы

И выберите другой стиль разделения в настройках стиля.

Стиль разделения: пунктир

калибровка

Также увеличьте вес делителя в параметрах размеров.

Вес сепаратора: 3px

Добавьте модуль основного текста в столбец 2

Добавить контент

Перейдем к последнему модулю! Добавьте тело текстового модуля во второй столбец с помощью содержание выбора.

Настройки текста

Измените настройки текста позже.

Размер текста: 16px
Высота строки текста: 2.3em
Ориентация текста: Обоснуйте

Клонировать раздел дважды

Выполнив все основные шаги, дважды клонируйте созданный раздел. Теперь у нас будет отдельный раздел для каждого из первых трех примеров.

Создать пример # 1

Применить дополнительные настройки к модулю изображения

Непрозрачность по умолчанию

Приступим к созданию первого примера! Единственное, что мы здесь сделаем, это создадим переход при наведении курсора без каких-либо дополнительных эффектов. Для этого откройте модуль Image и перейдите в настройки фильтров. Убедитесь, что значение непрозрачности по умолчанию равно 100%.

Непрозрачность: 100%

Наведите указатель мыши на непрозрачность

Измените непрозрачность при наведении курсора.

Непрозрачность: 0%

переходы

Наконец, создайте плавный переход, увеличив продолжительность перехода.

Продолжительность перехода: 1200ms

Создать пример # 2

Применить дополнительные настройки к модулю изображения

Интервал по умолчанию

Перейдем ко второму примеру! Откройте модуль изображения в столбце 1 и убедитесь, что пользовательская заливка по умолчанию отсутствует.

Стационарное расстояние

Продолжите, добавив немного нижнего поля при наведении, чтобы изображение при наведении увеличилось в размере.

Нижняя обивка: 100px

Shadow box

Мы также добавляем тень по умолчанию, которая исчезнет при наведении курсора.

Тень от коробки, горизонтальное положение: -55px
Вертикальное положение тени от коробки: -50px
Сила распространения тени коробки: -10 пикселей
Цвет тени: # eda96a

Непрозрачность по умолчанию

Затем перейдите в настройки фильтров и убедитесь, что непрозрачность по умолчанию составляет 100%.

Непрозрачность: 100%

Наведите указатель мыши на непрозрачность

Уберите непрозрачность наведения мода. Это позволит отображать фон столбца и создать эффект «наведенного изображения».

Непрозрачность: 0%

переходы

Наконец, увеличьте продолжительность перехода в параметрах перехода модуля Image.

Продолжительность перехода: 1200ms

Создать пример 3

Добавьте градиентный фон в столбец 1

В третьем примере мы начинаем с открытия настроек строки и добавления фона радиального градиента к первому столбцу. Это придаст парящему изображению круглую форму.

1 цвет: rgba (43,135,218,0)
2 цвет: #ffffff
Колонка 1 Тип градиента: Радиальный
Колонка 1 Радиальное направление: Центр
Столбец 1 Начальная позиция: 60%
Столбец 1 Конечная позиция: 60%

Применить дополнительные настройки к модулю изображения

Непрозрачность по умолчанию

Продолжите, открыв модуль изображения столбца 1 и убедившись, что непрозрачность по умолчанию равна 100%.

Непрозрачность: 100%

Наведите указатель мыши на непрозрачность

Удалите всю прозрачность, чтобы раскрыть фон колонны.

Непрозрачность: 0%