Вы хотите объединить настройки фоновой маски и параметры преобразования узора? Divi создавать уникальные фоны?
Дизайн фона — отличный способ придать вашему Веб-сайт визуальное чутье и выделиться из толпы. Новые настройки «Фоновая маска» и «Преобразование узора» из Divi можно комбинировать разными способами для создания этих фоновых узоров.
В этой статье мы увидим, как использовать фоновую маску и настройки преобразования узора из Divi для создания интересных фонов для ваших макетов Divi.
Давайте начнем.
обследование
Во-первых, вот предварительный просмотр каждого примера на разных размерах экрана (телефон и рабочий стол).
Читайте также: Divi: как использовать эффекты тени и наведения для создания интерактивного контента
Пример 1
Версия 1 на рабочем столе
Версия 1 на телефоне
Скачайте DIVI прямо сейчас!!!
Версия 2 на рабочем столе
Версия 2 на телефоне
Пример 2
Версия 1 на рабочем столе
Версия 1 на телефоне
Скачайте DIVI прямо сейчас!!!
Версия 2 на рабочем столе
Версия 2 на телефоне
Пример 3
Версия 1 на рабочем столе
Версия 1 на телефоне
Скачайте DIVI прямо сейчас!!!
Версия 2 на рабочем столе
Версия 2 на телефоне
Фоновая маска Divi и параметры преобразования узора
Новые функции маски и фонового рисунка Divi включают несколько параметров для их настройки. Регулировки включают горизонтальное и вертикальное отражение, вращение и инверсию. Чтобы просмотреть параметры, перейдите к настройкам фона раздела или линии и выберите вкладки Фоновый узор или Фоновая маска.
После добавления узора или маски появляются настройки преобразования. Просто нажмите на параметры, которые вы хотите использовать. Мы можем использовать их вместе и в любой комбинации, какой захотим.
Как работают настройки Divi Mask и Pattern Transform
Шаблон ниже представляет собой зигзаг с настройками по умолчанию.
Мы добавляем маску Layer Blog на изображении ниже. Давайте используем их, чтобы продемонстрировать, как работают настройки Background Mask и Pattern Transform.
Горизонтальный флип
Это горизонтальный разворот. Мы применили настройки преобразования как к узору, так и к маске.
Вертикальный флип
Это вертикальное отражение узора и маски.
Вращение
Здесь показано вращение для шаблона и маски.
Обеспечить регресс
В этом примере показано инвертирование шаблона и маски.
Комбинации фоновой маски и преобразования узора
Конечно, мы также можем использовать параметры преобразования в различных комбинациях. Вот несколько примеров.
Это вращает шаблон и инвертирует маску.
В этом примере для фонового узора используется вертикальное отражение, вращение и инверсия. Фоновая маска использует горизонтальное отражение, вертикальное отражение и вращение.
В этом примере мы использовали горизонтальное отражение и вращение для фонового узора и вертикальное отражение и вращение для фоновой маски.
Примеры настроек фоновой маски и преобразования узора
Далее давайте посмотрим, как эти настройки можно использовать с макетами Divi. Мы будем использовать один раздел в качестве отправной точки и создадим три примера. Мы настроим его, а затем используем параметры преобразования, чтобы изменить его для каждого примера.
В наших примерах мы используем модифицированную версию раздела «Герой» целевой страницы макета. Планирование недвижимости доступны в Диви.
Вот обзор рассматриваемого раздела. Он использует цвет фона: #92a5ab.
- Фон: #92a5ab
Маска фона и параметры преобразования узора Пример 1
Наш первый пример дает нам арку, расположенную вертикально в центре экрана. Одна сторона экрана имеет тафтинговый рисунок. Далее мы создадим альтернативную версию с дугой, обращенной в другую сторону.
фоновый узор
Откройте настройки раздела, прокрутите вниз до проверка данных и выберите вкладку Фоновый узор. Выберите Tufted для фонового рисунка и Inverting для Pattern Transform.
- Фоновый узор: Тафтинговый
- Преобразование шаблона: Обратное
Фоновая маска
Выберите вкладку Фоновая маска и выберите Арка для фоновой маски. Измените цвет маски на #616d72 и установите преобразование маски на Invert. На этом наша первая версия банта с пучками закончена.
- Фоновая маска: Арка
- Цвет маски: #616d72
- Преобразование маски: инвертировать
Пример 1 Версия 2
Далее, давайте создадим вариант нашего дизайна. Просто измените преобразование маски для фонового рисунка при горизонтальном и вертикальном отражении. Это изменяет арку, чтобы она смотрела в другом направлении, и смещала рисунок, поэтому он не выглядел просто как зеркальное отражение.
- Преобразование маски: отразить по горизонтали, отразить по вертикали
Маска фона и параметры преобразования узора Пример 2
Для нашего второго примера мы создадим овал в центре экрана с узором внутри овала. Далее мы изменим размещение шаблона. Мы также изменим его для разных размеров экрана.
Фоновый узор
В настройках фона выберите вкладку Фоновый узор и выберите Shippo для мотива. Установите преобразование шаблона на инвертировать.
- Фоновый узор: Шиппо
- Преобразование шаблона: Обратное
Фоновая маска
Затем выберите вкладку Фоновая маска и измените следующие настройки.
- Фоновая маска: Эллипс
- Цвет: #758489
- Преобразование маски: горизонтальное отражение, вращение
Планшет и телефон
И планшет, и телефон будут использовать одни и те же настройки, поэтому нам останется только изменить настройки планшета. Выберите Вкладка "Планшет" и изменить трансформация маски в горизонтальном развороте.
- Преобразование маски: горизонтальное отражение, инверсия
Пример 2 Версия 2
Далее мы создадим вариант для нашего второго примера. Сначала выберите вкладку Фоновый узор и установите цвет узора на rgba (0,0,0,0.06).
- Цвет узора: rgba (0,0,0,0.06)
Затем выберите вкладку Фоновая маска и выберите «Отразить по горизонтали», «Повернуть» и «Инвертировать» для преобразования маски.
- Преобразование маски: горизонтальное отражение, вращение, инверсия
Планшет и телефон
Для вариантов планшета и телефона выберите значок Таблетка. Измените трансформация маски в горизонтальном развороте и инверсии. Альтернативная версия второго примера завершена.
- Преобразование маски: горизонтальное отражение, инверсия
Маска фона и параметры преобразования узора Пример 3
Для нашего третьего примера настроек преобразования маски и узора мы будем использовать сотовый узор с маской краски. Мы также создадим мобильную версию для этого.
фоновый узор
Сначала выберите вкладку «Настройки устройства» и выберите значок «Устройство». бюро. Выберите вкладку Фоновый узор и выберите Honeycomb для фонового рисунка. Измените цвет на rgba (0,0,0,0.42). Для этого мы оставим варианты Преобразование шаблона деактивирован. Мы добавим их для альтернативной версии.
- Фоновый узор: Соты
- Цвет узора: rgba (0,0,0,0.42)
- Преобразование узора: нет
Фоновая маска
Затем выберите вкладку Фоновая маска. Выберите Покраска для фоновой маски. Измените цвет на #697b82. Выберите «Отразить по вертикали» для преобразования маски.
- Фоновая маска: Краска
- Цвет маски: #697b82
- Преобразование маски: вертикальное отражение
Затем выберите Обложка для размера. Это открывает еще несколько вариантов. Выбирать Нижний правый для местоположения. Вот и все для настольной версии. Далее мы создадим мобильную версию.
- Маска Размер: Обложка
- Положение маски: внизу справа
Планшет и телефон
Затем выберите вкладку планшет и изменить преобразование театр масок фон в вертикальном флипе и вращении. Это завершает стиль для нашего третьего примера. Далее мы создадим альтернативную версию.
- Преобразование маски: вертикальное отражение, вращение
Пример 3 Версия 2
Для альтернативной версии этого примера мы настроим как фоновый узор, так и фоновую маску.
фоновый узор
Для фонового узора измените цвет узора на rgba(0,0,0,0.11). Измените преобразование узора на отражение по горизонтали, отражение по вертикали и вращение.
- Цвет маски: rgba(0,0,0,0.11)
- Преобразование маски: горизонтальное отражение, вертикальное отражение, вращение
фоновая маска
Затем выберите вкладку Фоновая маска. Измените цвет на белый и трансформируйте маску в горизонтальное отражение, вертикальное отражение и инверсию.
- Цвет маски: #ffffff
- Преобразование маски: горизонтальное отражение, вертикальное отражение, инверсия
Затем измените размер маски на покрытие, затем выберите «Центр» для положения маски.
- Маска Размер: Обложка
- Положение маски: центр
Планшет и телефон
Наконец выберите вкладку таблетки создать мобильную версию. Выберите вкладку фоновая маска и выберите четыре варианта преобразования маски. Это завершает альтернативную версию третьего примера.
- Преобразование маски: горизонтальное отражение, вертикальное отражение, вращение, инверсия
Окончательные результаты
Вот обзор каждого примера с разными размерами экрана (настольный компьютер и телефон).
Пример 1
Версия 1 на рабочем столе
Версия 1 на телефоне
Версия 2 на рабочем столе
Версия 2 на телефоне
Пример 2
Версия 1 на рабочем столе
Версия 1 на телефоне
Версия 2 на рабочем столе
Версия 2 на телефоне
Пример 3
Версия 1 на рабочем столе
Версия 1 на телефоне
Версия 2 на рабочем столе
Версия 2 на телефоне
Скачайте DIVI прямо сейчас!!!
Смотрите также: Divi: Как создать раздел участников команды в виде карусели
Заключение
Это наш взгляд на то, как использовать фоновую маску Divi и настройки преобразования узора для создания множества интересных фоновых узоров.
Поскольку шаблоны и маски можно использовать вместе, их настройки преобразования также можно использовать вместе. Это открывает множество вариантов дизайна, давая вам еще большеинструменты чтобы добавить элегантности вашему фону Divi.
Лучший способ научиться их использовать — поиграть с настройками и посмотреть, что вы можете создать.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
