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

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

Давайте перейдем к этому.

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

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

Пример # 1

Пример # 2

Пример # 3

Скачать The Hero Sections БЕСПЛАТНО

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

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

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

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

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

СКАЧАТЬ

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

Общие шаги

Добавить новый раздел

Интервал

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

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

Добавить новую строку

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

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

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Перейдите к настройкам интервала и удалите все отступы по умолчанию сверху и снизу.

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

Добавить текстовый модуль №1 в столбец

Добавить контент H1

Начнем добавлять модули! Первый нам нужен текстовый модуль с некоторым содержанием H1.

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

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

• Шрифт заголовка: Montserrat
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 3vw (рабочий стол), 6vw (планшет и телефон)
• Интервал между буквами заголовка: 0,7vw

Размеры

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

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

Интервал

Завершите дизайн модуля, добавив немного верхнего поля.

• Верхняя маржа: 10vw

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

Видимость

Переходим к следующему модулю! Добавьте модуль разделителя и убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Затем измените цвет линии.

• Цвет линии: # 000000

Размеры

Перейдите к настройкам размера и примените следующие настройки:

• Вес разделителя: 0.1vw
• Ширина: 10% (рабочий стол), 16% (планшет), 25% (телефон)
• Выравнивание модуля: по центру

Интервал

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

• Верхняя прокладка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
• Нижняя прокладка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

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

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

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

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

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

• Шрифт текста: Open Sans
• Выравнивание текста: по ширине
• Высота текстовой строки: 2.3em

Размеры

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

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

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

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

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

Выравнивание

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

• Расположение кнопок: по центру

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 2vw (планшет), 2.8vw (телефон)
• Цвет текста кнопки: # 000000
• Ширина границы кнопки: 1 пиксель
• Радиус границы кнопки: 1px
• Шрифт кнопки: Montserrat

Интервал

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

• Верхняя маржа: 2vw (ПК), 8vw (планшет и телефон)
• Нижняя маржа: 10vw
• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Левое заполнение: 3vw (рабочий стол), 6vw (планшет), 8vw (телефон)
• Правая прокладка: 3vw (рабочий стол), 6vw (планшет), 8vw (телефон)

Клонировать раздел дважды

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

Воссоздать градиентный фон при наведении курсора №1

Раздел

Фон градиента по умолчанию

Приступим к созданию первого перехода при наведении! Откройте настройки раздела и добавьте следующий градиентный фон по умолчанию:

• Цвет 1: # d1d1ff
• Цвет 2: # f7f7f7
• Направление градиента: 90 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Наведите градиентный фон

Измените градиентный фон при наведении курсора.

• Цвет 1: # f7f7f7
• Цвет 2: # ffc1c7
• Направление градиента: 90 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Ряд

Фон градиента по умолчанию

Затем откройте настройки строки и примените следующие настройки градиентного фона по умолчанию:

• Цвет 1: # 7032ff
• Цвет 2: rgba (255,255,255,0)
• Направление градиента: 90 градусов
• Стартовая позиция: 10%
• Конечная позиция: 10%

Наведите градиентный фон

Измените градиентный фон при наведении курсора.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # ff324a
• Направление градиента: 90 градусов
• Стартовая позиция: 90%
• Конечное положение: 90%

Воссоздать градиентный фон при наведении курсора №2

Раздел

Фон градиента по умолчанию

Переходим ко второму примеру! Откройте настройки раздела и добавьте следующий градиентный фон:

• Цвет 1: # f7f7f7
• Цвет 2: #eceaff
• Направление градиента: 156 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Наведите градиентный фон

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

• Цвет 1: #ffeaec
• Цвет 2: # f7f7f7
• Направление градиента: 204 градуса
• Стартовая позиция: 50%
• Конечная позиция: 50%

Ряд

Фон градиента по умолчанию

Затем откройте настройки строки и примените следующие настройки градиентного фона:

• Цвет 1: # a932ff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: внизу слева
• Стартовая позиция: 14%
• Конечная позиция: 14%

Наведите градиентный фон

Измените соответственно градиентный фон строки при наведении:

• Цвет 1: # ff324a
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: вверху слева
• Стартовая позиция: 14%
• Конечная позиция: 14%

Столбец

Фон градиента по умолчанию

Перейдите к настройкам столбца и добавьте следующий градиентный фон:

• Цвет 1: # a932ff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: вверху справа
• Стартовая позиция: 14%
• Конечная позиция: 14%

Наведите градиентный фон

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

• Цвет 1: # ff324a
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: Внизу справа
• Стартовая позиция: 14%
• Конечная позиция: 14%

Воссоздать градиентный фон при наведении курсора №3

Раздел

Фон градиента по умолчанию

Переходим к следующему и последнему примеру! Откройте настройки раздела и примените следующий градиентный фон:

• Цвет 1: # ffc1c7
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 45%
• Конечная позиция: 45%

Наведите градиентный фон

Измените градиентный фон раздела при наведении курсора.

• Цвет 1: # ffc1c7
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: влево
• Стартовая позиция: 20%
• Конечная позиция: 20%

Ряд

Фон градиента по умолчанию

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

• Цвет 1: # d3dfff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: снизу
• Стартовая позиция: 45%
• Конечная позиция: 45%

Наведите градиентный фон

Измените соответственно градиентный фон:

• Цвет 1: # d3dfff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: вправо
• Стартовая позиция: 20%
• Конечная позиция: 20%

Столбец

Фон градиента по умолчанию

И последнее, но не менее важное: добавьте фон градиента столбца, и все готово!

• Цвет 1: # f7f7f7
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 41%
• Конечная позиция: 41%

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

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

Пример # 1

Пример # 2

Пример # 3

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

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

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