Как создать красивую секцию героя, сталкивающуюся со столбцами, в прокрутке с помощью Divi

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

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО макет раздела "Столбцы-герои"

Чтобы получить доступ к бесплатному макету раздела героев со столкновениями столбцов, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

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

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

Фоновый цвет

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

• Цвет фона: # f4f2f7

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

Размеры

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

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

Интервал

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

• Верхняя обивка: 15vw
• Нижняя обивка: 10vw
• Левое заполнение: 5vw
• Правое заполнение: 5vw

Индекс Z

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

• Индекс Z: 12

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

Фоновая картинка

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

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора
• Наложение фонового изображения: нормальное

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

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

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

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

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

• Шрифт заголовка: Shadows Into Light
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 6vw (рабочий стол), 11vw (планшет), 13vw (телефон)
• Расстояние между буквами заголовка: -2 пикселя
• Высота строки заголовка: 1,2 м

Интервал

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

• Верхняя маржа: 10vw

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

Добавить содержимое

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

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

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

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

Интервал

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

• Верхнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)
• Нижнее поле: 4vw (рабочий стол), 8vw (планшет), 12vw (телефон)

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

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

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

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

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

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

• Шрифт кнопки: Open Sans

Интервал

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

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

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

Добавить содержимое

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

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

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

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

Интервал

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

• Верхняя прокладка: 5vw (рабочий стол),
• Нижняя обивка: 60 ​​Вт (планшет и телефон)
• Левое заполнение: 5vw (планшет и телефон)

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

Раздел

Масштабирование вверх и вниз

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

• Включение прокрутки вверх и вниз
• Начальный масштаб: 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 для создания раздела героев, сталкивающихся со столбцами. Как только посетители прокрутятся, два разных столбца и их элементы начнут объединяться. Это, в свою очередь, позволит вам еще больше выделить копию. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

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