Как создать плавные переходы фона между элементами Divi

Опубликовано: 2022-05-27

Создание плавных переходов фонового дизайна между элементами Divi — отличный способ улучшить дизайн вашего веб-сайта Divi. Идея состоит в том, чтобы создать одинаковые фоновые рисунки (как для строки, так и для раздела), которые имеют одинаковый размер и положение в зависимости от ширины браузера (используя единицы длины vw). Это позволяет вам плавно переходить фоновый градиент, узор и маску между строкой и секцией творческим образом. Например, у вас может быть переход шаблона или маски в разные цвета без потери общего выравнивания и симметричного аспекта дизайна.

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

Давайте начнем.

Краткий обзор

Вот краткий обзор дизайна, который мы создадим в этом уроке.

плавные переходы дизайна фона в divi

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

плавные переходы дизайна фона в divi

плавные переходы дизайна фона в divi

плавные переходы дизайна фона в divi

Скачайте макет БЕСПЛАТНО

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

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

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

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

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

Чтобы импортировать макет раздела в вашу библиотеку Divi, сделайте следующее:

  1. Перейдите в библиотеку Divi.
  2. Нажмите кнопку Импорт в верхней части страницы.
  3. Во всплывающем окне переносимости выберите вкладку импорта.
  4. Выберите файл для загрузки со своего компьютера (не забудьте сначала разархивировать файл и использовать файл JSON).
  5. Затем нажмите кнопку импорта.

окно уведомлений

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к учебнику, не так ли?

Что нужно для начала

Для начала вам нужно будет сделать следующее:

  1. Если вы еще этого не сделали, установите и активируйте тему Divi.
  2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
  3. Выберите вариант «Создать с нуля».

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

плавные переходы дизайна фона в divi

Создание плавного перехода фона между разделом Divi и строкой

Часть 1. Создание заголовка в качестве фиктивного содержимого

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

плавные переходы дизайна фона в divi

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

плавные переходы дизайна фона в divi

Добавьте заголовок H1 к содержимому тела.

плавные переходы дизайна фона в divi

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

плавные переходы дизайна фона в divi

2. Дизайн фона раздела

Добавление заполнения VW в раздел

Как только фиктивный заголовок будет на месте, откройте настройки раздела и обновите интервал следующим образом:

  • Набивка: верх 15vw, низ 15vw

плавные переходы дизайна фона в divi

Добавление фонового градиента к разделу

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

  • Остановка градиента 1: #4f0f75 (при 0%)
  • Остановка градиента 2: # 2843c9 (при 25%)
  • Остановка градиента 3: #4ae2e0 (при 50%)
  • Остановка градиента 4: # 3881ff (при 75%)
  • Остановка градиента 5: #4f0f75 (при 100%)

плавные переходы дизайна фона в divi

Добавление фонового узора в раздел

На вкладке «Шаблон» обновите следующее:

  • Узоры: диагональные полосы
  • Цвет узора: rgba (79,15,117,0,23)
  • Преобразование узора: поворот
  • Размер узора: нестандартный размер
  • Ширина узора: 7vw
  • Высота узора: 5vw
  • Происхождение повторения шаблона: Центр

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

плавные переходы дизайна фона в divi

Добавление фоновой маски к разделу

На вкладке «Маска» добавьте следующее:

  • Фоновая маска: Слой-клякса
  • Цвет маски: rgba(0,0,0,0,7)
  • Размер маски: 100vw
  • Положение маски: Центр

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

плавные переходы дизайна фона в divi

3. Создание фона строки

Скопируйте и вставьте фон раздела в фон строки

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

плавные переходы дизайна фона в divi

Затем вставьте фон в существующую строку.

плавные переходы дизайна фона в divi

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

Отрегулируйте размер и заполнение строки с помощью VW

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

  • Ширина: 75vw
  • Максимальная ширина: 75vw
  • Набивка: 10vw вверху, 10vw внизу, 10vw слева, 10vw справа

плавные переходы дизайна фона в divi

Обзор интервалов и размеров в единицах длины VW

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

плавные переходы дизайна фона в divi

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

плавные переходы дизайна фона в divi

Отрегулируйте остановки градиента в строке

Далее нам нужно настроить остановки градиента на фоне строки для плавного перехода к градиенту фона раздела. На вкладке «Градиент» мы сохраним три средних точки градиента, унаследованные от фона раздела, и удалим первую и последнюю точки градиента. Затем установите первую остановку на 0%, а третью остановку на 100%. После этого у вас должны получиться следующие градиенты.

  • Остановка градиента 1: #2843c9 (при 0%)
  • Остановка градиента 2: #4ae2e0 (при 50%)
  • Остановка градиента 3: #3881ff (при 100%)

плавные переходы дизайна фона в divi

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

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

  • Box Shadow: см. снимок экрана
  • Коробчатая тень по вертикали: 0px
  • Box Shadow Blur Strength: 4vw
  • Цвет тени коробки: rgba (0,0,0,0,5)

плавные переходы дизайна фона в divi

Настройка цвета фонового узора строки

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

  • Цвет узора: rgba (255 255 255, 0,23)

плавные переходы дизайна фона в divi

Настройка цвета фоновой маски строки

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

  • Цвет маски: #ffffff
  • Преобразование Маски: Перевернуто

плавные переходы дизайна фона в divi

Конечный результат

Давайте проверим окончательный результат.

плавные переходы дизайна фона в divi

Больше возможностей

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

плавные переходы дизайна фона в divi

плавные переходы дизайна фона в divi

плавные переходы дизайна фона в divi

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!