Как создать переходы копирования параллакса с помощью липких опций Divi

Когда вы ищете творческие способы оживить дизайн своих страниц, вам могут пригодиться эффекты параллакса. Они привносят дополнительное взаимодействие в прокрутку, не будучи слишком агрессивными. Если вы ищете способ распространить этот эффект параллакса на несколько разделов на вашей странице, вам понравится этот урок. Сегодня мы покажем вам, как создавать переходы копий параллакса с помощью липких опций Divi. Как только посетители прокручивают определенный раздел, копия прокручивается с фоновым изображением параллакса, что дает действительно изящный эффект. Как только достигается следующий раздел в строке, копия заменяется другим заголовком. Результат, к которому мы стремимся, отлично смотрится на экранах всех размеров, и вы также сможете бесплатно скачать файл JSON!

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

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

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

Рабочий стол

Мобильный

Скачать макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

https://youtu.be/uZCD0__Apjk

Подпишитесь на наш канал Youtube

1. Создайте структуру элемента.

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

Начните с добавления нового раздела на страницу, над которой вы работаете. Этот эффект будет особенно хорошо работать, если у вас есть контент выше и ниже макета, который мы собираемся создать.

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

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

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

Размеры

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

• Выровнять высоту столбца: Да
• Ширина: 95%
• Максимальная ширина: 100%

Интервал

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

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

Фоновое изображение столбца

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

Загрузите фоновое изображение и включите на нем эффект параллакса.

• Использовать эффект параллакса: Да
• Метод параллакса: CSS

Расстояние между столбцами

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

• Нижняя обивка: 50vh

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

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

Пора добавить модули, начиная с текстового модуля, содержащего контент H2 по вашему выбору.

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

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

• Шрифт заголовка 2: Montserrat
• Толщина шрифта заголовка 2: полужирный
• Стиль шрифта заголовка 2: прописные
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2:
  • Рабочий стол: 9vw
  • Таблетка: 14vw
  • Телефон: 15vw

Фильтры

Мы также включаем режим наложения в настройках фильтров.

• Режим наложения: наложение

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

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

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

Добавить ссылку

Далее вставляем ссылку.

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки:
  • Рабочий стол: 2vw
  • Планшет и телефон: 7vw
• Цвет текста кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 0,06vw

• Шрифт кнопки: Karla
• Показать значок кнопки: Да
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет

Интервал

Также добавьте пользовательские отступы сверху и снизу.

• Верхняя набивка: 8%
• Нижняя обивка: 8%

Позиция

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

• Позиция: Абсолютная
• Расположение: внизу справа

2. Шаги, необходимые для достижения эффекта

Прикрепить текстовый модуль

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

• Липкая позиция: придерживаться верха
• Смещение липкой вершины: 150 пикселей
• Нижний предел липкости: раздел
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Изменить интервал текстового модуля

Дефолт

Теперь, когда мы включили липкие параметры в этом модуле, мы можем применять липкие стили. По умолчанию модуль будет размещен над самой колонкой. А из-за белого цвета текста модуля он будет сливаться с цветом фона раздела и будет казаться, что там вообще нет текста. Чтобы создать такое позиционирование, мы будем использовать отрицательное верхнее поле для разных размеров экрана.

• Верхнее поле:
  • Рабочий стол: -10vw
  • Таблетка: -14vw
  • Телефон: -15vw

Липкий

Как только текстовый модуль станет липким, мы хотим, чтобы он вернулся в поле зрения. Чтобы в этом убедиться, мы вернем это верхнее поле на «0vh» в закрепленном состоянии.

• Прикрепленное верхнее поле: 0vh

Расстояние между секциями

Нам также понадобится немного места вверху и внизу нашего раздела, чтобы фон и текстовый модуль могли слиться в цвете. Для этого мы снова откроем настройки раздела и применим некоторые пользовательские отступы сверху и снизу.

• Верхняя набивка: 10vh
• Нижняя обивка: 10vh

Клонировать весь раздел столько раз, сколько нужно

После того, как вы закончите дизайн раздела, вы можете клонировать его столько раз, сколько захотите.

Изменить контент и ссылки

Убедитесь, что вы изменили содержимое и ссылки для каждого модуля в повторяющихся разделах, и все готово!

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

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

Рабочий стол

Мобильный

Последние мысли

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

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