Вы хотите создать уникальные фоновые изображения, используя режим смешивания шаблонов Divi ?
Встроенные настройки фонового рисунка Divi позволяют создавать привлекательные дизайны и добавлять стиль к фоновым изображениям вашего Веб-сайт. Вы можете использовать настройки режима наложения, чтобы точно настроить, как узор смешивается с фоновым изображением.
В этом уроке мы покажем вам несколько примеров того, как добавить режим наложения узора к фоновым изображениям вашей страницы. Следуйте им, чтобы воссоздать эти образы самостоятельно, или используйте их в качестве вдохновения для создания своих собственных дизайнов.
Давайте начнем!
обследование
Вот предварительный просмотр того, что мы будем разрабатывать в этом уроке.
Первый макет
Второй макет
Третий макет
Как использовать режимы наложения узоров на фоновых изображениях Divi
Создайте новую страницу с предопределенным макетом
Мы начнем с использования предопределенного макета из библиотеки. Divi. Для этого дизайна мы будем использовать « Целевая страница Марины "Из Пакет макетов пристани .
Добавьте новую страницу в свой Веб-сайт и дайте ему название, затем выберите параметр «Использовать Divi Builder».
В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите Просмотр макетов.
Найдите и выберите макет Целевая страница Марины.
выбрать Использовать этот макет чтобы добавить макет на свою страницу.
Теперь мы готовы к дизайну.
Первый макет
Для нашего первого дизайна мы добавим узор шеврона к первому изображению заголовка. Это добавит некоторый визуальный интерес к заголовку.
Читайте также: Divi: Как настроить модуль «Таймер обратного отсчета» с помощью GIF
Из-за режима наложения, который мы применим, узор будет более тонким, но фоновое изображение все еще будет видно.
Для начала откройте настройки раздела и перейдите в раздел проверка данных . Нажмите на вкладку Фоновый узор и выберите Добавить фоновый узор.
Далее выберите тип узора. Как видите, существует множество различных шаблонов на выбор, и все они могут быть дополнительно настроены с помощью параметров шаблона, приведенных ниже.
- Тип узора: Перевернутая елочка 2
Добавлен режим «Смешение узоров».
Наконец, установите режим наложения узора. Мы будем использовать режим наложения Мягкий свет для этого примера. Этот режим наложения делает узор более тонким, чтобы он не отвлекал внимание от фонового изображения.
- Режим наложения узора: Мягкий свет
Результат
Вот окончательный дизайн нашего первого примера.
Вот мобильная версия.
Второй макет
Для второго макета мы будем использовать волнистый узор, наложенный на фоновое изображение и градиент, который хорошо сочетается с морской тематикой страницы.
Сначала перейдите в раздел "Как это работает" и откройте настройки раздела.
Открыть настройки проверка данных , затем выберите вкладку Фоновый узорИ нажмите Добавить фоновый узор.
Для этого дизайна мы будем использовать тип шаблона Waves.
- Узор: Волны
Затем измените цвет узора на белый.
- Цвет узора: #FFFFFF
Добавлен режим смешивания узоров
Теперь мы можем добавить режим наложения к нашему узору. Установите режим наложения узора на Наложение.
Узнайте также: Divi: Как настроить иконки корзины и поиска модуля "Полноширинное меню"
Этот режим наложения затемняет темные цвета фонового изображения и осветляет светлые.
- Режим наложения узора: наложение
Результат
Вот окончательный результат второго примера, примененного к разделу "Как это работает".
А вот и мобильная версия.
Третий макет
Начнем наш третий макет.
Для этого макета мы добавим непрозрачные диагональные полосы на фон " Призыв к действию".
Начните с открытия настроек раздела и перейдите в раздел проверка данных . Нажмите на вкладку Фоновый узор, затем выберите Добавить фоновый узор.
Выбрать узор Диагональные полосы.
Далее установите цвет узора.
- Цвет узора: rgba (255,255,255,0.25 XNUMX XNUMX, XNUMX)
Отразите узор по горизонтали, используя настройки Transform Pattern. Это еще один параметр, который может помочь вам настроить шаблон по своему вкусу.
- Преобразование узора: горизонтальное
Добавлен режим смешивания узоров
Наконец, установите режим наложения узора. Для этого дизайна мы будем использовать режим наложения светимость.
Также прочитайте наше руководство по: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения
Это, в сочетании с нашим цветом шаблона, добавляет яркий экран к изображению, позволяя фотографии просвечиваться. Благодаря этому дизайну изображение лодки больше выделяется на фоне, так как узор добавляет характерный контраст.
- Режим наложения узора: яркость
Результат
Вот окончательный дизайн для этого раздела.
А вот и его мобильная версия.
Конечный результат
Теперь давайте взглянем на полный дизайн страницы с режимами наложения узоров.
Скачайте DIVI прямо сейчас!!!
Заключение
Добавление узора может быть отличным способом добавить визуального интереса к фоновому изображению, но иногда узор может подавлять фоновое изображение. К счастью, Divi поставляется с множеством режимов наложения, поэтому вы можете настраивать шаблоны так, как хотите.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
