Как рассказать свою историю на свитке с Divi

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

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

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

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

Рабочий стол

Мобильный

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

Скачайте БЕСПЛАТНО The About Page Story on Scroll Layout

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

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

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

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

СКАЧАТЬ

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

1. Создайте первый полноэкранный раздел страницы.

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

Фоновый цвет

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

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

Размеры

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

• Мин. Высота: 100vh

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

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

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

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

Размеры

Откройте настройки строки и разрешите строке занять всю ширину контейнера раздела, изменив настройки размера.

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

Интервал

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

• Левое заполнение: 20vw (рабочий стол), 10vw (планшет и телефон)
• Правая прокладка: 20vw (рабочий стол) 10vw (планшет и телефон)

Анимация

Чтобы усилить эффект повествования, мы также будем использовать анимацию затухания для строки.

• Стиль анимации: Затухание
• Продолжительность анимации: 3000 мс
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Позиция

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

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

3. Вставьте заголовок с эффектами прокрутки

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

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

Единственный модуль, который нам нужен в этой строке, - это текстовый модуль с некоторым содержанием H1.

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

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

• Шрифт заголовка: Nunito
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 7vw (рабочий стол), 9vw (планшет), 11vw (телефон)

Вертикальное движение

Мы также добавим тонкую вертикальную анимацию.

• Включить вертикальное движение: Да
• Начальное смещение: 0 (при 50%)
• Среднее смещение: 10 (при 100%)
• Конечное смещение: 10

Эффект постепенного появления и исчезновения прокрутки

Наряду с эффектом постепенного появления и исчезновения.

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

Масштабирование эффекта прокрутки вверх и вниз

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

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

4. Клонировать весь раздел один раз и включить текст описания с эффектами прокрутки

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

Завершив первый раздел, вы можете полностью его клонировать. Откройте текстовый модуль внутри контейнера дубликата раздела и используйте копию H2.

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

Соответственно измените настройки текста H2:

• Шрифт заголовка 2: Nunito
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 5vw (рабочий стол), 7vw (планшет), 8vw (телефон)
• Высота строки заголовка 2: 1 м (настольный компьютер), 1,2 м (планшет и телефон)

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

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

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

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

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

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

Интервал

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

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

Эффект постепенного появления и исчезновения прокрутки

Затем перейдите к эффектам прокрутки на вкладке «Дополнительно» и используйте следующие настройки постепенного появления и исчезновения:

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

Масштабирование эффекта прокрутки вверх и вниз

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

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

5. Клонируйте второй раздел столько раз, сколько захотите.

Меняйте контент по ходу

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

6. Полная страница с разделом с призывом к действию.

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

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

• Верхняя маржа: 4vw
• Нижняя маржа: 4vw

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

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

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

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

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

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

• Радиус границы кнопки: 100 пикселей
• Шрифт кнопки: Nunito
• Толщина шрифта кнопок: полужирный

Интервал

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

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

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

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

Рабочий стол

Мобильный

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

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

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