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

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

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

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

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

Рабочий стол

Мобильный

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

Загрузите макет анимации конверта БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Восстановить структуру элемента

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

Фоновый цвет

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

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

Интервал

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

• Верхняя обивка: 5vw
• Нижний отступ: 0 пикселей

Переполнения

И скрыть переливы разделов.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

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

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

Фоновый цвет

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

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

Размеры

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

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

Интервал

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

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

Граница

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

• Все углы: 20 пикселей

Коробка Тень

Мы также используем тонкую тень блока.

• Положение прямоугольной тени по вертикали: 38 пикселей
• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0.08)

Индекс Z

Завершите настройки строки, увеличив z-индекс на вкладке «Дополнительно».

• Индекс Z: 11

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

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

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

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

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

• Шрифт заголовка 2: Poppins
• Размер текста заголовка 2: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

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

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

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

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

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

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

Интервал

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

• Верхняя прокладка: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Нижняя прокладка: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

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

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

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

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

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

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

• Радиус границы кнопки: 100 пикселей
• Шрифт кнопки: Поппинс

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

Отображать

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

display: flex;

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

Оставьте поле изображения пустым

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

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

Вместо этого мы используем градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # e8e8e8
• Тип градиента: линейный
• Направление градиента: 150 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

Интервал

Соответственно измените значения заполнения модуля:

• Верхняя обивка: 15vw
• Нижняя обивка: 15vw

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

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

Изменить градиентный фон

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

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #efefef
• Тип градиента: линейный
• Направление градиента: 210 градусов
• Стартовая позиция: 50%
• Конечная позиция: 50%

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

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

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

Размеры

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

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

Интервал

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

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

Отображать

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

display: flex;

Индекс Z

Завершите настройки строки, увеличив z-индекс на вкладке «Дополнительно».

• Индекс Z: 12

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

Оставьте поле изображения пустым

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

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

Вместо этого используйте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #efefef
• Тип градиента: линейный
• Направление градиента: 213 градусов
• Стартовая позиция: 40%
• Конечная позиция: 40%

Интервал

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

• Верхняя обивка: 20vw
• Нижняя обивка: 20vw

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

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

Изменить градиентный фон

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

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: # e8e8e8
• Тип градиента: линейный
• Направление градиента: 147 градусов
• Стартовая позиция: 40%
• Конечная позиция: 40%

Добавить вертикальное движение в строку №1

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

• Включить вертикальное движение: Да
• Начальное смещение:
  • ПК: 0 (при 68%)
  • Таблетка: 0,5 (61%)
  • Телефон: 0,5 (при 43%)
• Среднее смещение:
  • ПК: 6,5 (при 81%)
  • Планшет и телефон: 21,5 (82%)
• Конечное смещение:
  • Настольный компьютер: 16 (при 95%)
  • Планшет и телефон: 21,5 (82%)

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

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

Рабочий стол

Мобильный

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

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

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