Как применить анимацию столкновения к элементам дизайна с помощью Divi

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

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

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

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

Пример # 1: сталкивающийся текст

Пример # 2: сталкивающиеся разделители

Пример # 3: сталкивающаяся сетка

Парение

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

Воссоздать пример №1: сталкивающийся текст

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

Состав

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

Размеры

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

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

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

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

Размеры

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

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

Интервал

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

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

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

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

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

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

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

• Шрифт заголовка: Montserrat
• Толщина шрифта заголовка: светлый
• Размер текста заголовка: 4.4vw (рабочий стол), 8.2vw (планшет), 40px (телефон)
• Высота строки заголовка: 0,7 мм

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

Видимость

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

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

Цвет

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

• Цвет: # 000000

Размеры

Также уменьшите ширину разделителя.

• Ширина: 91%

Интервал

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

• Верхнее поле: 30 пикселей

Анимация

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

• Стиль анимации: слайд
• Направление анимации: влево

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

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

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

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

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

• Шрифт заголовка: Montserrat
• Толщина шрифта заголовка: светлый
• Цвет текста заголовка: # 3f46ff
• Размер текста заголовка: 3.8vw (рабочий стол), 6.5vw (планшет), 40px (телефон)
• Высота строки заголовка: 0,8 м

Анимация

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

• Стиль анимации: слайд
• Направление анимации: влево
• Задержка анимации: 600 мс
• Интенсивность анимации: 10%

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

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

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

Добавить оставшиеся модули

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

Воссоздать пример # 2: сталкивающиеся разделители

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

Состав

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

Размеры

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

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

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

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

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

Интервал

Откройте настройки строки и измените настройки пользовательского заполнения.

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

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

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

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

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

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

• Шрифт заголовка: Montserrat
• Толщина шрифта заголовка: светлый
• Размер текста заголовка: 70 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Высота строки заголовка: 0,8 м

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 53% (рабочий стол), 100% (планшет и телефон)

Интервал

Также измените значения пользовательского заполнения.

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

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

Видимость

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

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

Цвет

Затем измените цвет разделителя.

• Цвет разделителя: # 3f46ff

Стили

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

• Стиль разделителя: Двойной

Размеры

Увеличьте также вес разделителя в настройках размеров.

• Вес разделителя: 8 пикселей

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вправо

Клонировать модуль разделителя и поместить в столбец 2

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

Изменить анимацию

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

• Стиль анимации: слайд
• Направление анимации: влево

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

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

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

Добавить оставшиеся модули

И добавьте столько модулей, сколько хотите, чтобы закончить дизайн раздела.

Воссоздать пример №3: сталкивающаяся сетка

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

Интервал

Переходим к следующему и последнему примеру! Добавьте обычный раздел и откройте настройки. Перейдите к настройкам интервалов и добавьте несколько значений пользовательского отступа:

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

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

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

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

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

Загрузить накладываемое изображение в форме

Сохраните оверлей следующей формы на рабочем столе, щелкнув правой кнопкой мыши:

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

Градиентный фон

Затем добавьте к модулю градиентный фон.

• Цвет 1: # aa2bff
• Цвет 2: # 09f7eb

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

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

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

Размеры

И включите опцию «Force Fullwidth» в настройках размеров.

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

Интервал

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

• Левое поле: 200 пикселей
• Правое поле: 200 пикселей

Анимация

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

• Стиль анимации: Zoom
• Направление анимации: центр
• Продолжительность анимации: 3000 мс
• Интенсивность анимации: 100%

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

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

Переходим ко второму ряду. Используйте следующую структуру столбцов:

Размеры

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

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 944 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

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

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

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

Значок

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

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0,83)

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

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

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

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

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

• Шрифт заголовка: Open Sans
• Плотность шрифта заголовка: полужирный
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 15 пикселей
• Интервал между заголовками: -1px
• Высота строки заголовка: 1,8 м

Размеры

И уменьшите ширину содержимого в настройках размеров.

• Ширина содержимого: 183 пикселей

Интервал

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

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

Коробка Тень

Продолжайте, придавая модулю Blurb тонкую тень прямоугольника.

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Переходы

И увеличьте продолжительность перехода в расширенной вкладке.

• Продолжительность перехода: 600 мс

Клонировать модуль Blurb 8 раз и поместить по 3 дубликата в каждый оставшийся столбец

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

Измените модуль Blurb # 1

Интервал

Откройте первый модуль Blurb и добавьте отрицательное верхнее поле.

• Верхнее поле: -340 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

Расстояние при наведении

Измените значения полей при наведении.

• Верхнее поле: -380 пикселей
• Нижнее поле: 40 пикселей
• Левое поле: -40 пикселей
• Правое поле: 40 пикселей

Закругленные углы

Продолжите, добавив «30 пикселей» в верхний левый угол модуля.

Анимация

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

• Стиль анимации: слайд
• Направление анимации: влево
• Задержка анимации: 200 мс

Измените модуль Blurb # 2

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0.93)

Интервал

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

• Верхнее поле: -340 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

Расстояние при наведении

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

• Верхнее поле: -380 пикселей
• Нижнее поле: 40 пикселей

Анимация

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

• Стиль анимации: слайд
• Направление анимации: влево
• Задержка анимации: 400 мс

Измените модуль Blurb # 3

Интервал

Переходим к третьему модулю Blurb. Добавьте отрицательное верхнее поле.

• Верхнее поле: -340 пикселей (рабочий стол), 0 пикселей (планшет и телефон)

Расстояние при наведении

Измените значения маржи при наведении курсора.

• Верхнее поле: -380 пикселей
• Нижнее поле: 40 пикселей
• Левое поле: 40 пикселей
• Правое поле: -40 пикселей

Закругленные углы

Также добавьте 30 пикселей в верхний правый угол модуля.

Анимация

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

• Стиль анимации: слайд
• Направление анимации: влево
• Задержка анимации: 600 мс

Измените модуль Blurb # 4

Фоновый цвет

Переходим к четвертому модулю. Откройте настройки и измените цвет фона.

• Цвет фона: rgba (255,255,255,0.93)

Расстояние при наведении

Затем добавьте некоторые значения маржи при наведении.

• Левое поле: -40 пикселей
• Правое поле: 40 пикселей

Анимация

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

• Стиль анимации: Затухание
• Задержка анимации: 800 мс

Измените модуль Blurb # 5

Анимация

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

• Стиль анимации: Затухание
• Задержка анимации: 1000 мс

Измените модуль Blurb # 6

Фоновый цвет

Продолжите, открыв шестой модуль и измените цвет фона.

• Цвет фона: rgba (255,255,255,0.93)

Расстояние при наведении

Также измените значения интервала при наведении.

• Левое поле: 40 пикселей
• Правое поле: -40 пикселей

Анимация

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

• Стиль анимации: Затухание
• Задержка анимации: 1200 мс

Измените модуль Blurb # 7

Расстояние при наведении

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

• Верхнее поле: 40 пикселей
• Левое поле: -40 пикселей
• Правое поле: 40 пикселей

Закругленные углы

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

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вправо
• Задержка анимации: 1400 мс

Измените модуль Blurb # 8

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0.93)

Расстояние при наведении

Добавьте немного настраиваемого поля при наведении курсора на следующий модуль.

• Верхнее поле: 40 пикселей

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вправо
• Задержка анимации: 1600 мс

Измените модуль Blurb # 9

Расстояние при наведении

Переходим к девятому и последнему модулю! Перейдите к настройкам интервалов и добавьте несколько пользовательских значений полей при наведении.

• Верхнее поле: 40 пикселей
• Левое поле: 40 пикселей
• Правое поле: -40 пикселей

Закругленные углы

Также добавьте 30 пикселей радиуса границы в нижний правый угол.

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вправо
• Задержка анимации: 1800 мс

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

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

• Нижнее поле: -520 пикселей

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

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

Пример # 1: сталкивающиеся разделители

Пример # 2: сталкивающийся текст

Пример # 3: сталкивающаяся сетка

Парение

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

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