Хотите ли вы, чтобы в Divi был фоновый градиент, который меняется при наведении?
Веб-дизайн — это обеспечение идеальности каждой детали. Уделение внимания мелким деталям вашего дизайна быстро повысит качество вашего веб-сайта.
С новыми опциями наведения Divi вы можете легко добавлять небольшие взаимодействия на свой веб-сайт. Параметры наведения применяются практически к любой настройке дизайна. Например, вы можете косвенно изменить градиентный фон при наведении, чтобы создать красивый переход.
Именно это мы вам и покажем в этом уроке. Помимо создания градиентного перехода, мы также создадим с нуля потрясающий пример дизайна, который вы сможете использовать для любого типа веб-сайта, который вы создадите.
Давайте!
обследование
Прежде чем погрузиться в урок, давайте посмотрим на конечный результат.
Начнем проектирование с Divi
Смотрите также: Divi: Как создать адаптивный слайдер-аккордеон
Добавить раздел № 1
расстояние
Первое, что вам нужно будет сделать, это создать новую страницу или открыть существующую и добавить в нее новый обычный раздел. Откройте настройки и добавьте собственные поля сверху и снизу.
- Отступы (сверху и снизу): 100 пикселей
Добавить строку 1
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
Цвет фона по умолчанию (рабочий стол) столбца 1
Пока не добавляя никаких модулей, откройте настройки строки и добавьте следующий цвет фона по умолчанию в столбец 1:
- Фон (рабочий стол): #e7ffa0
Цвет фона столбца 1 при наведении
Измените этот цвет фона при наведении.
- Фон: #00020c
Фоновый градиент столбца 1
Также добавьте градиентный цвет фона в столбец 1. Обратите внимание, что мы используем полностью прозрачный цвет. Этот цвет позволит просвечивать фоновому цвету, который, в свою очередь, меняется при наведении.
- Цвет 1 (20%): rgba (255,255,255,0 XNUMX XNUMX)
- Цвет 2 (100%): rgba (16,0,201,0.8 XNUMX XNUMX)
- Тип градиента: Линейный
- Направление градиента: 50 градусов
Цвет фона столбца 2
Также добавьте цвет фона в столбец 2.
- Фон: #ffffff
калибровка
Затем перейдите на вкладку Дизайн и измените настройки размера в опции Калибровка.
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 2000 пикселей
расстояние
Продолжите, добавив пользовательские значения отступов в настройках интервала.
- Отступы (сверху и снизу): 0 пикселей
Интервал (столбец 2)
- Отступы (сверху и снизу): 6vw (рабочий стол), 120 пикселей (планшет и телефон)
- Отступы (слева и справа): 5vw (рабочий стол), 80 пикселей (планшет), 50 пикселей (телефон).
Box Тень
А также придайте ряду тонкую тень коробки.
- Сила размытия тени коробки: 100 пикселей
- Сила распространения тени коробки: -10px
Переходы
Наконец, мы создадим плавный градиентный фоновый переход, увеличив продолжительность перехода на вкладке Фильтр.
- Продолжительность перехода: 1100 мс
Добавьте модуль изображения в столбец 1.
Загрузить изображение
Пришло время начать добавлять модули! Добавьте модуль изображения в первый столбец.
Градиентный фон
Перейдите к настройкам фона этого модуля изображения и добавьте градиентный фон. Мы снова используем полностью прозрачный цвет, чтобы другие цвета были видны.
- Цвет 1 (57%): rgba (50,217,255,0.66 XNUMX XNUMX, XNUMX)
- Цвет 2 (100%): rgba (255,255,255,0 XNUMX XNUMX, XNUMX)
- Тип градиента: круговой
- Положение градиента: сверху
расстояние
Затем добавьте к модулю пользовательское верхнее заполнение.
- Прокладка (сверху): 14vw
Добавить текстовый модуль в столбец 2
Добавить контент
Давайте перейдем ко второму столбцу! Первый модуль, который нам понадобится, — это модуль текста заголовка. Продолжайте и добавьте содержимое заголовка по вашему выбору.
Настройки текста заголовка
Затем перейдите к настройкам текста заголовка и внесите некоторые изменения.
- Шрифт: Abril Fatface
- Цвет текста: #000000
- Размер текста: 4 vw (рабочий стол), 60 пикселей (планшет), 40 пикселей (телефон)
Добавьте второй текстовый модуль в столбец 2.
Добавить контент
Второй модуль, который нам понадобится, это еще один текстовый модуль. Добавьте немного премиум-контента.
Настройки текста
Затем перейдите в настройки текста и измените выравнивание текста.
- Выравнивание текста: по ширине
калибровка
Также отрегулируйте ширину в настройках размера.
- Ширина: 73% (рабочий стол), 100% (планшет и телефон)
расстояние
Наконец, добавьте к модулю настраиваемые верхнее и нижнее поля, чтобы создать пробелы.
- Поле (сверху и снизу): 2,5 vw (рабочий стол), 50 пикселей (планшет и телефон)
Добавить модуль кнопки в столбец 2
Добавить описание
Третий и последний модуль, который нам понадобится во втором столбце, — это модуль Button. Добавьте копию по вашему выбору.
Настройки кнопок
Затем измените настройки кнопки.
- Использовать пользовательские стили для кнопки: ДА
- Размер текста кнопки: 1,2 дюйма (для ПК), 14 пикселей (для планшетов и телефонов)
- Цвет текста кнопки: #ffffff
- Остановки градиента 1 (0%): #9ea6ff
- Остановки градиента 2 (100%): rgba(16,0,201,0.8)
- Рулевое управление: 78 градусов
- Ширина границы кнопки: 0 пикселей
- Радиус границы: 30 пикселей
- Расстояние между буквами: -1px
- Вес шрифта: очень жирный
- Стиль шрифта: TT - (верхний регистр)
расстояние
Также добавьте пользовательские значения заполнения.
- Отступы (сверху и снизу): 10 пикселей
- Отступы (слева и справа): 40 пикселей
Box Тень
И примените к кнопке тонкую коробчатую тень.
- Сила размытия тени коробки: 40px
Читайте также: Как настроить модуль «Таймер обратного отсчета» с помощью GIF
Добавить раздел № 2
расстояние
Теперь, когда мы завершили первый раздел, мы переходим к следующему. Добавьте новый обычный раздел, используя следующие настраиваемые значения заполнения:
- Отступы (сверху и снизу): 100 пикселей
Добавить строку в два столбца
Структура колонны
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
Фон столбца 1
Пока не добавляя никаких модулей, откройте настройки строки и добавьте следующий цвет фона в столбец 1:
- Фон: #ffffff
Фон столбца 2 (рабочий стол)
Добавьте следующий цвет фона в столбец 2.
- Фон (рабочий стол): #ffffff
Цвет фона столбца 2 при наведении
И измените этот цвет фона при наведении.
- Фон (при наведении): #3d02ff
2 столбца градиентного фона
Также добавьте градиентный фон для столбца.
- Остановки градиента 1 (20%): rgba (255,255,255,0 XNUMX XNUMX)
- Остановки градиента 2 (100%): #ff7700
калибровка
Затем перейдите к настройкам размера и внесите некоторые изменения.
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 2000 пикселей
Интервал (линия)
Продолжите, добавив пользовательские значения отступов в настройках интервала.
- Отступы (сверху и снизу): 0 пикселей
Интервал (столбец 1)
Изменить настройки интервала столбца 1
- Отступы (сверху и снизу): 6vw (рабочий стол), 120 пикселей (планшет и телефон)
- Отступы (слева и справа): 5vw (рабочий стол), 80 пикселей (планшет), 50 пикселей (телефон).
Box Тень
А также добавьте к этому ряду тонкую тень коробки.
- Сила размытия тени коробки: 100px
- Сила распространения тени коробки: -10px
Переходы
Наконец, создайте плавный переход, увеличив продолжительность перехода на вкладке Фильтр.
- Продолжительность перехода: 1100 мс
Дублирующие модули линии 1
Поскольку у нас уже есть все модули, которые нам нужны в предыдущем разделе, мы сэкономим время, клонировав их.
Поместите дубликаты в столбцы строки 2
И поместите дубликаты в новую строку следующим образом:
Изменить содержание
Обязательно отредактируйте содержимое ваших модулей.
Изменить градиент фона кнопки
Также измените градиент фона кнопки.
- Остановки градиента 0%: #ff653f
- Остановки градиента 100%: #0066ff
- Рулевое управление: 39 градусов
Изменить изображение
Замените изображение.
Изменить фоновый градиент
Наконец, измените фоновый градиент модуля Image.
- Остановки градиента 0%: rgba(0,2,12,0.66)
- Остановки градиента 57%: rgba(255,255,255,0)
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз взглянем на конечный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как изменить градиентный фон при наведении с помощью Divi. Мы также создали отличный пример с нуля, который использует этот подход.
Вы можете свободно использовать дизайн и иллюстрацию для любого типа веб-сайта, который вы создаете.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...