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