Как синхронизировать раскрывающуюся копию при прокрутке с Divi

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО расширяющуюся копию на скролл-макете

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

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

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

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

СКАЧАТЬ

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

1. Создать дизайн сечения

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

Фоновый цвет

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

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

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

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

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

Затем добавьте первый текстовый модуль с любым содержимым по вашему выбору.

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

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

• Шрифт текста: Ливвик
• Толщина шрифта текста: полужирный
• Цвет текста: # f1f1f1
• Размер текста: 170 пикселей (рабочий стол), 100 пикселей (планшет), 70 пикселей (телефон)
• Высота текстовой строки: 1em

• Текстовая тень по горизонтали: 0,06 мкм
• Длина текстовой тени по вертикали: 0em
• Цвет тени текста: rgba (79,79,79,0.74)
• Выравнивание текста: по центру (рабочий стол), по левому краю (планшет и телефон)

Клонировать текстовый модуль дважды

Клонируйте текстовый модуль дважды.

Изменить содержимое

Измените содержимое обоих повторяющихся текстовых модулей.

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

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

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

Размеры

Откройте настройки строки и соответствующим образом измените настройки размера:

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

Интервал

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

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

Граница

Затем добавьте верхнюю границу.

• Ширина верхней границы: 1 пикс.
• Цвет верхней границы: # 4c4c4c

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

Интервал

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

• Верхняя обивка: 5vw
• Нижняя обивка: 10vw
• Левый отступ: 6vw
• Правое заполнение: 6vw

Граница

Также используйте правую границу.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: # 4c4c4c

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

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

Продолжите, добавив модуль Blurb в столбец с некоторым содержимым по вашему выбору.

Выбрать значок

Далее выберите значок по вашему выбору.

Настройки значков

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

• Цвет значка: # a3acff
• Выравнивание изображения / значка: влево

Настройки текста заголовка

Измените также настройки текста заголовка.

• Шрифт заголовка: Livvic
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # c1c1c1
• Размер текста заголовка: 35 пикселей

• Тень текста заголовка, длина по горизонтали: 0,06 мкм
• Тень текста заголовка Длина по вертикали: 0em
• Цвет тени текста заголовка: rgba (79,79,79,0.74)

Настройки основного текста

Мы также вносим некоторые изменения в настройки основного текста.

• Цвет основного текста: # 878787
• Размер основного текста: 16 пикселей
• Высота линии корпуса: 2,4 м

Вставка заголовка CSS

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

margin: 30px 0 40px 0;

Клонировать весь столбец дважды

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

Удалить границу столбца 3

Откройте настройки столбца 3 и удалите правую границу.

• Ширина правой границы: 0 пикселей

Изменить содержимое

И измените содержимое модуля Blurb для каждого дубликата.

2. Добавьте эффекты прокрутки

Раздел

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

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

• Включить масштабирование вверх и вниз: Да
• Начальный масштаб: 70%
• Средний масштаб: 100%
• Конечный масштаб: 100%

Текстовый модуль №1

Затухание и исчезновение

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

• Включить постепенное появление и исчезновение: Да
• Начальная непрозрачность: 0%
• Средняя непрозрачность: 0% (при 55%)
• Конечная непрозрачность: 100% (при 71%)

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

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

• Включить масштабирование вверх и вниз: Да
• Начальный масштаб: 0% (при 47%)
• Средний масштаб: 100% (при 56%)
• Конечный масштаб: 100% (при 64%)

Расширение текстового модуля №1 Эффекты прокрутки

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

• Кому: Все тексты
• На всем протяжении: в этой колонке

Рекламный модуль №1

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

Затем мы добавим эффект масштабирования вверх и вниз к модулю Blurb в столбце 1.

• Включить масштабирование вверх и вниз: Да
• Начальная шкала:
  • Рабочий стол: 0%
  • Планшет и телефон: 100%
• Средний масштаб: 100% (при 33%)
• Конечный масштаб: 100% (при 64%)

Расширение эффектов прокрутки модуля Blurb # 1

Завершите руководство, расширив эффект прокрутки на все модули Blurb в строке, и все готово!

• Кому: All Blurbs
• На всем протяжении: в этой строке

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

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

Рабочий стол

Мобильный

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

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

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