Как использовать эффекты наведения высоты разделителя разделов для отображения содержимого в Divi
Опубликовано: 2019-06-24Разделители секций продолжают оставаться популярным элементом дизайна Divi. Есть много стилей разделителей на выбор с полезными опциями, которые позволяют легко добавлять уникальные переходы и фоны на вашу страницу.
В этом уроке мы собираемся использовать разделители разделов немного иначе. Divi позволяет регулировать высоту и расположение каждого разделителя. Это позволяет нам размещать разделители над определенными областями или контентом в разделе. Используя параметр наведения для высоты разделителя, мы можем добавить уникальные эффекты наведения, которые показывают частично скрытый контент. Это отлично подходит для привлечения внимания к конкретному призыву к действию или кнопке, по которой вы хотите, чтобы посетители нажимали.
Давайте начнем.
Sneak Peek
Загрузите БЕСПЛАТНО эффекты наведения высоты разделителя
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Подпишитесь на наш канал Youtube
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Несколько макетов изображений для использования в дизайне. Я буду использовать несколько изображений с прозрачным фоном из пакета Juice Shop Layout Pack.
После этого все готово!
Реализация дизайна эффекта наведения высоты разделителя разделов в Divi
Создание сечения и ряда
Во-первых, давайте создадим обычный раздел с строкой из двух столбцов.
Перед добавлением модуля откройте настройки раздела и обновите следующее:
Цвет фонового градиента слева: # 73ba57
Правый цвет градиента фона: # 2a4c23
Ширина: 80%
Максимальная ширина: 1080 пикселей
Выравнивание сечения: по центру
Добавление заголовка раздела
Чтобы добавить заголовок раздела, создайте текстовый модуль и обновите содержимое тела следующим заголовком h2:
<h2>The Juice</h2>
Затем обновите дизайн следующим образом:
Шрифт заголовка 2: Lato
Размер текста заголовка 2: 80 пикселей
Заголовок 2 Расстояние между буквами: -5 пикселей
Поля: -50 пикселей сверху, -40 пикселей снизу
Z-индекс: -1
Пользовательское поле и индекс z позволят тексту располагаться позади изображения, которое мы добавим на следующем шаге.
Добавление изображения
Под текстовым модулем с заголовком в столбце 1 добавьте модуль изображения. Затем загрузите изображение с прозрачным фоном. Я использую изображение из пакета макетов магазина сока размером 240 на 300 пикселей.
Отрегулируйте выравнивание изображения по центру.
Добавление призыва к действию в столбце 2
В столбце 2 добавьте модуль призыва к действию.
Добавьте URL-адрес ссылки на кнопку, чтобы убедиться, что кнопка отображается.
Стилизация фона призыва к действию и текста заголовка
Затем обновите следующие настройки дизайна:
Цвет фона: #ffffff
Цвет текста: темный
Шрифт заголовка: Lato
Плотность шрифта заголовка: Heavy
Стиль шрифта заголовка: TT
Размер текста заголовка: 18 пикселей
Стилизация кнопки CTA
Обновите дизайн кнопки следующим образом:
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 73ba57
Ширина границы кнопки: 0 пикселей
Стилизация границы CTA
Затем добавьте границу для рамки модуля следующим образом:
Ширина границы: 10 пикселей
Цвет границы: rgba (115,186,87,0,15)
Добавление эффекта наведения высоты разделителя, чтобы выявить призыв к действию
Теперь пора добавить эффект наведения высоты разделителя разделов, чтобы показать призыв к действию. Для этого мы должны сначала создать наши разделители разделов.
Добавление верхнего разделителя
Откройте настройки раздела и верхний разделитель со следующими настройками.
Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: # 73ba57
Высота верхнего разделителя: 70% (по умолчанию), 0% (при наведении)
Переворот верхнего делителя: горизонтальный
Обратите внимание, что высота разделителя начинается с высоты по умолчанию 70%, а затем изменяется на высоту 0% при наведении курсора.
Добавление нижнего разделителя
Затем добавьте аналогичный нижний разделитель в раздел со следующими настройками.
Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: # 73ba57
Высота верхнего разделителя: 70% (по умолчанию), 0% (при наведении)
Переворот верхнего делителя: горизонтальный
Расположение разделителей: поверх содержимого раздела
Этот нижний разделитель также начинается с высоты 70%, которая меняется на 0% при наведении курсора. Однако, поскольку параметр расположения разделителя установлен поверх содержимого, разделитель раздела скрывает нижнюю часть призыва к действию в столбце 1. Затем при наведении курсора отображается остальная часть призыва к действию.
Проверьте результат на данный момент.
Добавление эффекта наведения тени для уникального перехода и дизайна
Для уникального перехода и дизайна при наведении мы можем добавить эффект наведения тени блока, который будет иметь место одновременно с эффектом наведения высоты разделителя. Для этого добавьте в раздел следующую тень блока.
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 0 пикселей
Вертикальное положение тени блока: 0 пикселей
Сила распространения тени блока: 0 пикселей (по умолчанию), 150 пикселей (при наведении)
Цвет тени коробки: # 73ba57
Замедление продолжительности перехода
В качестве последнего шага давайте немного уменьшим продолжительность перехода.
Продолжительность перехода: 700 мс
Конечный результат
Вот окончательный результат на рабочем столе.
Если вы не хотите, чтобы содержимое было скрыто на дисплее планшета и телефона, вы можете легко изменить расположение разделителя на «под содержимым раздела» для этих устройств.
Вот окончательный дизайн планшета и телефона.
Эксперименты с другими стилями разделителей секций для создания совершенно уникальных дизайнов за считанные секунды
Имея такую настройку, вы можете легко экспериментировать с различными стилями и комбинациями разделителей!
Вот еще несколько, которые я включил в бесплатную загрузку.
Последние мысли
Надеюсь, этот пост дал вам немного вдохновения для создания уникальных эффектов наведения высоты разделителя разделов для раскрытия контента. Фактически, регулировка высоты разделителя при наведении указателя мыши может быть отличным элементом дизайна сама по себе. И примеры дизайна должны помочь вам начать собственное исследование и дизайн.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!