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

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Начнем творить!

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

Добавить раздел # 1

Фоновый цвет

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

• Цвет фона: # 0f0f0f

Нижний разделитель

Продолжите, добавив нижний разделитель к разделу.

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Высота разделителя: 30 пикселей
• Повторение по горизонтали делителя: 10x (настольный), 4x (планшет и телефон)

Интервал

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

• Верхний отступ: 269 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
• Нижний отступ: 674 пикселей (рабочий стол), 200 пикселей (планшет и телефон)

Добавить ряд

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки, перейдите к настройкам размеров и включите опцию «Сделать эту строку полной шириной».

• Сделать эту строку полной шириной: Да

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

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

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

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

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

• Шрифт заголовка: Didact Gothic
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 170 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Высота строки заголовка: 0,8 м

• Длина тени текста заголовка по вертикали: 1,5 м
• Цвет тени текста заголовка: rgba (0,0,0,0.11)

Добавить раздел # 2

Фоновый цвет

Продолжите, добавив на страницу второй раздел. Измените цвет фона в настройках раздела.

• Цвет фона: # 0f0f0f

Верхний разделитель

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

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Высота разделителя: 30 пикселей
• Повторение по горизонтали делителя: 10x (настольный), 4x (планшет и телефон)

Интервал

И увеличьте значения интервала в настройках интервала.

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

Добавить ряд

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

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

Размеры

Откройте настройки строки, перейдите к настройкам размеров и внесите некоторые изменения.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2

Добавить модуль Blurb

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

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

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

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

• Цвет значка: # 4ffcff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 150 пикселей

Интервал

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

• Верхнее поле: -550 пикселей
• Верхний отступ: 550 пикселей

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вниз
• Продолжительность анимации: 3000 мс
• Задержка анимации: 1200 мс
• Интенсивность анимации: 100%
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Анимация изображения / значка: без анимации

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

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

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

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

Продолжите, изменив настройки текста.

• Шрифт текста: Didact Gothic
• Толщина шрифта текста: полужирный
• Цвет текста: rgba (255,255,255,0,03)
• Размер текста: 350 пикселей
• Ориентация текста: по центру

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

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

Добавьте второй текстовый модуль в первый столбец с некоторым содержанием H3 по выбору.

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

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

• Шрифт заголовка 3: Didact Gothic
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 40 пикселей (рабочий стол), 30 пикселей (планшет и телефон)
• Интервал между буквами заголовка 3: -1px

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

Видимость

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

• Показать разделитель: Да

Цвет

Продолжите, изменив цвет разделителя на вкладке дизайна.

• Цвет: #ffffff

Размеры

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

• Ширина: 59%
• Выравнивание модуля: по центру

Анимация

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

• Стиль анимации: слайд
• Направление анимации: центр
• Продолжительность анимации: 2000 мс
• Интенсивность анимации: 10%
• Кривая скорости анимации: легкость выхода

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

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

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

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

Продолжите, изменив настройки текста.

• Шрифт текста Вес: Легкий
• Цвет текста: # b7b7b7
• Размер текста: 18 пикселей
• Высота текстовой строки: 1,8 м
• Ориентация текста: по центру

Анимация

И добавляем анимацию в модуль.

• Стиль анимации: слайд
• Направление анимации: вверх
• Интенсивность анимации: 20%
• Кривая скорости анимации: легкость выхода

Клонируйте модули 3 раза и размещайте дубликаты в оставшихся столбцах

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

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

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

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

Также добавьте некоторую задержку анимации к каждому дубликату модуля разделителя.

• Модуль делителя в столбце 2: 400 мс
• Модуль делителя в столбце 3: 800 мс
• Модуль делителя в столбце 4: 1200 мс

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

Сделайте то же самое для последнего текстового модуля в каждом столбце.

• Последний текстовый модуль в столбце 2: 400 мс
• Последний текстовый модуль в столбце 3: 800 мс
• Последний текстовый модуль в столбце 4: 1200 мс

Настроить значок рекламного объявления №2

Цвет значка

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

• Цвет значка: # ff6b86

Анимация

Также измените настройки анимации.

• Тип анимации: слайд
• Направление анимации: вниз
• Продолжительность анимации: 2000 мс
• Задержка анимации: 800 мс
• Интенсивность анимации: 62%
• Начальная непрозрачность анимации: 100%
• Анимация изображения / значка: без анимации

Настроить значок рекламного объявления № 3

Цвет значка

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

• Цвет значка: # ffe500

Анимация

Также измените настройки анимации.

• Тип анимации: слайд
• Направление анимации: вниз
• Продолжительность анимации: 1000 мс
• Задержка анимации: 600 мс
• Интенсивность анимации: 69%
• Начальная непрозрачность анимации: 100%
• Анимация изображения / значка: без анимации

Настроить значок рекламного объявления №4

Цвет значка

Откройте последний модуль Blurb в столбце 4 и измените цвет значка.

• Цвет значка: # 00ff9d

Анимация

И завершите дизайн, изменив настройки анимации во вкладке дизайна.

• Тип анимации: слайд
• Направление анимации: вниз
• Продолжительность анимации: 3000 мс
• Задержка анимации: 400 мс
• Интенсивность анимации: 100%
• Начальная непрозрачность анимации: 100%
• Анимация изображения / значка: без анимации

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

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