Хотели бы вы объединить настройки фоновой маски и параметры преобразования шаблона 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 к изображению ниже. Давайте используем её, чтобы продемонстрировать, как работают настройки фоновой маски и преобразования узора.
Горизонтальный флип
Это горизонтальное отражение. Мы применили параметры преобразования как к шаблону, так и к маске.
Вертикальный флип
Это вертикальное отражение узора и маски.
Вращение
Здесь показано вращение для шаблона и маски.
Обеспечить регресс
В этом примере показано инвертирование шаблона и маски.
Комбинации фоновой маски и преобразования узора
Конечно, мы также можем использовать параметры преобразования в различных комбинациях. Вот несколько примеров.
Это вращает шаблон и инвертирует маску.
В этом примере для фонового рисунка используются вертикальное отражение, вращение и инверсия. Фоновая маска использует горизонтальное отражение, вертикальное отражение и вращение.
В этом примере мы использовали горизонтальное отражение и вращение для фонового рисунка, а также вертикальное отражение и вращение для фоновой маски.
Примеры настроек фоновой маски и преобразования узора
Далее давайте посмотрим, как эти настройки можно использовать с макетами Divi. Мы будем использовать один раздел в качестве отправной точки и создадим три примера. Мы настроим его, а затем используем параметры преобразования, чтобы изменить его для каждого примера.
В наших примерах мы используем модифицированную версию раздела «Герой» целевой страницы макета. Планирование недвижимости доступны в Диви.
Вот предварительный просмотр рассматриваемого раздела. В нем используется цвет фона: #92a5ab.
- Фон: #92a5ab
Маска фона и параметры преобразования узора Пример 1
В первом примере мы видим арку, расположенную вертикально в центре экрана. Одна сторона экрана имеет ворсистый узор. Далее мы создадим альтернативный вариант, в котором арка будет обращена в противоположную сторону.
фоновый узор
Откройте настройки раздела, прокрутите вниз до Предыстория et sélectionnez l'onglet Фоновый узор. Выберите «Ворсистый» для фонового узора и «Инвертированный» для преобразования узора.
- Фоновый узор: Тафтинговый
- Преобразование шаблона: Обратное
Фоновая маска
Выберите вкладку Фоновая маска и выберите Арка Для фоновой маски измените цвет маски на #616d72 и установите преобразование маски на «Инвертировать». На этом завершается создание первой версии банта с пучками волос.
- Фоновая маска: Арка
- Цвет маски: #616d72
- Преобразование маски: инвертировать
Пример 1 Версия 2
Далее, давайте создадим вариант нашего дизайна. Просто измените преобразование маски Для изменения фонового рисунка необходимо перевернуть его по горизонтали и вертикали. Это изменит направление арки и сместит рисунок, так что он не будет выглядеть просто как зеркальное отражение.
- Преобразование маски: отразить по горизонтали, отразить по вертикали
Маска фона и параметры преобразования узора Пример 2
Во втором примере мы создадим овал в центре экрана с узором внутри. Затем изменим расположение узора. Также адаптируем его для разных размеров экрана.
Фоновый узор
В настройках фона выберите вкладку Фоновый узор и выберите Shippo для мотива. Установите преобразование шаблона на инвертировать.
- Фоновый узор: Шиппо
- Преобразование шаблона: Обратное
Фоновая маска
Далее выберите вкладку Фоновая маска и измените следующие настройки.
- Фоновая маска: Эллипс
- Цвет: #758489
- Преобразование маски: горизонтальное отражение, вращение
Планшет и телефон
И планшет, и телефон будут использовать одни и те же настройки, поэтому нам нужно изменить только настройки планшета. Выберите Вкладка "Планшет" и изменить трансформация маски в горизонтальном развороте.
- Преобразование маски: горизонтальное отражение, инверсия
Пример 2 Версия 2
Далее мы создадим вариант для нашего второго примера. Сначала выберите вкладку Фоновый узор и установите цвет узора на rgba (0,0,0,0.06).
- Цвет узора: rgba (0,0,0,0.06)
Далее выберите вкладку Фоновая маска и выберите «Отразить по горизонтали», «Повернуть» и «Инвертировать» для преобразования маски.
- Преобразование маски: горизонтальное отражение, вращение, инверсия
Планшет и телефон
Для выбора планшета или телефона выберите соответствующий значок. Таблетка. Измените трансформация маски при горизонтальном переворачивании и изменении направления. Альтернативная версия второго примера теперь завершена.
- Преобразование маски: горизонтальное отражение, инверсия
Маска фона и параметры преобразования узора Пример 3
В качестве третьего примера использования параметров маски и преобразования узора мы возьмем сотовый узор с маской для рисования. Мы также создадим его мобильную версию.
фоновый узор
Сначала выберите вкладку «Настройки устройства» и выберите значок бюро. Выберите вкладку Фоновый узор и выберите «Соты» в качестве фонового узора. Измените цвет на 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...