Как создать красивый анимированный контур для каждого контейнера с помощью Divi

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

Начнем воссоздавать

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

Фоновый цвет

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

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

Интервал

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

• Верхняя маржа: 3vw
• Нижняя маржа: 3vw
• Левое поле: 3vw
• Правое поле: 3vw
• Верхняя обивка: 3vw
• Нижняя обивка: 3vw

Граница

Затем откройте настройки границы и добавьте «2vw» к каждому из углов. Также используйте рамку.

• Ширина границы: 1 пикс.
• Цвет границы: # 000000

Анимация

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

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

Видимость

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

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

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

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

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

Размеры

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

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

Интервал

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

• Верхняя обивка: 3vw
• Нижняя обивка: 3vw
• Левый отступ: 3vw
• Правое заполнение: 3vw

Граница

Перейдите к настройкам границы и добавьте «2vw» к каждому из углов. Также добавьте границу.

• Ширина границы: 1 пикс.
• Цвет границы: # 000000

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вверх
• Задержка анимации: 500 мс
• Начальная непрозрачность анимации: 100%

Видимость

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Столбец 1 Настройки

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

Граница

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

• Ширина границы: 1 пикс.
• Цвет границы: # 000000

Анимация

Завершите настройки столбца, добавив собственную анимацию.

• Стиль анимации: слайд
• Направление анимации: вниз
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%

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

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

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

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

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

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

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

• Цвет значка: # 000000
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 6vw (рабочий стол), 8vw (планшет), 10vw (телефон)

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

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

• Шрифт заголовка: Poppins
• Плотность шрифта заголовка: Ультра полужирный
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 1.2vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)

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

Наряду с настройками основного текста.

• Шрифт основного текста: Open Sans
• Выравнивание основного текста: по центру
• Размер основного текста: 0.8vw (рабочий стол), 1.7vw (планшет), 2.3vw (телефон)

Интервал

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

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

Граница

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

• Ширина границы: 1 пикс.
• Цвет границы: # 000000

Анимация

Завершите дизайн модуля Blurb, добавив собственную анимацию.

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

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

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

Переходим к следующему и последнему модулю, который является кнопочным. Введите какую-нибудь копию по вашему выбору.

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

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

• Расположение кнопок: по центру

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 1.5vw (планшет), 2.2vw (телефон)
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #FFFFFF
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: # 000000
• Радиус границы кнопки: 50vw
• Шрифт кнопки: Open Sans
• Толщина шрифта кнопок: Ультра полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

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

Анимация

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

• Стиль анимации: слайд
• Направление анимации: вверх
• Задержка анимации: 1400 мс
• Интенсивность анимации: 200%
• Начальная непрозрачность анимации: 100%

Удалить столбец 2 и клонировать столбец 1

После того, как вы заполнили столбец 1 и модули в нем, вы можете удалить второй (пустой) столбец и клонировать первый. Измените все содержимое модуля Blurb в соответствии с вашим веб-сайтом, и все готово!

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

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

Рабочий стол

Мобильный

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

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

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