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

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

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

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

Краткий обзор

Вот краткий обзор дизайна, который мы создадим в этом уроке.

Что вам нужно

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

• Тема Divi
• Целевая страница фитнес-зала из пакета макетов фитнес-зала (доступен в Divi Builder)
• Изображение, используемое в качестве фонового изображения, размером точно 320 на 507 пикселей. Не стесняйтесь перетащить его на свой рабочий стол и использовать для этого урока.
  

Подготовка готового макета

Для начала создайте новую страницу, добавьте заголовок и разверните Visual Builder. Затем выберите «Выбрать готовый макет». Во всплывающем окне загрузки из библиотеки выберите макет целевой страницы фитнес-зала и нажмите «Использовать этот макет».

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

Используйте встроенный редактор, чтобы изменить текст заголовка в правом столбце на «Smart Fitness».

Добавление фонового изображения и настройка параметров строки

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

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

Столбец 1 Размер фонового изображения: Фактический размер.
Столбец 1 Расположение фонового изображения: по центру слева
Столбец 1: повторение фонового изображения: без повтора

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

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

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

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

height: 507px;

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

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

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

Название: «Фокус»
Содержание: «Ключ к успеху!»
Значок использования: Да
Значок: см. Снимок экрана

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

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

Цвет значка: # edf000
Значок круга: ДА
Цвет круга: rgba (0,0,0,0)
Показать границу круга: ДА
Цвет границы круга (по умолчанию): rgba (0,0,0,0)
Цвет границы круга (при наведении): # edf000
Расположение изображения / значка: слева
Использовать размер шрифта значка: ДА
Размер шрифта значка: 40 пикселей

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

Толщина шрифта заголовка: полужирный
Цвет текста заголовка (по умолчанию): rgba (0,0,0,0)
Цвет текста заголовка (по умолчанию): # edf000
Цвет основного текста (по умолчанию): rgba (0,0,0,0)
Цвет основного текста (по умолчанию): #ffffff

(Обратите внимание, что цвета текста по умолчанию полностью прозрачны, чтобы скрыть их, пока вы не наведете курсор на рекламное объявление.)

Настраиваемое поле: 15 пикселей сверху, 0 пикселей снизу, 90 пикселей слева
Пользовательские отступы: 5 пикселей сверху, 5 пикселей снизу, 5 пикселей справа

(Пользовательское поле - это то, как вы размещаете значок рекламного объявления в определенном месте на изображении.)

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

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

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

Затем мы можем продублировать модуль blurb, чтобы создать нашу вторую метку всплывающей подсказки. После того, как вы продублируете рекламное объявление, вы можете обновить его содержимое до любого желаемого текста (сделайте его кратким). Затем все, что вам нужно сделать, это разместить всплывающую подсказку, используя другое настраиваемое поле, как показано ниже:

Настраиваемое поле: 0 пикселей сверху, 0 пикселей снизу, 15 пикселей слева

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

Для этой третьей аннотации у нас закончится место в правой части изображения, поэтому у нас действительно не будет много места для контента. Мы могли бы использовать отрицательные поля, чтобы расширить рекламное объявление за пределы изображения, но это также будет выходить за пределы размера экрана 320 пикселей на мобильном устройстве. Итак, мы собираемся представить несколько небольших фрагментов кода, чтобы перевернуть содержимое рекламного объявления так, чтобы значок был справа, а текст - слева. Для этого откройте настройки рекламного ролика и на вкладке «Дополнительно» добавьте следующий настраиваемый CSS.

Основной элемент CSS:

direction: rtl;

CSS Blurb Image:

padding-left: 15px;

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

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

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

Горизонтальное положение тени блока: 150 пикселей

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

Для последней аннотации скопируйте первую аннотацию вверху столбца и вставьте ее под третью аннотацию.

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

Настраиваемое поле: 0 пикселей сверху, 100 пикселей слева

Теперь посмотрим на окончательный результат дизайна!

И обратите внимание на эти эффекты наведения всплывающей подсказки!

Это отзывчиво?

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

Однако есть еще одна вещь, которую вам может потребоваться сделать, чтобы максимально увеличить ширину изображения на маленьких экранах телефонов. По умолчанию ваша строка будет иметь ширину 80% на мобильном устройстве, поэтому, чтобы сделать это 100%, вы можете добавить ее в качестве настраиваемого CSS в основной элемент вашей строки следующим образом:

width: 100%;

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

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

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

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

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