Хотите знать, как раскрыть содержание при наведении курсора на разделитель разделов в Divi ?
Разделители секций продолжают оставаться элементом дизайна Divi популярный. Существует множество стилей разделителей на выбор с полезными параметрами, которые упрощают добавление уникальных переходов и фонов на вашу страницу.
В этом уроке мы будем использовать разделители разделов немного по-другому. Divi позволяет регулировать высоту и расположение каждого разделителя. Это позволяет нам размещать разделители над определенными областями или содержание раздела.
Используя опцию наведения для высоты разделителя, мы можем добавить уникальные эффекты наведения, которые показывают содержание частично скрыт. Это отлично подходит для привлечения внимания к конкретному призыву к действию или кнопке, на которую вы хотите, чтобы люди нажали. посетителей нажмите.
обследование
Скачайте DIVI прямо сейчас!!!
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Создание эффекта наведения разделителя разделов в Divi
Создание раздела и линии
Создайте обычный раздел со строкой из двух столбцов.
Перед добавлением модуля откройте настройки раздела и обновите следующее:
Фоновый градиент (слева): #73ba57
Градиент фона (справа): #2a4c23
Ширина: 80%
Максимальная ширина: 1 пикселей
Выравнивание сечения: по центру
Добавить название раздела
Чтобы добавить заголовок раздела, создайте модуль Text и вставьте следующий текст:
<h2>The Juice</h2>
Затем обновите дизайн следующим образом:
Шрифт: Лато
Размер текста: 80 пикселей
Расстояние между буквами: -5px
Поля: -50 пикселей (сверху), -40 пикселей (снизу)
Индекс Z: -1
Пользовательские поля и z-индекс позволят тексту оставаться за изображением, которое мы добавим на следующем шаге.
Добавить изображение
Под модулем «Текст» с заголовком в столбце 1 добавьте модуль «Изображение». Затем загрузите изображение с прозрачным фоном. Используем изображение из пакета макетов Соковыжималка 240 пикселей на 300 пикселей.
Регулировка выравнивания изображения по центру.
Добавьте модуль «Призыв к действию» в столбце 2.
В столбце 2 добавьте модуль призыва к действию.
Добавьте URL-адрес ссылки на кнопку, чтобы кнопка отображалась.
Фон призыва к действию и стилизация текста заголовка
Затем обновите следующие параметры дизайна:
Фон: #ffffff
Цвет текста: темный
Шрифт заголовка: Лато
Вес шрифта заголовка: Тяжелый
Стиль шрифта: ТТ
Размер текста заголовка: 18px
Настройте кнопку CTA
Обновите дизайн кнопки следующим образом:
- Использовать пользовательские стили для кнопки: ДА
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: #73ba57
- Ширина границы: 0 пикселя
Настроить границу модуля CTA
Затем добавьте рамку для рамки модуля следующим образом:
Ширина границы: 10 пикселя
Цвет границы: rgba (115,186,87,0.15 XNUMX XNUMX)
В разделитель добавлен эффект наведения для отображения модуля «Призыв к действию».
Теперь пришло время добавить эффект наведения к разделителю разделов, чтобы открыть модуль «Призыв к действию». Для этого нам сначала нужно создать наши разделители разделов.
Читайте также: Divi: как показать содержимое при наведении курсора на вкладки
Добавление верхнего разделителя
Откройте параметры раздела и верхний разделитель со следующими параметрами.
Стиль верхнего разделителя: см. снимок экрана
Цвет верхнего делителя: #73ba57
Высота разделителя: 70% (по умолчанию), 0% (наведение)
Переворот верхнего делителя: горизонтальный
Обратите внимание, что высота разделителя начинается с высоты по умолчанию 70%, а затем изменяется до 0% при наведении курсора.
Добавлен нижний разделитель
Затем добавьте нижний разделитель, аналогичный разделу со следующими параметрами.
- Стиль нижнего разделителя: см. скриншот
- Цвет нижнего делителя: #73ba57
- Высота разделителя: 70% (по умолчанию), 0% (наведение)
- Переворот разделителя: Горизонтальный
- Расположение: поверх содержимого раздела
Этот нижний разделитель также начинается с высоты 70%, которая падает до 0% при наведении курсора. Однако, поскольку параметр расположения разделителя установлен над содержимым, разделитель разделов скрывает нижнюю часть модуля «Призыв к действию» в столбце 1. Затем при наведении отображается остальная часть модуля.
Проверьте результат на данный момент.
Скачайте DIVI прямо сейчас!!!
Добавлен эффект парения тени для уникального перехода и дизайна.
Для уникального перехода и дизайна при наведении мы можем добавить эффект наведения тени блока, который будет происходить одновременно с эффектом наведения разделителя. Для этого добавьте в раздел следующую тень блока.
- Box Shadow: см. снимок экрана
- Горизонтальное положение: 0px
- Вертикальное положение: 0px
- Box Shadow Spread Strength: 0px (по умолчанию), 150px (наведение)
- Цвет теней: #73ba57
Замедлить продолжительность перехода
На последнем шаге давайте замедлим продолжительность перехода.
Продолжительность перехода: 700 мс
Конечный результат
Теперь, когда мы прошли все этапы, давайте посмотрим на конечный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
Мы надеемся, что эта статья вдохновила вас на создание уникальных эффектов наведения разделителя разделов для раскрытия контента.
На самом деле, регулировка сплиттера при наведении сама по себе может быть отличной конструктивной особенностью. Кроме того, образцы проектов должны помочь вам начать собственное исследование и дизайн.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
