Как изменить градиентный фон при наведении курсора с помощью Divi

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

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

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

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

Статический

Парение

Загрузите иллюстрации БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Начнем творить!

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

Добавить раздел # 1

Интервал

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

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

Добавить строку №1

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

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

Цвет фона столбца 1 по умолчанию

Еще не добавляя никаких модулей, откройте настройки строки и добавьте следующий цвет фона по умолчанию в столбец 1:

• Цвет фона: # e7ffa0

Цвет фона при наведении курсора на столбец 1

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

• Цвет фона: # 00020c

Столбец 1 градиентный фон

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

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: rgba (16,0,201,0,8)
• Столбец 1 Тип градиента: линейный
• Столбец 1 Направление градиента: 50 градусов
• Столбец 1 Начальная позиция: 20%

Цвет фона столбца 2

Также добавьте цвет фона столбца 2.

• Цвет фона столбца 2: #ffffff

Размеры

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

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 2000 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Верхнее заполнение столбца 2: 6vw (рабочий стол), 120 пикселей (планшет и телефон).
• Нижнее заполнение столбца 2: 6vw (рабочий стол), 120 пикселей (планшет и телефон)
• Отступ слева для столбца 2: 5vw (рабочий стол), 80 пикселей (планшет), 50 пикселей (телефон).
• Правый отступ столбца 2: 5vw (рабочий стол), 80 пикселей (планшет), 50 пикселей (телефон).

Коробка Тень

И также придайте строке тонкую тень прямоугольника.

• Сила размытия тени коробки: 100 пикселей
• Сила распространения тени коробки: -10 пикселей

Переходы

И последнее, но не менее важное: мы собираемся создать плавный градиентный фоновый переход, увеличив продолжительность перехода на вкладке «Дополнительно».

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

Добавить модуль изображения в столбец 1

Загрузить изображение

Пора начинать добавлять модули! Добавьте модуль изображения в первый столбец и загрузите файл divi-gradient-background-on-hover-illustration-1.png , который вы можете найти в заархивированной папке, которую вы загрузили в начале этого сообщения.

Градиентный фон

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

• Цвет 1: rgba (50,217,255,0,66)
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: верх
• Конечная позиция: 57%

Интервал

Затем добавьте в модуль настраиваемую верхнюю обивку.

• Верхняя обивка: 14vw

Добавить модуль текста заголовка в столбец 2

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

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

Настройки текста заголовка

Затем перейдите к настройкам текста заголовка и внесите некоторые изменения.

• Шрифт заголовка: Abril Fatface
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 4vw (рабочий стол), 60 пикселей (планшет), 40 пикселей (телефон)

Добавить текстовый модуль описания в столбец 2

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

Второй модуль, который нам понадобится, - это еще один текстовый модуль. Добавьте контент по выбору.

Настройки текста

Затем перейдите в настройки текста и измените ориентацию текста.

• Ориентация текста: по ширине

Размеры

Также отрегулируйте ширину в настройках размера.

• Ширина: 73% (рабочий стол), 100% (планшет и телефон)

Интервал

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

• Верхнее поле: 2,5vw (рабочий стол), 50px (планшет и телефон)
• Нижнее поле: 2,5vw (рабочий стол), 50px (планшет и телефон)

Добавить модуль кнопок в столбец 2

Добавить копию

Третий и последний модуль, который нам понадобится во втором столбце, - это кнопочный модуль. Добавьте какую-нибудь копию по вашему выбору.

Настройки кнопок

Затем измените настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1.2vw (рабочий стол), 14px (планшет и телефон)
• Цвет текста кнопки: #ffffff
• Цвет градиента 1: # 9ea6ff
• Цвет градиента 2: rgba (16,0,201,0,8)
• Направление градиента: 78 градусов
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 30 пикселей
• Расстояние между буквами кнопки: -1px
• Плотность шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

Также добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 40 пикселей
• Отступ справа: 40 пикселей

Коробка Тень

И примените к кнопке легкую тень прямоугольника.

• Сила размытия тени коробки: 40 пикселей

Добавить раздел # 2

Интервал

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

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

Добавить строку №2

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

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

Цвет фона столбца 1

Еще не добавляя никаких модулей, откройте настройки строки и добавьте следующий цвет фона в столбец 1:

• Цвет фона столбца 1: #ffffff

Цвет фона столбца 2 по умолчанию

Добавьте следующий цвет фона в столбец 2.

• Цвет фона столбца 2: #ffffff

Цвет фона при наведении курсора на столбец 2

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

• Цвет фона столбца 2: # 3d02ff

Столбец 2 градиентный фон

Также добавьте градиентный фон к столбцу.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # ff7700
• Столбец 2 Начальная позиция: 20%

Размеры

Затем перейдите к настройкам размеров и внесите некоторые изменения.

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 2000 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Верхнее заполнение столбца 1: 6vw (рабочий стол), 120 пикселей (планшет и телефон).
• Отступ снизу столбца 1: 6vw (рабочий стол), 120 пикселей (планшет и телефон)
• Отступ слева для столбца 1: 5vw (рабочий стол), 80 пикселей (планшет), 50 пикселей (телефон).
• Отступ справа от столбца 1: 5vw (рабочий стол), 80 пикселей (планшет), 50 пикселей (телефон).

Коробка Тень

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

• Сила размытия тени коробки: 100 пикселей
• Сила распространения тени коробки: -10 пикселей

Переходы

И последнее, но не менее важное: создайте плавный переход, увеличив продолжительность перехода на расширенной вкладке.

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

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

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

Поместите дубликаты в столбец 1 строки №2

И поместите дубликаты в первый столбец новой строки.

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

Убедитесь, что вы изменили содержимое своих модулей.

Изменить фон градиента кнопки

Также измените фон градиента кнопки.

• Цвет 1: # ff653f
• Цвет 2: # 0066ff
• Направление градиента: 39 градусов

Модуль клонирования изображения строки №2

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

Поместите дубликат в столбец 2 строки №2

И поместите дубликат во второй столбец новой строки.

Изменить изображение

Измените изображение на файл divi-gradient-background-on-hover-illustration-2.png , который вы можете найти в заархивированной папке, которую вы скачали в начале этого поста.

Изменить градиентный фон

И последнее, но не менее важное: измените градиентный фон модуля изображения.

• Цвет 1: rgba (0,2,12,0.66)
• Цвет 2: rgba (255,255,255,0)
• Конечная позиция: 57%

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

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

Статический

Парение

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

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