Как изменить контент при наведении курсора для создания уникальных призывов к действию в Divi (3 способа)

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

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

Проверьте это!

Sneak Peek

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

# 1 Как изменить контент при наведении курсора на кнопки

# 2 Как изменить фон и содержимое текста в текстовых модулях

# 3 Как изменить контент при наведении курсора для нескольких элементов с помощью модуля призыва к действию

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется).
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Загрузите на страницу готовый макет целевой страницы Cake Maker. Мы будем использовать этот макет для наших дизайнов. Вы можете загрузить макет, выбрав «Выбрать готовый макет» при появлении запроса при развертывании Divi Builder. Или вы можете выбрать значок «Загрузить из библиотеки» плюс в меню настроек в Divi Builder. Чтобы узнать больше о том, как загрузить готовый макет на свою страницу, посмотрите наше видео.

После этого вы готовы приступить к проектированию в Divi.

# 1 Как изменить контент при наведении курсора на кнопки

После того, как вы загрузили готовый макет целевой страницы Cake Maker на вашу страницу, найдите главную кнопку с призывом к действию в верхнем заголовке страницы и откройте настройки дизайна модуля кнопок.

Изменение текста кнопки при наведении курсора

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

Текст кнопки: «Купить сейчас»

Затем разверните опцию наведения для текста кнопки и введите заменяющий текст кнопки под вкладкой наведения, как показано ниже:

Текст кнопки (при наведении): «Поехали»

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

Ширина кнопки

Однако кнопка является inline-block поэтому ширина кнопки / ссылки будет меняться в зависимости от количества содержимого (букв или пробелов), содержащегося в кнопке. Это не подходит для этого эффекта наведения, потому что с меньшим размером текста для замены кнопка будет становиться меньше по ширине и создавать прыжки или сбои при наведении курсора на край кнопки. Чтобы исправить это, нам нужно применить к кнопке заданную ширину. Это легко сделать с помощью одного фрагмента CSS. Добавьте следующий CSS в основной элемент модуля кнопки.

width: 200px;

Вот результат.

Дополнительные изменения и эффекты наведения

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

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

Переворачивание значка кнопки при наведении курсора

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

Показывать только значок при наведении курсора на кнопку: НЕТ

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

Класс CSS: значок кнопки-щелчка

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

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

Вот результат.

Изменение значка кнопки при наведении курсора

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

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

Обновите значок кнопки с помощью значка тележки, поскольку наш призыв к действию - «Показать сейчас».

Затем перейдите на вкладку «Дополнительно» и обновите текущее свойство преобразования CSS с поворотом на 180 градусов вместо 360 градусов. И добавьте новый юникод для содержимого, отображающего стрелку влево («\ 23»).

Новый фрагмент будет выглядеть так:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

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

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

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

# 2 Как изменить фон и содержимое текста в текстовых модулях

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

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

В настройках строки откройте настройки столбца 1 и добавьте фоновое изображение при наведении курсора на столбец.

Это заменит белый фон, который есть по умолчанию.

Также добавьте градиент над фоновым изображением при наведении курсора.

Цвет фона градиента слева: rgba (255,255,255,0)
Правый градиент фона: rgba (46,41,142,0.75)
Стартовая позиция: 30%
Поместите градиент над фоновым изображением: ДА

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

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

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

После обновления столбца сохраните настройки и откройте настройки текстового модуля для текстового модуля в столбце 1. Затем обновите содержимое тела текстового модуля при наведении курсора следующим образом:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

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

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

Цвет фона: #ffffff;
Цвет фона (при наведении): rgba (255,255,255,0);

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

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

Высота: 260 пикселей

Отступ: 30 пикселей сверху, 30 пикселей слева, 30 пикселей справа.
Отступ (при наведении): сверху 90 пикселей

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

Затем обновите цвета текста до белого, как показано ниже:

Цвет текста ссылки: #ffffff
Цвет текста заголовка 3 (при наведении): #ffffff

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

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

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

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

# 3 Как изменить контент при наведении курсора для нескольких элементов с помощью модуля призыва к действию

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

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

Затем добавьте новый модуль призыва к действию под кнопкой «Купить сейчас» в верхнем ряду специального раздела.

Обновить CTA с изменением контента при наведении курсора

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

Название: «Специальное предложение»
Заголовок (при наведении): «Скидка 10%»
Текст кнопки: «Купить сейчас»
Текст кнопки (при наведении): «Сделка»
Текст: «Кексы на заказ»
URL ссылки на кнопку: #

Сохраните настройку сейчас.

Копирование и вставка стилей кнопок макета

Мы собираемся приступить к разработке кнопки для нашего призыва к действию. Для этого откройте настройки кнопок для модуля кнопок над модулем CTA, который поставляется с готовым макетом. Затем щелкните значок с тремя точками в группе параметров кнопок и выберите «Копировать стили кнопок».

Затем откройте меню других параметров в модуле призыва к действию, который мы разрабатываем, и выберите «Вставить стили кнопок».

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

Отступ кнопки: 15 пикселей сверху, 15 пикселей снизу, 40 пикселей слева, 40 пикселей справа

Обновить стили текста

После этого обновите дизайн заголовка и основного текста.

Заголовок уровня заголовка: H4
Шрифт заголовка: Pacifico
Размер текста заголовка: 9vw
Высота строки заголовка: 1,3 мкм
Шрифт основного текста: Open Sans
Плотность основного шрифта: полужирный
Размер основного текста: 18 пикселей
Интервал между буквами основного текста: 1 пиксель

Окончательные настройки

Затем обновите отступ.

Отступ: 0 пикселей слева, 0 пикселей справа

Затем дайте модулю собственный класс CSS.

Класс CSS: fade-cta-title

Сделайте кнопку cta полной шириной, добавив следующий настраиваемый CSS в поле ввода CSS Promo Button.

И обновите продолжительность перехода.

Продолжительность перехода: 800 мс

Наконец, обновите цвет фона, чтобы он был прозрачным по умолчанию и менял цвет при наведении курсора.

Цвет фона: нет (удалить)
Цвет фона (при наведении): rgba (247,78,72,0.86)

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

Результат на данный момент

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

Смягчение изменения содержимого с помощью анимации

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

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

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

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

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

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

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

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

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