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

Встроенные настройки фонового рисунка Divi позволяют создавать привлекательные дизайны и добавлять изюминку к фоновым изображениям на вашем веб-сайте. Вы можете использовать настройки режимов наложения, чтобы точно настроить способ наложения узора на фоновое изображение. Комбинируйте фоновые изображения, узоры и режимы наложения, чтобы создавать уникальные фоны и элементы дизайна для макета. С 24 узорами на выбор и 16 режимами наложения, не говоря уже обо всех других настройках, которые вы можете использовать для точной настройки внешнего вида узора, небо — это предел для вашего дизайна фона!

В этом уроке мы покажем вам несколько примеров того, как добавить режим наложения шаблона к фоновым изображениям на вашей странице. Следуйте инструкциям, чтобы воссоздать эти образы самостоятельно, или используйте их в качестве вдохновения для создания своих собственных дизайнов.

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

Краткий обзор

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

Первый макет

Второй макет

Третий макет

Что нужно для начала

Прежде чем мы начнем, установите и активируйте тему Divi и убедитесь, что на вашем веб-сайте установлена ​​последняя версия Divi.

Теперь давайте начнем!

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

Создайте новую страницу с готовым макетом

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

Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder».

В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Обзор макетов».

Найдите и выберите макет целевой страницы марины.

Выберите «Использовать этот макет», чтобы добавить макет на свою страницу.

Теперь мы готовы построить нашу конструкцию.

Первый макет

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

Сначала откройте настройки раздела и перейдите в раздел «Фон». Нажмите на вкладку узор и выберите Добавить фоновый узор.

Далее выберите тип узора. Как видите, есть много разных шаблонов на выбор, и все они могут быть дополнительно настроены с помощью настроек шаблона ниже.

• Тип узора: перевернутые шевроны 2

Добавление режима наложения узора

Наконец, установите режим наложения узора. Мы будем использовать режим наложения Soft Light для этого заголовка. Этот режим наложения делает узор более тонким, чтобы он не отвлекал внимание от фонового изображения.

• Режим наложения узора: Мягкий свет

Окончательный дизайн

Вот окончательный вариант нашего первого макета.

Вот мобильное представление для этого дизайна.

Второй макет

Для второго макета мы добавим шаблон в раздел «Как это работает» макета целевой страницы Marina. Мы будем использовать волнистый узор, наложенный на фоновое изображение и градиент, который хорошо сочетается с морской тематикой страницы. Давайте начнем.

Сначала перейдите в раздел «Как это работает» и откройте «Настройки раздела». Откройте настройки фона, затем выберите вкладку «Шаблон» и нажмите «Добавить фоновый узор».

Для этого дизайна мы будем использовать тип паттерна Waves.

• Узор: Волны

Затем измените цвет узора на белый.

• Цвет узора: #FFFFFF

Добавление режима наложения узора

Теперь мы можем добавить режим наложения к нашему узору. Установите режим наложения узора на наложение. Этот режим наложения делает темные цвета фонового изображения темнее, а светлые — светлее. Когда в этот раздел добавляется режим наложения, узор белой волны приобретает оттенки синего, создавая интересный эффект узора, который отлично смотрится с дизайном этой страницы.

• Режим наложения узора: наложение

Окончательный дизайн

Вот окончательный вариант раздела «Как это работает».

А вот и мобильный дизайн.

Третий макет

Приступим к нашему третьему макету. Для этого макета мы добавим несколько непрозрачных диагональных полос на фон раздела «Высочайшая безопасность и ремонт».

Начните с открытия настроек раздела и перехода к фоновому разделу. Перейдите на вкладку узор и выберите Добавить фоновый узор.

Выберите рисунок диагональных полос.

Далее установите цвет узора.

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

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

• Преобразование узора: горизонтальное

Добавление режима наложения узора

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

• Режим наложения узора: яркость

Окончательный дизайн

Вот окончательный дизайн для этого раздела.

А вот и мобильный дизайн для этого раздела.

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

Теперь давайте взглянем на полный дизайн страницы с режимами наложения узора.

Последние мысли

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

Надеюсь, этот урок вдохновил вас на внедрение некоторых шаблонов и режимов наложения в дизайн вашего веб-сайта! В качестве другого руководства по дизайну с использованием шаблонов ознакомьтесь с этим руководством, чтобы научиться создавать тонкие маски фонового узора. А для обзора различных фильтров, эффектов и режимов наложения, которые вы можете использовать с Divi, ознакомьтесь с этими статьями: Часть 1 и Часть 2. Использовали ли вы ранее шаблоны и режимы наложения Divi на фоновых изображениях? Дайте нам знать об этом в комментариях!