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

Возможный результат

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

Столкновение разделов Divi

Воссоздать макет раздела героя

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

Настройка цвета фона

Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и измените цвет фона.

  • Цвет фона: # f4f2f7
Конфигурация раздела Divi

расстояние

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

  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Конфигурация Divi Spacing

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

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

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

Расположение столбцов divi

калибровка

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

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Выровнять высоту столбца: Да
  • Ширина: 100%
  • Максимальная ширина: 100%
Конфигурация межстрочного интервала Divi

расстояние

Затем удалите все верхние и нижние отступы по умолчанию.

  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Межстрочный интервал Divi

переполнение

И скрыть переполнения ряда.

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
Конфигурация линии видимости Divi

Настройки столбца 1

расстояние

Затем откройте настройки в столбце 1 и добавьте пользовательские значения заполнения.

  • Верхняя обивка: 15vw
  • Нижняя обивка: 10vw
  • Левая обивка: 5vw
  • Правая обивка: 5vw
Конфигурация расстояния между столбцами Divi

Z индекс

Также увеличьте z-индекс столбца.

  • Индекс Z: 12
Относительное положение divi

Настройки столбца 2

Фоновое изображение

Продолжите, открыв настройки в столбце 2 и загрузив фоновое изображение по вашему выбору.

  • Размер фонового изображения: обложка
  • Положение фонового изображения: Центр
  • Повторение фонового изображения: без повтора
  • Смешивание фоновых изображений: Нормальный
Фон столбца Divi

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

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

Пришло время добавить модули, начиная с первого текстового модуля в столбце 1. Добавьте любое содержимое H1 по вашему выбору.

Дивизион внештатной помощи

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

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

  • Название шрифта: Тени в свете
  • Вес шрифта заголовка: жирный
  • Цвет текста заголовка: # 000000
  • Размер текста заголовка: 6vw (рабочий стол), 11vw (планшет), 13vw (телефон)
  • Расстояние между буквами заголовка: -2 пикселя
  • Высота линии головы: 1.2em
Конфигурация шрифта Divi

расстояние

Также добавьте верхнее поле.

  • Верхнее поле: 10vw
Конфигурация интервала текста

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

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

Вставьте другой текстовый модуль с описанием содержания по вашему выбору.

Добавить текстовый столбец 1 divi

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

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

  • Шрифт текста: Open Sans
  • Цвет текста: # 1e1e1e
  • Размер текста: 0.9vw (рабочий стол), 1.9vw (планшет), 3vw (телефон)
  • Высота строки текста: 2,4 em
Настройка шрифта текста Divi

расстояние

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

  • Верхнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)
  • Нижнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)
Конфигурация интервалов текста Divi

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

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

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

Добавить модуль кнопки divi

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

Измените параметры кнопок модуля следующим образом:

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Цвет текста кнопки: #ffffff
  • Цвет фона кнопки: # 000000
  • Ширина границы кнопки: 0 пикселей
  • Радиус границы кнопки: 100 пикселей
Пользовательский стиль кнопки divi
  • Шрифт кнопки: Открыть без
Настройки параметров кнопки шрифта

расстояние

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

  • Верхний отступ: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Нижняя обивка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
  • Левый отступ: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
  • Правая обивка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
Расстояние между кнопками Divi

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

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

Во втором столбце нам понадобится только текстовый модуль. Введите контент по вашему выбору.

Текстовый столбец 2 дел.

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

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

  • Шрифт текста: тени на свету
  • Цвет текста: rgba (0,0,0,0,25)
  • Размер текста: 9vw (рабочий стол), 14vw (планшет и телефон)
  • Интервал между текстовыми буквами: -3px
  • Высота строки текста: 1em
  • Выравнивание текста: по центру (офис), слева (планшет и телефон)
Джейн Доу текстовый столбец 2 диви

расстояние

Также добавьте пользовательские значения заполнения.

  • Верхняя обивка: 5vw (стол),
  • Нижняя обивка: 60vw (планшет и телефон)
  • Левая обивка: 5vw (планшет и телефон)
Расстояние между текстом Divi

Применить анимацию прокрутки

Раздел

Подъем и спуск

Как только все ваши моды будут на месте, пора применить эффекты прокрутки! Сначала откройте параметры раздела и используйте следующий эффект масштабирования:

  • Активировать Sclaing сверху вниз
  • Начальная шкала: 100% (до 49%)
  • Средний масштаб:
    • Офис: 70% (100%)
    • Планшет и телефон: 100% (100%)
  • Конечная шкала:
    • Офис: 70%
    • Планшет и телефон: 100%
Анимация с эффектом прокрутки divi

Колонка 1

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

Далее откройте настройки в столбце 1 и используйте следующий эффект горизонтального движения:

  • Активировать горизонтальное движение: Да
  • Начальное смещение: 0
  • Среднее смещение:
    • Офис: 0 (на 65%)
    • Планшет и телефон: 0 (93%)
  • Конечное смещение:
    • Офис: 6
    • Планшет и телефон: 0
Divi горизонтальное выравнивание

Подъем и спуск

Также примените к столбцу эффект масштабирования вверх и вниз.

  • Включить масштабирование вверх и вниз: Да
  • Начальная шкала:
    • Офис: 10%
    • Планшет и телефон: 100%
  • Средний масштаб:
    • Офис: 90%
    • Планшет и телефон: 100%
  • Конечная шкала: 100%
раздел героев сталкивающихся с колоннами

Колонка 2

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

Затем откройте параметры в столбце 2 и используйте следующие параметры горизонтального перемещения:

  • Активировать горизонтальное движение: Да
  • Начальное смещение: 0
  • Среднее смещение:
    • Офис: 0 (на 53%)
    • Планшет и телефон: 0 (56%)
  • Конечное смещение:
    • Офис: -6 (на 53%)
    • Планшет и телефон: 0 (100%)
Диви с горизонтальной анимацией

Исчезать и исчезать

Завершите настройки столбца, добавив эффект постепенного появления и исчезновения.

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 100% (при 47%)
  • Средняя непрозрачность:
    • Офис: 0% (47%)
    • Планшет и телефон: 100% (47%)
  • Конец непрозрачности:
    • Офис: 0%
    • Планшет и телефон: 100%
Диви анимации движения

Заключительные мысли

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

Другие Ресурсы

Вот список контента, который позволит вам сделать больше с вашим WordPress тема Диви.