Как постепенно мигать этапы процесса с помощью эффектов прокрутки Divi

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

С Divi мы можем вывести «шаги процесса» на совершенно другой уровень, используя встроенные эффекты прокрутки. В этом руководстве мы покажем вам простой способ постепенного обновления шагов процесса по мере того, как пользователь прокручивает страницу вниз. Это придаст дизайну приятный интерактивный импульс, который творчески подчеркнет предполагаемое сообщение.

Sneak Peek

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

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Как постепенно мигать этапы процесса с помощью эффектов прокрутки Divi

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

Создание строки из четырех столбцов

Для начала добавьте в раздел строку из четырех столбцов.

Прежде чем мы начнем добавлять модули / контент в столбцы, откройте настройки для строки и обновите следующее:

• Ширина желоба: 2
• Максимальная ширина: 80%

Пока достаточно просто. Теперь приступим к добавлению контента.

Добавление содержимого (шаги) в каждый столбец

Поскольку этот дизайн имеет эффект прокрутки, при котором шаги процесса мигают, каждый из наших столбцов будет содержать один из шагов. Столбец 1 будет содержать контент для иллюстрации шага 1. Столбец 2 будет содержать контент для шага 2. И так далее.

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

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

Содержание и дизайн текстового модуля

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

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

• Шрифт текста: Lato
• Толщина шрифта текста: полужирный
• Цвет текста текста: # fc6d71
• Шрифт заголовка 2: Oswald
• Толщина шрифта заголовка 2: светлый
• Размер текста заголовка 2: 32 пикселя
• Заголовок 2 Расстояние между буквами: 1 пиксель
• Высота строки заголовка 2: 1,3 м
• Поля: низ 0 пикселей
• Набивка: 10% верх, 10% низ
• Ширина границы: 1 пикс.
• Цвет границы: rgba (166,166,166,0,16)

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

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

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

Скопируйте и вставьте содержимое столбца 1

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

Обновление содержимого для повторяющихся модулей

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

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

Добавление эффектов прокрутки к каждому столбцу

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

Чтобы создать эффект мигающей прокрутки, мы собираемся использовать эффект прокрутки постепенного появления и исчезновения для каждого столбца. Идея состоит в том, чтобы начать эффект, начиная с непрозрачности 0%, продолжая до 100% непрозрачности, а затем снова снижая до 0%.

Эффекты прокрутки столбца 1

В настройках строки откройте настройки для столбца 1 и добавьте следующий эффект прокрутки:

На вкладке параметров постепенного появления и исчезновения:

• Включить постепенное появление и исчезновение: ДА
• Начальная непрозрачность: 0% (при области просмотра 20%)
• Средняя непрозрачность: 100% (при области просмотра 25% -45%)
• Конечная непрозрачность: 0% (при 50% области просмотра)

Столбец 2 Эффекты прокрутки

Откройте настройки для столбца 2 и добавьте следующий эффект прокрутки:

На вкладке параметров постепенного появления и исчезновения:

• Включить постепенное появление и исчезновение: ДА
• Начальная непрозрачность: 0% (при области просмотра 35%)
• Средняя непрозрачность: 100% (при 40-60% области просмотра)
• Конечная непрозрачность: 0% (при 65% области просмотра)

Столбец 3 Эффекты прокрутки

Столбец 4 Эффекты прокрутки

Добавление заголовка

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

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

На вкладке дизайна обновите следующее:

• Выравнивание текста: лато
• Толщина шрифта заголовка 2: светлый
• Стиль шрифта заголовка 2: TT
• Цвет текста заголовка 2: # fc6d71
• Размер текста заголовка 2: 70 пикселей (рабочий стол), 40 пикселей (планшет), 24 пикселей (телефон).
• Интервал между буквами заголовка 2: 0,5 м

Конечный результат

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

Вот результат.

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

Иллюстрирование этапов процесса не должно ограничиваться статическим изображением или графикой. С эффектом прокрутки Divi вы можете оживить иллюстрацию, постепенно отображая каждый шаг в поле зрения, когда пользователь прокручивает страницу вниз. А поскольку эффект прокрутки добавляется к каждому столбцу, вы можете легко изменять модули / контент в каждом столбце, не нарушая функциональность. Надеюсь, этот прием будет полезным для добавления в ваш набор инструментов для дизайна.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!