Создание всплывающих описаний сервисов при наведении курсора с помощью Divi

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

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

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

Sneak Peek

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

Создание всплывающих описаний услуг при наведении курсора с помощью Divi

Создайте раздел и строку

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

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

Добавьте темное фоновое изображение или темный цвет фона. Я использую абстрактное фоновое изображение из пакета макетов инвестиционной компании. Но если вы не хотите его использовать, вы можете просто добавить цвет фона # 161c29.

• Ширина желоба: 1
• Ширина: 100%
• Высота: 320 пикселей (рабочий стол), авто (планшет и телефон) \
• Padding: 0px сверху, 0px снизу

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

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

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

• Название: Сервис
• Значок: см. Снимок экрана

Также удалите содержимое тела по умолчанию.

• Фоновое изображение: добавьте изображение размером около 320 на 215 пикселей.
• Размер фонового изображения: По размеру
• Расположение фонового изображения: вверху по центру

• Цвет фона градиента слева: rgba (31,72,192,0.61)
• Правый градиент фона: # 161c29
• Стартовая позиция: 34%
• Конечная позиция: 71%
• Поместите градиент над фоновым изображением: ДА

• Цвет значка: #ffffff
• Выравнивание текста: по центру
• Шрифт заголовка: Archivo
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 38 пикселей
• Заголовок Расстояние между буквами: 4 пикселя
• Максимальная ширина: 320 пикселей
• Выравнивание модуля: по центру
• Высота: 320 пикселей

• Прокладка: сверху 68 пикселей.
• Закругленные углы: 10 пикселей
• Индекс Z: 1

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

Добавить модуль призыва к действию

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

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

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

• Выравнивание текста: по левому краю
• Шрифт заголовка: Archivo
• Размер текста заголовка: 22px
• Ширина: 320 пикселей
• Расположение модуля: слева (рабочий стол), по центру (планшет и телефон)
• Высота: 320 пикселей (рабочий стол), авто (планшет и телефон)
• Маржа: -320 пикселей (рабочий стол), 0 пикселей (планшет и телефон)
• Отступ: сверху 40 пикселей, слева 40 пикселей, справа 40 пикселей.

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

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

Вот как должен выглядеть дизайн на данный момент.

Создание кнопки

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

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

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

Добавьте текст кнопки «Узнать больше».

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

• Расположение кнопок: по центру
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 1f48c0
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 10 пикселей
• Расстояние между буквами кнопки: 4 пикселя
• Шрифт кнопки: Archivo

Теперь все, что нам нужно сделать, это разместить нашу кнопку.

• Маржа (рабочий стол): -25 пикселей сверху
• Поля (планшет и телефон): 25 пикселей сверху, 50 пикселей снизу.
• Индекс Z: 2

Значение индекса z, равное 2, гарантирует, что кнопка остается над модулем рекламного сообщения (у которого индекс z равен 1).

Создание всплывающего эффекта наведения

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

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

• Макс. Ширина (рабочий стол): 320 пикселей
• Максимальная ширина (при наведении): 1080 пикселей
• Максимальная ширина (планшет и телефон) 1080 пикселей

Затем, в качестве последнего штриха, добавьте радиус границы к строке и обновите параметр переполнения видимости до видимого, чтобы кнопка не скрывалась.

• Закругленные углы: 10 пикселей
• Горизонтальный перелив: видимый
• Вертикальный перелив: видимый

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

Ознакомьтесь с описанием всплывающих сервисов.

А вот и на дисплее планшета и телефона.

Другие варианты дизайна, которые стоит попробовать

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

Добавление цвета фона раздела

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

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

• Цвет фона: # 161c29

Тогда проверьте результат.

Использование только двух модулей

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

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

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

• Выравнивание модуля: слева (рабочий стол), по центру (планшет)

Наконец, уменьшите максимальную ширину строки при наведении, чтобы сделать ее более компактной. Откройте настройки строки и обновите следующее:

• Максимальная ширина (при наведении): 700 пикселей
• Максимальная ширина (планшет): 700 пикселей

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

И вот он на белом фоне.

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

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

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

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