Разделители секций продолжают оставаться популярным элементом дизайна на Divi. Существует множество стилей разделителей, включая некоторые полезные параметры, которые позволяют легко добавлять уникальные переходы и фоны на вашу страницу.
В этом уроке мы будем использовать разделители разделов немного по-другому. Divi позволяет регулировать высоту и расположение каждого разделителя. Это позволяет нам размещать разделители над определенными областями или содержимым раздела. Используя опцию наведения для высоты разделителя, мы можем добавить уникальные эффекты наведения, показывающие содержание частично скрыт. Это отлично подходит для привлечения внимания к призыву к действию или конкретной кнопке, на которую вы хотите, чтобы люди нажали. посетителей нажмите.
Давайте начнем.
Пример результата
Что нужно для начала
Для начала вам необходимо следующее:
- Le Диви тема установлен и активен
- Новая страница, созданная для создания с нуля внешнего интерфейса (визуальный конструктор)
- Некоторые фиктивные изображения для использования в дизайне. Я собираюсь использовать изображения с прозрачным фоном из Пакет сокового магазина .
После этого вы готовы начать!
Реализация дизайна эффекта наведения высоты разделителя разделов в Divi
Создание раздела и линии
Давайте начнем с создания обычного раздела со строкой из двух столбцов.
Перед добавлением модуля откройте настройки раздела и обновите следующее:
Левый фоновый градиент: #73ba57
Правый градиент фона: #2a4c23
Ширина: 80%
Максимальная ширина: 1080px
Выравнивание раздела: Центр
Но вы также можете выбрать понравившуюся цветовую схему под ваш образ. Моя цветовая схема: # fff200 - # e09900 в градиенте.
Добавить заголовок раздела
Чтобы добавить заголовок раздела, создайте текстовый модуль и обновите содержание тела со следующим заголовком h2:
Сок
Затем обновите чертеж следующим образом:
Заголовок 2 Шрифт: Лато
Заголовок 2 Размер текста: 80px
Заголовок 2 Интервал между буквами: -5px
Маржа: -50px вверху, -40px внизу
Z-индекс: -1
Пользовательское поле и индекс z позволят тексту располагаться позади изображения, которое мы добавим на следующем шаге.
Добавить изображение
Под текстовым модулем с заголовком в столбце 1 добавьте модуль изображения. Затем загрузите изображение с прозрачным фоном. Я использую изображение из пакета макетов магазина сока размером 240 на 300 пикселей.
Отрегулируйте выравнивание изображения по центру.
Добавление призыва к действию в столбце 2
В столбце 2 добавьте вызов в модуль действия.
Добавьте URL ссылки кнопки, чтобы убедиться, что кнопка отображается.
CTA фон и стиль заголовка
Затем обновите следующие параметры проекта:
Цвет фона: #ffffff
Цвет текста:
title Шрифт: Lato
Титульный Вес Политика: Тяжелый
Стиль шрифта заголовка: TT
Размер текста заголовка: 18px
Стилизовать кнопку CTA
Обновите дизайн кнопки следующим образом:
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # e09900
Ширина границы кнопки: 0 px
Стилизация границы CTA
Затем добавьте рамку, чтобы создать модуль следующим образом:
Ширина границы: 10px
Цвет границы: rgba (224,145,0,0.25)
Добавлен эффект наведения высоты разделителя, отображающий призыв к действию.
Теперь пришло время добавить эффект наведения высоты разделения раздела, чтобы показать призыв к действию. Для этого нам сначала нужно создать разделители разделов.
Добавление верхнего разделителя
Откройте параметры раздела и верхний разделитель со следующими параметрами.
Стиль верхнего разделителя: см. Снимок экрана Цвет верхнего разделителя: # 73ba57 Высота верхнего разделителя: 70% (по умолчанию), 0% (зависает)
Откидной верхний разделитель: горизонтальный
Обратите внимание, что высота разделителя начинается с высоты по умолчанию 70%, а затем перемещается до высоты 0% при опрокидывании.
Добавление нижнего делителя
Затем добавьте нижний разделитель, аналогичный разделу со следующими параметрами.
Стиль верхнего разделителя: см. Снимок экрана Цвет верхнего разделителя: # 73ba57 Высота верхнего разделителя: 70% (по умолчанию), 0% (зависает)
Откидной верхний разделитель: горизонтальный
Расположение разделителя: вверху раздела. Содержание
Этот разделитель фона также начинается с высоты 70%, которая меняется на 0% при наведении курсора. Однако, поскольку параметр макета разделителя установлен в верхней части содержимого, разделитель разделов скрывает нижнюю часть призыва к действию в столбце 1. Затем при наведении курсора остальная часть l призыв к действию раскрывается.
Проверьте результат на данный момент.
Добавлен эффект наведения тени блока для уникального перехода и дизайна
Для уникального перехода и дизайна при наведении мы можем добавить эффект наведения тени блока, который будет иметь место одновременно с эффектом наведения высоты разделителя. Для этого добавьте в раздел тень следующего прямоугольника.
Box Shadow: см. Снимок экрана
Box Shadow Горизонтальное положение: 0px
Вертикальная позиция Box Shadow: 0px
Box Shadow Spread Force: 0px (по умолчанию), 150px (при наведении)
Цвет тени коробки: #73ba57
Замедлить продолжительность перехода
На последнем шаге давайте замедлим продолжительность перехода.
Продолжительность перехода: 700ms
Конечный результат
Вот окончательный результат на рабочем столе.
Основываясь на том, что мы сделали выше, вы сможете настроить дисплей на мобильном телефоне и планшете.
Заключительные мысли
Надеюсь, этот урок вдохновил вас на создание уникальных эффектов наведения высоты разделителя разделов для раскрытия содержимого. Фактически, регулировка высоты парящей перегородки может быть замечательным элементом дизайна. А образцы дизайна должны помочь вам начать собственное исследование и собственные разработки.
Надеюсь получить известие от вас в комментариях.
За ваше здоровье!
