Как одновременно активировать эффекты наведения для модуля, столбца и строки

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

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

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

Sneak Peek

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

Скачать пример дизайна БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

Понимание того, как запускать состояния наведения одновременно на нескольких элементах Divi.

Каждый элемент в Divi (раздел, строка или модуль) имеет собственное пространство при наведении, которое в основном соответствует размеру самого элемента.

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

Так, например, если вы добавили параметры наведения в раздел, эти параметры наведения станут активными при наведении курсора на раздел.

Затем, если вы наведете курсор на строку внутри раздела, вы активируете параметры наведения как для строки, так и для раздела. Это потому, что строка является дочерним элементом раздела.

Каждый раз, когда вы наводите курсор на столбец, вы активируете состояние наведения курсора на столбец, строку и раздел.

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

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

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

Пример объединения эффектов наведения

Вот пример того, как это работает с Divi.

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

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

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

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

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

Задержки перехода отлично работают с этой настройкой

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

Воссоздание примера дизайна в Divi

Чтобы дать вам некоторую информацию о том, как это происходит в реальном мире Divi, давайте воссоздадим пример, описанный выше.

Что вам нужно для начала

Для начала вам понадобится следующее:

1. Тема Divi установлена ​​и активна
2. Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
3. Изображения, которые будут использоваться для фиктивного содержания

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Добавление раздела и строки

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

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

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

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

• Padding: 0px сверху, 0px снизу

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

• Box Shadow: см. Снимок экрана
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени блока: 0 пикселей (рабочий стол), 10 пикселей (при наведении)
• Цвет тени: # 063c68

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

• Продолжительность перехода: 500 мс
• Задержка перехода: 700 мс

Теперь откройте настройки столбца и обновите следующее:

• Box Shadow: см. Снимок экрана
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени блока: 200 пикселей (рабочий стол), 0 пикселей (при наведении)
• Цвет тени: # 000000
• Продолжительность перехода: 500 мс
• Задержка перехода: 200 мс

Добавить модуль Blurb

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

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

• Изображение: [вставить рекламное изображение]
• Цвет фона: # 0c71c3
• Цвет фона (при наведении): rgba (12,113,195,0,35)

• Выравнивание текста: по центру
• Цвет текста: светлый
• Отступ: 20 пикселей сверху, 20 пикселей снизу, 20 пикселей слева, 20 пикселей справа

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

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

Заключительные мысли и советы

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

• Используйте Box Shadow вместо Borders - Borders фактически добавляют дополнительное пространство к элементу, поэтому это может вызвать нежелательные промежутки при наведении курсора. Box Shadows добавляет элемент дизайна, который не добавляет места.
• Изучите эффекты фонового перехода при наведении - у каждого элемента Divi есть параметры фонового наведения, которые можно комбинировать для слоев творческих эффектов наведения.
• Используйте параметры трансформации при наведении - параметры наведения при трансформации могут добавлять творческий элемент, такой как масштабирование и вращение элементов при наведении курсора. Однако может быть сложно повернуть несколько элементов при наведении, так как это вызовет прыжок.
• Воспользуйтесь преимуществами параметров перехода - добавление различной продолжительности перехода и задержек для состояния наведения каждого элемента может создать уникальную анимацию наведения.

Я надеюсь, что этот урок вдохновит вас на изучение некоторых удивительных комбинаций эффектов наведения в Divi.

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

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