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

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

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

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

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

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

обследование

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

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

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

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

Создайте новую страницу с помощью Divi Builder

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

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Линии Divi преобразованы во вкладки

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

Линии Divi преобразованы во вкладки

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

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

Создание заголовка в качестве содержимого-заполнителя

Читайте также: Divi: Как создать вкладки с эффектом наведения из линий

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

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

Добавьте текст размера H1.

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

  • Шрифт: Roboto Condensed
  • Вес шрифта: полужирный
  • Стиль: ТТ
  • Выравнивание текста: по центру
  • Цвет текста: #000000
  • Размер текста заголовка: 4vw
  • Расстояние между буквами: 0.1em
  • Высота строки: 1.3 см

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

Добавлено дополнение к разделу

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

  • Прокладка (сверху и снизу): 15vw

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

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

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

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

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

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

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

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

Под вкладкой Фоновая маска, добавьте следующее:

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

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

Линейный дизайн фона

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

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

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

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

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

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

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

  • Ширина: 75vw
  • Максимальная ширина: 75vw
  • Прокладка (сверху, снизу, слева и справа): 10vw

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

Далее нам нужно настроить остановки градиента на фоне линии для плавного перехода к градиенту фона раздела.

Под вкладкой Фоновый градиент, мы сохраним три средние точки градиента, унаследованные от фона раздела) и удалим первую и последнюю точки градиента.

Затем установите первую остановку на 0%, а третью остановку на 100%. После этого у вас должны получиться следующие градиенты.

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

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

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

  • Box Shadow: см. снимок экрана
  • Вертикальное положение: 0px
  • Box Shadow Blur Сила: 4vw
  • Цвет тени: rgba(0,0,0,0.5)

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

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

Под опцией Фоновый узор строку, обновите следующее:

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

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

Мы также можем обновить цвет маски для линии, чтобы дизайн действительно выделялся.

Под вкладкой Фоновая маска, обновите следующее:

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

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

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

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

Скачайте DIVI прямо сейчас!!!

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

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

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

Смотрите также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения

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

Скачайте DIVI прямо сейчас!!!

Заключение

Ключом к созданию плавных переходов дизайна фона в Divi является разумное использование этих единиц длины VW.

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

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...