Divi, Wordpress, Как это сделать

Наложение узора на фон в Divi

Наложение узора на фон в Divi

[ad_1]

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

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

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

Посмотрим что должно получиться

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

Первый макет

Фоновый узор Divi Режим наложения Макет 1 Окончательный дизайн

Второй макет

Фоновый узор Divi Режим наложения Макет 2 Окончательный дизайн

Третий макет

Фоновый узор Divi Режим наложения Макет 3 Окончательный дизайн

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

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

Итак, начнем!

Как использовать наложение узора на фон в Divi

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

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

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

Фоновый узор Divi. Режим наложения макета 3. Использование Divi Builder.

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

Режим наложения фонового узора Divi Просмотр макетов

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

Фоновый узор Divi Режим наложения Макет поиска

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

Фоновый узор Divi Режим наложения Использовать макет

Теперь всё готово, чтобы свершить задуманное.

Первый макет

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

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

Фоновый узор Divi Режим наложения Макет 1 Добавить фоновый узор

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

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

Фоновый узор Divi Режим наложения Макет 1 Выбрать узор

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

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

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

Режим наложения фонового узора Divi Режим наложения узора макета 1

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

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

Фоновый узор Divi Режим наложения Макет 1 Окончательный дизайн

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

Фоновый узор Divi Режим наложения Макет 1 Окончательный дизайн для мобильных устройств

Второй макет

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

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

Фоновый узор Divi Режим наложения Макет 2 Добавить фоновый узор

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

Фоновый узор Divi Режим наложения Макет 2 Выбор узора

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

Фоновый узор Divi Режим наложения Макет 2 Цвет узора

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

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

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

Фоновый узор Divi Режим наложения Макет 2 Выбор режима наложения

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

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

Фоновый узор Divi Режим наложения Макет 2 Окончательный дизайн

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

Фоновый узор Divi Режим наложения Макет 2 Окончательный дизайн для мобильных устройств

Третий макет

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

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

Фоновый узор Divi Режим наложения Макет 3 Добавить фоновый узор

Выберите узор «Диагональные полосы».

Фоновый узор Divi Режим наложения Макет 3 Выбор узора

Далее задайте цвет узора.

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

Фоновый узор Divi Режим наложения Макет 3 Цвет узора

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

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

Фоновый узор Divi Режим наложения Макет 3 Преобразование узора

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

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

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

Фоновый узор Divi Режим наложения Макет 3 Режим наложения

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

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

Фоновый узор Divi Режим наложения Макет 3 Окончательный дизайн

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

Фоновый узор Divi Режим наложения Макет 3 Окончательный дизайн для мобильных устройств

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

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

Фоновый узор Divi Режим наложения Полный окончательный дизайн

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

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

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

[ad_2]

Оригинал статьи

author-avatar

Автор - Wespe Club

Клуб веб-разработчиков. Наша миссия - сделать вебразработку понятной и доступной широкому кругу людей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *