Как преобразовать несколько элементов для создания абстрактных эффектов наведения в Divi

Как вы уже знаете, Divi имеет множество настроек дизайна, которые позволяют создавать уникальные эффекты наведения для любого элемента Divi (разделов, строк или модулей). Обычно эффект наведения выделяется только на один элемент. Например, если вы добавляете свойство поворота преобразования к модулю при наведении курсора, это вращение активируется при наведении курсора на модуль. Однако, если вы добавите дополнительный эффект наведения к строке, содержащей модуль, это добавит еще один уровень эффектов наведения при наведении курсора на модуль. Это открывает дверь для уникальных абстрактных эффектов наведения.

В этом уроке мы рассмотрим, как преобразовать несколько элементов для абстрактных эффектов наведения, используя встроенные настройки Divi. И поскольку мы будем использовать строки для этого дизайна немного иначе, я покажу вам, как создать макет сетки для ваших строк, чтобы вы могли продемонстрировать эти эффекты наведения в галерее (если хотите).

Давайте начнем.

Sneak Peek

Загрузите Transform Multiple Elements on Hover Layout БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Начиная

Подпишитесь на наш канал Youtube

Для этого урока вам понадобится следующее:

1. Тема Divi установлена ​​и активна
2. Несколько изображений. Я использую изображения из наших готовых макетов, доступных из Divi Builder.

Как только вы будете готовы, перейдите в свою панель управления WordPress. Затем создайте новую страницу («Страницы»> «Добавить новую»), дайте странице название и разверните Divi Builder. Выберите вариант «Строить с нуля».

Теперь ваш чистый холст ждет вас!

Абстрактные эффекты наведения на изображение

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

Вот как это сделать.

Сначала создайте новый обычный раздел со строкой из одного столбца.

Затем добавьте в строку модуль изображения.

Далее добавляем загрузку изображения в модуль.

Добавить эффекты наведения для модуля изображения

Теперь мы можем добавить к изображению несколько эффектов при наведении курсора, которые будут масштабировать, вращать и наклонять изображение. Для этого перейдите к параметрам преобразования и обновите следующее:

Масштаб преобразования по осям X и Y: 110%

Преобразование, поворот оси Z: 9 градусов

Преобразовать наклон оси X и Y: 3 градуса

Вот и все! Довольно просто. Теперь нам нужно настроить строку, чтобы добавить еще один эффект наведения, который будет активироваться при наведении курсора на элементы.

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

Чтобы этот дизайн работал, строка должна быть того же размера, что и изображение внутри нее, чтобы область наведения была одинаковой для обоих. Это позволит нам добавить различные эффекты наведения как для модуля, так и для строки, которые будут активироваться при наведении курсора на модуль (или в данном случае на изображение). Это работает, потому что при наведении курсора на модуль внутри строки активируются эффекты наведения так же, как при наведении курсора на строку. И поскольку у нас есть другой эффект наведения на модуль, оба эффекта наведения активируются при наведении курсора на модуль. Это позволяет нам использовать комбинацию абстрактных эффектов наведения, используя тень блока, преобразование наклона и преобразование поворота как для строки, так и для модуля.

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

Обновите настройки строки следующим образом:

Макс.ширина: 400 пикселей

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

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

Теперь нам нужно добавить фоновое изображение в столбец строки. Это фоновое изображение будет отображаться всякий раз, когда модуль изображения преобразования эффекта наведения курсора наклоняется и поворачивается.

Фоновое изображение столбца 1: [введите изображение]

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

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей (по умолчанию), -30 пикселей (при наведении)
Вертикальное положение тени блока: 0 пикселей (по умолчанию), -15 пикселей (при наведении)
Цвет тени: # 002f66

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

Наконец, мы готовы добавить свойство преобразования наклона, чтобы добавить дополнительный эффект наведения для строки.

Преобразовать наклон оси X и Y: -3deg

Конечный результат

Вот окончательный результат.

И он также хорошо масштабируется на мобильных устройствах.

Абстрактные эффекты наведения для призыва к действию (пример 1)

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

Создайте новый обычный раздел со строкой в ​​одну колонку.

Затем обновите настройки строки следующим образом:

Градиент фона столбца 1, левый цвет: rgba (34,43,58,0.71)
Градиент правого цвета фона столбца 1: # 222b3a
Фоновое изображение: [вставить изображение]
Максимальная ширина: 400 пикселей
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

Мы вернемся к настройкам строки, чтобы немного дополнить наши абстрактные эффекты наведения, а пока давайте добавим наш вызов Action Module в строку.

Настройки модуля призыва к действию

Откройте настройки модуля призыва к действию и обновите содержимое следующим образом:

Название: Путешествие с очками
Текст кнопки: нажмите здесь
Контент: только на ограниченное время
URL ссылки на кнопку: # (пока просто чтобы активировать кнопку)
Использовать цвет фона: НЕТ

Затем обновите настройки дизайна для текста и интервалов модуля.

Шрифт заголовка: Gilda Display
Размер текста кнопки: 16 пикселей
Цвет текста кнопки: # ffb238
Цвет фона кнопки: rgba (0,0,0,0)
Ширина границы кнопки: 0 пикселей

Пользовательское заполнение: 20% сверху, 20% снизу

Теперь добавьте рамку к модулю.

Ширина границы: 2 пикселя
Цвет границы: # 222b3a

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

Начнем с эффектов наведения на строку.

Эффекты наведения строк

Во-первых, мы можем добавить тень блока при наведении курсора на нашу строку. Откройте настройки строки и обновите следующее:

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей (по умолчанию), 90 пикселей (при наведении)
Вертикальное положение тени блока: 0 пикселей (по умолчанию), 80 пикселей (при наведении)
Сила распространения тени блока: 0 пикселей (по умолчанию), -40 пикселей (при наведении)

Цвет тени: # ffb238

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

Теперь давайте добавим свойство поворота и наклона при наведении курсора.

Преобразование Повернуть ось X (при наведении): 10 градусов
Преобразовать наклон оси X (при наведении): -4deg
Преобразовать наклон оси Y (при наведении): -4deg

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

Эффекты при наведении курсора на модуль призыва к действию

Откройте настройки модуля призыва к действию и придайте ему эффект наведения тени прямоугольника следующим образом:

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: 0 пикселей (по умолчанию), 30 пикселей (при наведении)
Цвет тени: #ffffff

Наконец, добавьте свойство преобразования масштабирования, поворота и наклона при наведении курсора следующим образом:
Масштаб трансформации по осям X и Y (при наведении): 115%
Преобразование, поворот оси Z (при наведении): 9 градусов
Преобразовать наклон оси X (при наведении): 3 градуса
Преобразовать наклон оси Y (при наведении): 3 градуса

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

Конечный результат

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

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

Абстрактные эффекты наведения для призыва к действию (пример 2)

Чтобы ускорить разработку этого следующего абстрактного эффекта наведения, давайте продублируем раздел, содержащий наш первый пример. Теперь все, что нам нужно сделать, это внести некоторые незначительные изменения в дизайн и эффекты наведения для уникального дизайна.

Обновить настройки строки

Сначала обновите настройки строки следующим образом:

Преобразование, поворот оси Z: -5 градусов
Преобразовать наклон оси X и Y: -4 градуса

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

Теперь давайте настроим параметры модуля следующим образом:

Сначала снимаем границу…

Ширина границы: 0 пикселей

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

Положение тени бокса по горизонтали: 0 пикселей
Положение прямоугольной тени по вертикали: 110 пикселей
(убедитесь и отключите эффект наведения, унаследованный от предыдущего дублированного дизайна)
Цвет тени: # ffb238

Теперь мы можем обновить эффекты при наведении курсора на свойства преобразования. Здесь мы в основном немного уменьшаем масштаб и добавляем отрицательные значения к нашим предыдущим свойствам преобразования поворота и наклона, чтобы перемещать элемент в противоположном направлении при наведении курсора.

Обновите следующие параметры преобразования:

Масштаб преобразования по осям X и Y (при наведении): 110%
Transform Rotate Z axis (hover): -9deg
Преобразовать наклон оси X (при наведении): -3deg
Преобразовать наклон оси Y (при наведении): -3deg

Создание макета сетки для ваших строк

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

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

Затем добавьте настраиваемое поле для каждой строки:

Пользовательское поле: 50 пикселей сверху, 50 пикселей снизу.

Затем откройте настройки раздела и просто добавьте следующий настраиваемый CSS к основному элементу.

display: flex;
flex-wrap: wrap;

Теперь у вас есть три столбца строк, которые будут соответствовать размеру вашего браузера.

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!