Использование теней при наведении курсора для создания интерактивного контента с помощью Divi

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

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

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Мобильный

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

Подход

• Пример, который мы воссоздадим, отлично подходит для страниц, но вы можете заставить его работать с любым 5-символьным или 6-символьным словом (сопоставьте его со структурой столбца)
• Каждому из персонажей будет посвящен отдельный текстовый модуль.
• Мы используем строку с достаточным количеством столбцов, чтобы соединить разные символы слова и заставить их выглядеть так, как если бы они были созданы в одном модуле.
• По умолчанию мы сделаем цвет текста текстового модуля соответствующим цвету фона раздела.
• Чтобы символ оставался читаемым, мы также применим к нему белую текстовую тень.
• Как только вы наведете курсор на символ, тень текста исчезнет, ​​а цвет текста изменится, что даст вам ощущение, что текст заполняется
• При наведении курсора на персонажа будет отображаться дополнительная информация.
• На экранах меньшего размера сведения и / или информация о компании будут отображаться с самого начала.

Начнем воссоздавать!

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

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

Фоновый цвет

Откройте новую или существующую страницу и добавьте к ней обычный раздел. Откройте настройки раздела и измените цвет фона.

• Цвет фона: # 03006d

Интервал

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

• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей

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

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

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов.

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Левое заполнение: 9vw (рабочий стол), 5vw (планшет и телефон)
• Правая прокладка: 5vw (планшет и телефон)

Добавить текстовый модуль в столбец 1

Добавить содержимое

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

Настройки текста по умолчанию

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

• Толщина шрифта текста: Ультра полужирный
• Цвет текста: # 03006d
• Размер текста: 27vw (рабочий стол), 0vw (планшет и телефон)
• Высота текстовой строки: 1,1 мкм
• Сила размытия теней текста: 0,01 мкм
• Цвет тени текста: #ffffff
• Ориентация текста: влево

Настройки текста при наведении

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

• Цвет текста: #ffffff
• Цвет тени текста: rgba (255,255,255,0)

Настройки текста списка по умолчанию

Продолжите, перейдя к настройкам текста списка. Важной частью этих настроек является обеспечение размера текста на рабочем столе «0 пикселей», но добавление «18 пикселей» в качестве размера текста для меньших размеров экрана. Это обеспечит отображение текста списка на экранах меньшего размера, но не на рабочем столе без наведения курсора.

• Толщина шрифта неупорядоченного списка: Light
• Цвет текста неупорядоченного списка: #ffffff
• Размер текста неупорядоченного списка: 0 пикселей (рабочий стол), 18 пикселей (планшет и телефон)
• Цвет тени текста неупорядоченного списка: rgba (255,255,255,0)
• Тип стиля неупорядоченного списка: круг
• Положение стиля неупорядоченного списка: снаружи
• Отступ элемента неупорядоченного списка: 0 пикселей

Настройки текста в списке при наведении

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

• Размер текста неупорядоченного списка: 18 пикселей

Интервал

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

• Нижнее поле: 50 пикселей (планшет и телефон)
• Правое поле: -4vw (рабочий стол), 0vw (планшет и телефон)

Клонировать текстовый модуль 4 раза и размещать дубликаты в оставшихся столбцах

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

Изменить текстовый модуль в столбце 2

Изменить содержимое

Откройте дубликат в столбце 2 и измените содержимое.

Изменить интервал

Затем перейдите к настройкам интервалов и измените значения пользовательских полей.

• Нижнее поле: 50 пикселей (планшет и телефон)
• Левое поле: -2vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: -2vw (рабочий стол), 0vw (планшет и телефон)

Изменить текстовый модуль в столбце 3

Изменить содержимое

Также измените содержимое дубликата в столбце 3.

Изменить интервал

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

• Нижнее поле: 50 пикселей (планшет и телефон)
• Левое поле: -5.5vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: 1.5vw (рабочий стол), 0vw (планшет и телефон)

Изменить текстовый модуль в столбце 4

Изменить содержимое

Затем откройте текстовый модуль в столбце 4 и измените его содержимое.

Изменить интервал

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

• Нижнее поле: 50 пикселей
• Левое поле: -6vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: 2vw (рабочий стол), 0vw (планшет и телефон)

Изменить текстовый модуль в столбце 5

Изменить содержимое

Переходим к последнему дубликату. Измените содержимое в поле содержимого.

Изменить интервал

Наряду с настройками пользовательского интервала.

• Нижнее поле: 50 пикселей
• Левое поле: -7vw (рабочий стол), 0vw (планшет и телефон)
• Правое поле: 3vw (рабочий стол), 0vw (планшет и телефон)

Предварительный просмотр

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

Рабочий стол

Мобильный

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

Мы знаем, насколько важно выделить ваш сайт среди других сайтов. Благодаря встроенным функциям Divi вы можете проявить столько творчества, сколько захотите. Этот пост является примером того, как вы можете создавать интерактивный контент при наведении курсора, обеспечивая при этом простоту работы на экранах меньшего размера. Вы можете использовать воссозданный нами пример для любой страницы, над которой вы сейчас работаете. Это отличный способ поделиться некоторыми фактами и дополнительной информацией о вашей компании во время взаимодействия с вашими посетителями. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!