Как создать привлекательный призыв к действию в Divi с помощью нескольких простых эффектов наведения
Опубликовано: 2019-07-19Тонкие взаимодействия и эффекты наведения могут быть полезны для создания привлекательного CTA (призыва к действию). Хитрость заключается в том, чтобы использовать эффекты, которые делают ваш призыв к действию более привлекательным и интуитивно понятным, чтобы пользователи с большей вероятностью предприняли действия. А поскольку конечной целью большинства CTA является щелчок по ссылке или кнопке, важно оптимизировать ваш CTA таким образом, чтобы эти интерактивные элементы выходили на первый план.
В этом уроке я покажу вам, как использовать Divi для оптимизации видимости CTA с помощью нескольких эффектов наведения. Я покажу вам, как добавить фон разделителя разделов при наведении курсора, чтобы сгенерировать CTA для лучшего контраста и читабельности. И я покажу вам, как увеличить и переместить CTA в центр страницы при наведении курсора, чтобы он стал основным объектом внимания. Эти эффекты наведения будут полезны, чтобы выделить любой призыв к действию и, надеюсь, улучшить взаимодействие с пользователем.
Давайте начнем.
Sneak Peek
Вот несколько привлекательных эффектов при наведении курсора на призыв к действию, которые мы создадим в этом уроке.
Скачайте БЕСПЛАТНО привлекательный макет эффектов наведения при наведении курсора к действию.
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Подпишитесь на наш канал Youtube
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Фоновое изображение, которое будет использоваться при сборке дизайна. Для этого урока я буду использовать один из пакетов Veterinarian Layout Pack.
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Реализация привлекательных эффектов наведения при призыв к действию в Divi
В этом примере дизайна мы начнем с модуля призыва к действию, который выровнен по левому или правому краю. Затем мы поднесем модуль к центру страницы и масштабируем (или увеличиваем) его при наведении курсора на строку. Чтобы призыв к действию выделялся еще больше при наведении курсора на строку, мы добавим разделители разделов, которые закроются позади модуля для лучшего контраста.
Вот как это сделать.
Создание сечения и ряда
Сначала создайте обычный раздел со строкой из одного столбца.
Перед добавлением модуля откройте настройки раздела и обновите следующее:
Добавьте фоновое изображение с фокусом изображения с правой стороны, чтобы оно оставалось видимым при добавлении нашего модуля слева.
- Максимальная ширина: 1080 пикселей
- Выравнивание секции: по центру
На данный момент это касается раздела. Позже мы вернемся к настройкам раздела, чтобы добавить эффекты наведения курсора на разделитель раздела.
Затем откройте настройки строки и обновите следующее:
- ширина: 100%
- максимальная ширина: 100%
- Набивка: 5% сверху, 5% снизу, 35% справа.
Правый отступ является ключевым в этом дизайне, потому что он сдвигает контент влево. Мы вернемся позже, чтобы добавить параметры наведения, чтобы переместить содержимое строки обратно в центр позже.
Добавление модуля призыва к действию
Теперь мы готовы создать модуль призыва к действию, который станет основным элементом нашего привлекательного призыва к действию.
Идите вперед и добавьте модуль призыва к действию в строку из одного столбца.
Затем обновите настройки модуля призыва к действию следующим образом:
Содержание
- Заголовок: Скидка за первое посещение
- Кнопка: Назначить встречу
- URL ссылки на кнопку: #
Дизайн
- Цвет фона: #ffffff
- Цвет текста: темный
- Шрифт заголовка: Nunito
- Толщина шрифта заголовка: полужирный
- Размер текста заголовка: 36 пикселей
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # 154c87
- Ширина границы кнопки: 0 пикселей
- Максимальная ширина: 500 пикселей
- Выравнивание модуля: по центру
- Круглые углы: 10 пикселей
Ключевой особенностью этого дизайна является максимальная ширина 500 пикселей. Это гарантирует, что ширина модуля не изменится всякий раз, когда мы позже корректируем правое заполнение строки при наведении курсора.
- Box Shadow: см. Снимок экрана
- Положение прямоугольной тени по вертикали: 30 пикселей
- Сила размытия тени коробки: 100 пикселей
- Сила распространения тени коробки: -30 пикселей
Масштабирование и центрирование призыва к действию при наведении курсора на строку
Теперь мы готовы начать добавлять привлекательные эффекты наведения CTA. На этом этапе мы хотим выполнить две вещи при наведении курсора на строку. Во-первых, мы хотим переместить CTA в центр. А затем мы хотим увеличить масштаб модуля (сделать его больше), чтобы сделать его еще более заметным.
Для этого откройте настройки строки и обновите следующее:
- Отступ (при наведении): 0% вправо
Затем настройте отступ для мобильного дисплея:
- Набивка (планшет): 0% справа
- Набивка (телефон): 5% слева, 5% справа
Чтобы увеличить CTA, добавьте следующее свойство преобразования в строку при наведении курсора:
- Масштаб трансформации (при наведении): 110%
Несмотря на то, что свойство масштабирования преобразования применяется к строке, это также косвенно применяется ко всем дочерним элементам внутри строки, включая модуль. Таким образом, модуль будет масштабироваться до 110% при наведении курсора на строку.
Размещение CTA при наведении курсора с разделителями разделов
Наконец, мы готовы добавить разделители разделов, чтобы сгенерировать cta при наведении курсора на раздел / строку. Главное здесь - убедиться, что секция и строка имеют одинаковую высоту и ширину, чтобы пользователь одновременно наводил курсор на секцию и строку без каких-либо промежутков. Итак, нам нужно удалить любые отступы раздела. Затем нам нужно создать разделитель верхней и нижней секции, высота которого увеличивается при наведении курсора на секцию.
Вот что надо делать.
Откройте настройки раздела и обновите следующее:
Padding: 0px сверху, 0px снизу
- Стиль верхнего делителя (рабочий стол): см. Снимок экрана
- Стиль верхнего разделителя (планшет и телефон): нет
- Цвет верхнего разделителя: rgba (21,76,135,0.61)
- Высота верхнего разделителя (по умолчанию): 0%
- Высота верхнего разделителя (при наведении): 120%
- Переворот верхнего делителя: горизонтальный
- Стиль нижнего разделителя (рабочий стол): см. Снимок экрана
- Стиль нижнего разделителя (планшет и телефон): нет
- Цвет нижнего разделителя: rgba (21,76,135,0.61)
- Высота нижнего разделителя (по умолчанию): 0%
- Высота нижнего разделителя (при наведении): 120%
- Переворот нижнего разделителя: горизонтальный
Чтобы разделители не отображались за пределами раздела, обновите параметр вертикального и горизонтального переполнения до скрытого.
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Теперь посмотрим на окончательный результат.
Конечный результат
А вот и дизайн на планшете и телефоне.
Изменение положения призыва к действию
Если вы хотите изменить исходное положение модуля призыва к действию перед состоянием наведения, вы можете легко обновить интервал между строками.
С правой стороны
Допустим, вы хотите, чтобы модуль запускался справа перед наведением курсора. Просто обновите настройки строки следующим образом:
- Набивка: 35% слева
- Отступ (при наведении): 0% влево
Вы захотите обновить изображение, чтобы у него была левая точка фокусировки. После этого вот результат.
Снизу
Или, если хотите, вы можете открыть всплывающее окно с призывом к действию снизу строки. Для этого вам нужно будет добавить фиксированную высоту к секции, а затем опустить модуль с некоторым верхним отступом.
Откройте настройки раздела и задайте ему максимальную высоту, а для параметра переполнения установите значение «Скрыть».
- Макс.высота (рабочий стол): 415 пикселей
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
Затем откройте настройки строки и обновите заполнение, чтобы модуль частично исчез из поля зрения под разделом. Затем снимите верхнюю прокладку при наведении, чтобы поднять ее.
- Набивка (рабочий стол): 25% сверху, 5% снизу
- Набивка (при наведении): 5% сверху
Вот результат ...
Последние мысли
Divi позволяет легко и весело добавлять всевозможные эффекты наведения к вашим веб-страницам. Лучшие эффекты наведения - это те, которые имеют целенаправленный характер и действительно улучшают взаимодействие с пользователем. Несколько простых эффектов наведения, описанных в этом посте, должны помочь создать привлекательные CTA, которые отлично выглядят, улучшат пользовательский интерфейс и, надеюсь, приведут к большему количеству конверсий.
Для получения дополнительных идей ознакомьтесь с нашей публикацией о 3 способах использования параметров наведения, чтобы выделить CTA в Divi, и в нашей публикации о создании скользящих CTA.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!