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

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

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

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

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

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

Рабочий стол

Мобильный

Загрузите анимированный цвет фона бесплатно

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

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

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

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

СКАЧАТЬ

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

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

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

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

Интервал

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

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

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

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

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

Размеры

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

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

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

Видимость

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

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

Фоновый цвет

Зайдите в настройки фона и добавьте следующий цвет фона:

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

Интервал

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

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

Анимация

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

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

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

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

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

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

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

• Шрифт текста: Didact Gothic
• Цвет текста: #ffffff
• Размер текста: 1.1vw (рабочий стол), 1.7vw (планшет), 2.5vw (телефон)
• Высота текстовой строки: 2,1 м
• Ориентация текста: по ширине

Настройки текста заголовка 2 по умолчанию

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

• Шрифт заголовка 2: Abril Fatface
• Цвет текста заголовка 2: # 1c1c1c
• Размер текста заголовка 2: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
• Высота строки заголовка 2: 1,8 м

Настройки текста при наведении курсора 2

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

• Цвет текста заголовка 2: #ffffff

Клонировать оба модуля

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

Изменить дубликат модуля разделителя

Изменить цвет фона

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

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

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

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

• Направление анимации: влево
• Задержка анимации: 1500 мс

Изменить дубликат текстового модуля

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

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

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

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

• Выравнивание текста заголовка 2: по правому краю
• Цвет текста заголовка 2: # 0cc9ad

Расположение разделителя

Разделительный модуль # 1

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

• Правое поле: 20vw

Разделительный модуль # 2

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

• Верхняя маржа: 2vw
• Левое поле: 20vw

Добавить перекрытия

Текстовый модуль №1

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

• Верхняя маржа: -49vh
• Правое поле: 20vw (рабочий стол), 15vw (планшет), 10vw (телефон)

Текстовый модуль # 2

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

• Верхняя маржа: -49vh
• Левое поле: 20vw (рабочий стол), 15vw (планшет), 10vw (телефон)

Закройте Visual Builder, чтобы просмотреть результат

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

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

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

Рабочий стол

Мобильный

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

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

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