Как использовать фоновую маску Divi и настройки преобразования узора

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

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

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

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

Пример 1 Результаты

Обычная версия рабочего стола

Обычная версия телефона

Альтернативная версия рабочего стола

Телефон альтернативной версии

Пример два результата

Обычная версия рабочего стола

Обычная версия телефона

Альтернативная версия рабочего стола

Телефон альтернативной версии

Пример три результата

Обычная версия рабочего стола

Обычная версия телефона

Альтернативная версия рабочего стола

Телефон альтернативной версии

Фоновая маска Divi и параметры преобразования узора

Новые функции фоновой маски и шаблона Divi включают несколько параметров для их настройки. Регулировки включают горизонтальное и вертикальное отражение, вращение и инвертирование. Чтобы просмотреть параметры, перейдите к настройкам фона раздела или строки и выберите вкладки «Фоновый узор» или «Фоновая маска».

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

Как работают настройки Divi Mask и Pattern Transform

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

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

Горизонтальное отражение

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

Вертикальное отражение

Это вертикальное отражение для шаблона и маски.

вращающийся

Это показывает Вращение для шаблона и маски.

инвертирование

В этом примере показано инвертирование шаблона и маски.

Комбинации фоновой маски и преобразования узора

Конечно, мы также можем использовать настройки преобразования в различных комбинациях. Вот несколько примеров.

Этот вращает шаблон и инвертирует маску.

В этом примере для фонового узора используется вертикальное отражение, вращение и инвертирование. Фоновая маска использует горизонтальное отражение, вертикальное отражение и вращение.

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

Примеры настроек преобразования фоновой маски и узора

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

Для своих примеров я использую модифицированную версию раздела героя с целевой страницы Estate Planning, которая доступна в Divi. Вот посмотрите на мой раздел. Модификация упрощает раздел героя для наших нужд. Он использует фон Цвет фона: #92a5ab.

• Фон: #92a5ab

Параметры преобразования фоновой маски и узора Пример 1

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

Фоновый узор

Откройте настройки раздела, прокрутите вниз до пункта « Фон » и выберите вкладку « Фоновый узор ». Выберите Tufted для фонового узора и Inverting для преобразования узора.

• Фоновый узор: Тафтинговый
• Преобразование узора: инвертирование

Фоновая маска

Выберите вкладку « Фоновая маска » и выберите «Арка» для фоновой маски. Измените цвет маски на #616d72 и установите преобразование маски на инвертирование. На этом наша первая версия арки с пучками заканчивается.

• Фоновая маска: Арка
• Цвет: #616d72
• Преобразование маски: инвертирование

Пример 1 вариант

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

• Преобразование маски: горизонтальное отражение, вертикальное отражение

Параметры преобразования фоновой маски и узора, пример второй

Для нашего второго примера мы создадим овал в центре экрана с узором внутри овала. Затем мы изменим размещение шаблона. Мы также изменим его для разных размеров экрана.

Фоновый узор

В настройках фона выберите вкладку « Фоновый узор » и выберите «Shippo» в качестве узора. Установите преобразование узора на инвертирование.

• Фоновый узор: Шиппо
• Преобразование узора: инвертирование

Фоновая маска

Затем выберите вкладку « Фоновая маска ». Выберите «Затмение» в качестве фоновой маски и наведите указатель мыши на параметры «Фон». Выберите появившийся значок планшета. Это открывает настройки устройства. Для настроек рабочего стола установите цвет на #758489. Для «Преобразования маски» выберите «Горизонтальное отражение и вращение». На этом настольная версия заканчивается. Давайте изменим его для мобильной версии.

• Фоновая маска: Затмение
• Цвет: #758489
• Преобразование маски: горизонтальное отражение, вращение

Планшет и телефон

Планшет и телефон будут использовать одни и те же настройки, поэтому нам нужно изменить только настройки планшета. Выберите вкладку Tablet и измените Mask Transform на Horizontal Flipping.

• Преобразование маски: горизонтальное отражение, инвертирование

Пример второй вариант

Далее мы создадим вариант для нашего второго примера. Сначала выберите вкладку « Фоновый узор » и установите для параметра «Цвет узора» значение rgba(0,0,0,0.06).

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

Затем перейдите на вкладку « Фоновая маска » и выберите «Горизонтальное отражение», «Вращение» и «Инверсия» для «Преобразование маски».

• Преобразование маски: горизонтальное отражение, вращение, инвертирование

Планшет и телефон

Для параметров планшета и телефона выберите значок планшета . Измените преобразование маски на горизонтальное отражение и инвертирование. Альтернативная версия второго примера завершена.

• Преобразование маски: горизонтальное отражение, инвертирование

Параметры преобразования фоновой маски и узора Пример третий

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

Фоновый узор

Сначала выберите вкладку настроек устройства и выберите значок на рабочем столе . Перейдите на вкладку « Фоновый узор » и выберите «Соты» в качестве фонового узора. Измените цвет на rgba (0,0,0,0,42). Для этого мы оставим опции Pattern Transform отключенными. Мы добавим их для альтернативной версии.

• Фоновый узор: Соты
• Цвет узора: rgba (0,0,0,0,42)
• Преобразование узора: нет

Фоновая маска

Затем выберите вкладку « Фоновая маска ». Выберите Paint для фоновой маски. Измените цвет на #697b82. Выберите Вертикальное отражение для преобразования маски.

• Фоновая маска: Краска
• Цвет: #697b82
• Преобразование маски: вертикальное отражение

Затем выберите «Обложка» для размера. Это открывает еще несколько вариантов. Выберите «Внизу справа» для позиции. Это все, что касается настольной версии. Далее мы создадим мобильную версию.

• Размер: Обложка
• Позиция: Внизу справа

Планшет и телефон

Затем выберите вкладку « Планшет » и измените « Преобразование фоновой маски» на «Отражение по вертикали и вращение». На этом оформление для нашего третьего примера завершено. Далее мы создадим альтернативную версию.

• Преобразование фоновой маски: вертикальное отражение, вращение

Пример третий вариант

Для альтернативной версии этого примера мы настроим как фоновый узор, так и фоновую маску.

Фоновый узор

Для фонового узора измените цвет узора на rgba(0,0,0,0.11). Измените преобразование узора на горизонтальное отражение, вертикальное отражение и вращение.

• Цвет узора: rgba (0,0,0,0,11)
• Преобразование шаблона: горизонтальное отражение, вертикальное отражение, вращение

Фоновая маска

Затем выберите вкладку « Фоновая маска ». Измените Цвет на белый и Преобразование маски на Отражение по горизонтали, Отражение по вертикали и Инверсию.

• Цвет: #ffffff
• Преобразование маски: горизонтальное отражение, вертикальное отражение, инвертирование

Затем измените Размер маски на Покрытие, а затем выберите Центр для положения маски.

• Маска Размер: Обложка
• Положение маски: Центр

Планшет и телефон

Наконец, выберите вкладку планшета , чтобы создать мобильную версию. Выберите вкладку « Фоновая маска » и выберите все четыре параметра «Преобразование маски». Это завершает альтернативную версию третьего примера.

• Преобразование фоновой маски: горизонтальное отражение, вертикальное отражение, вращение, инвертирование

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

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

Пример 1 Результаты

Обычная версия рабочего стола

Обычная версия телефона

Альтернативная версия рабочего стола

Телефон альтернативной версии

Пример два результата

Обычная версия рабочего стола

Обычная версия телефона

Альтернативная версия рабочего стола

Телефон альтернативной версии

Пример три результата

Обычная версия рабочего стола

Обычная версия телефона

Альтернативная версия рабочего стола

Телефон альтернативной версии

Окончание мыслей

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

Ждем вашего ответа. Вы пробовали использовать фоновую маску Divi и настройки преобразования шаблона в своих макетах Divi? Дайте нам знать об этом в комментариях.