Наложение узора на фон в Divi
[ad_1]
Наложение узора на фон в Divi Theme позволяют создавать привлекательный дизайн и добавлять изюминку фоновым изображениям на сайте. Вы можете использовать настройки режимов наложения, чтобы точно настроить способ смешивания узора с фоновым изображением. Комбинируйте фоновые изображения, узоры и режимы наложения, чтобы создавать уникальные фоны и элементы дизайна для вашего макета. Имея на выбор 24 узора и 16 режимов наложения, не говоря уже обо всех других настройках, которые вы можете использовать для точной настройки внешнего вида узора, для вашего фонового дизайна нет предела!
В этом уроке мы покажем вам несколько примеров того, как добавить режим наложения узора к фоновым изображениям на вашей странице. Следуйте инструкциям, чтобы воссоздать эти образы самостоятельно или использовать их в качестве вдохновения для создания своих собственных дизайнов.
Давайте начнем!
Посмотрим что должно получиться
Вот предварительный просмотр того, что мы будем создавать в этом уроке.
Первый макет
Второй макет
Третий макет
Что вам нужно для начала
Прежде чем мы начнем, установите и активируйте тему Divi и убедитесь, что на вашем сайте установлена последняя версия Divi.
Итак, начнем!
Как использовать наложение узора на фон в Divi
Создайте новую страницу с готовым макетом
Мы начнем с использования готового макета из библиотеки Divi. Для этого дизайна мы будем использовать целевую страницу Marina с сайта Пакет макетов для марины.
Добавьте новую страницу на сайт и дайте ей название, затем выберите опцию «Использовать Divi Builder».
Для этого примера мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Просмотр макетов».
Найдите и выберите макет целевой страницы Marina.
Выберите «Использовать этот макет», чтобы добавить макет на свою страницу.
Теперь всё готово, чтобы свершить задуманное.
Первый макет
В первом макете мы добавим узор к первому блоку страницы. Это добавит визуальной привлекательности заголовку. Благодаря режиму наложения, который мы применим, узор будет более воздушным и фоновое изображение будет хорошо видно.
Сначала откройте настройки раздела и перейдите в раздел «Фон». Нажмите на вкладку «Узор» и выберите «Добавить фоновый узор».
Далее выберите тип узора. Как видите, существует множество различных шаблонов на выбор, и все их можно дополнительно настроить с помощью настроек шаблона ниже.
- Тип узора: Перевернутый шеврон 2
Добавление режима наложения узора
Наконец, установите режим наложения узора. Для этого заголовка мы будем использовать режим наложения Soft Light. Этот режим наложения делает узор более тонким и не отвлекает от фонового изображения.
- Режим наложения узора: Мягкий свет
Окончательный дизайн
Вот окончательный вариант нашего первого макета.
Вот мобильная версия этого дизайна.
Второй макет
Для второго макета мы добавим фоновый узор в раздел «Как это работает». Мы будем использовать волновой узор, наложенный на фоновое изображение, и градиент, который хорошо сочетается с морской тематикой страницы. Давайте начнем.
Сначала перейдите в раздел «Как это работает» и откройте «Настройки раздела». Откройте настройки фона, затем выберите вкладку «Узор» и нажмите «Добавить фоновый узор».
Для этого дизайна мы будем использовать тип паттерна «Волны».
Далее измените цвет узора на белый.
Добавление режима наложения узора
Теперь мы можем добавить режим наложения к нашему узору. Установите режим наложения узора на Overlay. Этот режим наложения делает темные цвета фонового изображения темнее, а светлые — светлее. Когда в этот раздел добавляется режим наложения, белый волнистый узор приобретает оттенки синего, создавая интересный эффект узора, который отлично сочетается с дизайном этой страницы.
- Режим наложения узора: Overlay
Окончательный дизайн
Вот окончательный вариант раздела «Как это работает».
А вот и мобильный дизайн.
Третий макет
Давайте приступим к нашему третьему макету. Для этого макета мы добавим несколько непрозрачных диагональных полос на фон раздела «Первоклассная безопасность и ремонт».
Начните с открытия настроек раздела и перехода к фону. Откройте вкладку «Узор» и выберите «Добавить фоновый узор».
Выберите узор «Диагональные полосы».
Далее задайте цвет узора.
- Цвет узора: rgba (255,255,255,0,25)
Переверните узор по горизонтали, используя настройки «Преобразование узора». Это еще один параметр, который поможет вам настроить рисунок по своему вкусу.
- Преобразование узора: горизонтальное
Добавление режима наложения узора
Наконец, установите режим наложения узора. Для этого дизайна мы будем использовать режим наложения яркости. В сочетании с цветом нашего узора это добавляет изображению светлый экран, но при этом позволяет фотографии просвечивать. Благодаря этому дизайну изображение лодки больше выделяется на фоне, поскольку узор добавляет характерный контраст.
- Режим наложения узора: Яркость
Окончательный дизайн
Вот окончательный вариант этого раздела.
А вот мобильный дизайн этого раздела.
Конечный результат
Теперь давайте взглянем на полный дизайн страницы с режимами наложения узоров.
Последние мысли
Добавление узора может стать отличным способом добавить визуальную изюминку к фоновому изображению, но иногда узор может затмить фоновое изображение. Или, может быть, вы хотите, чтобы цвет вашего узора менялся в зависимости от изображения, стоящего за ним. К счастью, в Divi имеется множество режимов наложения, так что вы можете настраивать узоры по своему усмотрению. Вы можете экспериментировать с различными комбинациями узоров, режимами наложения, цветами узоров, размерами узоров и многими другими настройками Divi, чтобы создать совершенно уникальный дизайн для ваших фоновых изображений.
Надеемся, что этот урок вдохновил вас на использование некоторых шаблонов и режимов наложения в дизайне вашего сайта! Еще один урок по дизайну с использованием шаблонов см. этот урок научиться создавать тонкие маски с фоновым узором. А для обзора различных фильтров, эффектов и режимов наложения, которые вы можете использовать с Дививзгляните на эти статьи: Часть 1 и Часть 2. Использовали ли вы раньше узоры и режимы наложения Divi на своих фоновых изображениях? Дайте нам знать об этом в комментариях!
[ad_2]
