Как смешать копию при прокрутке с настройками положения и эффектами прокрутки Divi

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

Начнем воссоздавать!

Добавить 2x раздела-заполнителя

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

Начните с добавления раздела-заполнителя на страницу, над которой вы работаете.

Размеры

Откройте настройки раздела и измените высоту в настройках размеров.

• Высота: 50vh

Раздел клонирования

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

Добавить новый раздел между разделами-заполнителями

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

Фоновый цвет

Откройте настройки раздела и используйте белый цвет фона.

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

Интервал

Перейдите на вкладку дизайна раздела и соответственно измените значения верхнего и нижнего отступов:

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

Добавить строку №1

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

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

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%

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

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

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

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

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

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: Ультра полужирный
• Стиль шрифта текста: прописные.
• Цвет текста: # fff2ea
• Размер текста: 11vw
• Высота текстовой строки: 1em
• Выравнивание текста: по центру

Добавить строку №2

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

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

Размеры

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

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

Добавить модуль изображения в столбец

Загрузить изображение

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

Выравнивание

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

• Выравнивание изображения: по центру

Размеры

Затем перейдите к настройкам размера и установите полную ширину на модуле.

• Принудительная полная ширина: Да

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

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

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

Выравнивание кнопок

Перейдите на вкладку дизайна и измените выравнивание кнопок.

• Расположение кнопок: по центру

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Montserrat
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей
• Левый отступ: 5%
• Правое заполнение: 5%

Добавить абсолютное позиционирование в строку №1

После того, как вы закончите второй ряд, вернитесь к строке №1. Откройте настройки строки, перейдите на вкладку «Дополнительно» и установите абсолютное значение раздела. При этом строка и текстовый модуль внутри нее будут размещены под строкой, содержащей модуль изображения.

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

Клонировать строку №1 и разместить дубликат под строкой №2

Чтобы текстовый модуль отображался поверх изображения, нам понадобится еще одна строка с более высоким значением индекса z. Клонируйте первый ряд и поместите дубликат под вторым рядом.

Применить эффекты к строке №3

Увеличить индекс Z

Откройте повторяющуюся строку и измените z-индекс на вкладке «Дополнительно».

• Индекс Z: 12

Изменить цвет текста

Откройте текстовый модуль в строке и измените цвет текста.

• Цвет текста: # 1e1e1e

Применить режим наложения к строке

Затем откройте настройки строки и измените режим наложения в настройках фильтров.

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

Использовать эффект прокрутки в текстовом модуле в строке №3

Добавить эффект постепенного появления и исчезновения

Завершите руководство, снова открыв текстовый модуль, перейдя к эффектам прокрутки и включив эффект постепенного появления и исчезновения. Вот и все!

• Включить постепенное появление и исчезновение: Да
  • Начальная непрозрачность: 0%
  • Средняя непрозрачность: 0% (при 26%)
  • Конечная непрозрачность: 100% (при 28%)
• Триггер эффекта движения: середина элемента

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

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

Рабочий стол

Мобильный

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

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

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