Эффекты прокрутки Divi открывают массу новых возможностей для дизайна создаваемых вами веб-сайтов. Тонкие взаимодействия, которые вы решите добавить, действительно могут улучшить общий вид вашего сайта. Веб-сайт. Все становится еще лучше, как только вы синхронизируете эффекты прокрутки. В этом уроке мы специально займемся созданием красивого сталкивающегося раздела героя со столбцами при прокрутке. Дизайн главного раздела объединяет две разные колонки на прокрутке, что, в свою очередь, помогает подчеркнуть текст.
Возможный результат
Теперь, когда мы выполнили все шаги, давайте посмотрим на результат на экранах разных размеров.
Воссоздать макет раздела героя
Добавить новый раздел
Настройка цвета фона
Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и измените цвет фона.
- Цвет фона: # f4f2f7
расстояние
Также удалите верхний и нижний отступ по умолчанию из всех разделов.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Пока не добавляете модули, откройте параметры линии и измените параметры размеров соответствующим образом:
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем удалите все верхние и нижние отступы по умолчанию.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
переполнение
И скрыть переполнения ряда.
- Горизонтальное переполнение: скрыто
- Вертикальный перелив: скрытый
Настройки столбца 1
расстояние
Затем откройте настройки в столбце 1 и добавьте пользовательские значения заполнения.
- Верхняя обивка: 15vw
- Нижняя обивка: 10vw
- Левая обивка: 5vw
- Правая обивка: 5vw
Z индекс
Также увеличьте z-индекс столбца.
- Индекс Z: 12
Настройки столбца 2
Фоновое изображение
Продолжите, открыв настройки в столбце 2 и загрузив фоновое изображение по вашему выбору.
- Размер фонового изображения: обложка
- Положение фонового изображения: Центр
- Повторение фонового изображения: без повтора
- Смешивание фоновых изображений: Нормальный
Добавить текстовый модуль # 1 в столбец 1
Добавить контент H1
Пришло время добавить модули, начиная с первого текстового модуля в столбце 1. Добавьте любое содержимое H1 по вашему выбору.
Настройки текста H1
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста H1:
- Название шрифта: Тени в свете
- Вес шрифта заголовка: жирный
- Цвет текста заголовка: # 000000
- Размер текста заголовка: 6vw (рабочий стол), 11vw (планшет), 13vw (телефон)
- Расстояние между буквами заголовка: -2 пикселя
- Высота линии головы: 1.2em
расстояние
Также добавьте верхнее поле.
- Верхнее поле: 10vw
Добавить текстовый модуль # 2 в столбец 1
Добавить контент
Вставьте другой текстовый модуль с описанием содержания по вашему выбору.
Настройки текста
Измените настройки текста модуля следующим образом:
- Шрифт текста: Open Sans
- Цвет текста: # 1e1e1e
- Размер текста: 0.9vw (рабочий стол), 1.9vw (планшет), 3vw (телефон)
- Высота строки текста: 2,4 em
расстояние
И добавляйте собственные значения маржи для экранов разных размеров.
- Верхнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)
- Нижнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)
Добавить модуль кнопки в столбец 1
Добавить копию
Следующий и последний модуль, который нам нужен в этом столбце, - это кнопочный модуль. Добавьте копию по вашему выбору.
Настройки кнопок
Измените параметры кнопок модуля следующим образом:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # 000000
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 100 пикселей
- Шрифт кнопки: Открыть без
расстояние
И завершите настройки кнопок, добавив пользовательские значения отступов для экранов разных размеров.
- Верхний отступ: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Нижняя обивка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Левый отступ: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
- Правая обивка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
Добавить текстовый модуль в столбец 2
Добавить контент
Во втором столбце нам понадобится только текстовый модуль. Введите контент по вашему выбору.
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: тени на свету
- Цвет текста: rgba (0,0,0,0,25)
- Размер текста: 9vw (рабочий стол), 14vw (планшет и телефон)
- Интервал между текстовыми буквами: -3px
- Высота строки текста: 1em
- Выравнивание текста: по центру (офис), слева (планшет и телефон)
расстояние
Также добавьте пользовательские значения заполнения.
- Верхняя обивка: 5vw (стол),
- Нижняя обивка: 60vw (планшет и телефон)
- Левая обивка: 5vw (планшет и телефон)
Применить анимацию прокрутки
Раздел
Подъем и спуск
Как только все ваши моды будут на месте, пора применить эффекты прокрутки! Сначала откройте параметры раздела и используйте следующий эффект масштабирования:
- Активировать Sclaing сверху вниз
- Начальная шкала: 100% (до 49%)
- Средний масштаб:
- Офис: 70% (100%)
- Планшет и телефон: 100% (100%)
- Конечная шкала:
- Офис: 70%
- Планшет и телефон: 100%
Колонка 1
Горизонтальное движение
Далее откройте настройки в столбце 1 и используйте следующий эффект горизонтального движения:
- Активировать горизонтальное движение: Да
- Начальное смещение: 0
- Среднее смещение:
- Офис: 0 (на 65%)
- Планшет и телефон: 0 (93%)
- Конечное смещение:
- Офис: 6
- Планшет и телефон: 0
Подъем и спуск
Также примените к столбцу эффект масштабирования вверх и вниз.
- Включить масштабирование вверх и вниз: Да
- Начальная шкала:
- Офис: 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 тема Диви.