Вы хотите создать фоновые переходы между элементами Divi ?
Создавайте плавные переходы фонового дизайна между элементами Divi отличный способ улучшить дизайн вашего Веб-сайт Divi.
Это позволяет вам плавно переходить градиент, узор и фоновую маску между линией и участком творческим способом.
Например, у вас может быть узор или маска перехода разных цветов без потери общего выравнивания и симметричного вида дизайна.
В этом уроке мы будем использовать встроенные параметры дизайна фона Divi, чтобы создать плавный переход дизайна фона между разделом Divi и линией. Применение и универсальность этого дизайна безграничны, что выводит возможности дизайна фона Divi на совершенно новый уровень!
Давайте начнем.
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Вот несколько других примеров дизайна, которые возможны с помощью нескольких простых изменений масок и фоновых узоров.
Создайте новую страницу с помощью Divi Builder
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в 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 является разумное использование этих единиц длины VW.
Во-первых, нам нужно создать дизайн фона раздела, который соответствует ширине области просмотра браузера (от центра страницы). После этого мы можем использовать тот же однострочный дизайн фона. После этого у нас есть несколько настроек градиента и цвета для потрясающего дизайна.
Надеюсь, эта техника добавит еще один полезный дизайнерский навык для будущих проектов.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...