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

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

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

обследование

Вот обзор дизайна, который мы собираемся построить вместе.

Пример модели для создания divi

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

Для начала вам нужно будет сделать следующее:

  1. Если вы еще этого не сделали, установите и активируйте Диви тема установлен (или плагин Divi Builder, если вы не используете Диви тема).
  2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы в интерфейсе (визуальный конструктор).
  3. Загрузите несколько фиктивных изображений в медиатеку, чтобы использовать их в учебнике. Я использую изображения из Eye Doctor Layout Pack .

После этого у вас будет чистый холст, чтобы начать проектирование в Divi.

Как смешать несколько изображений для создания индивидуального дизайна фона в Divi

Давайте начнем с раздела и линии

Чтобы добиться цели, добавьте строку столбца в обычный раздел.

Добавить раздел divi

Добавление изображений с помощью модуля изображений

Изображение № 1

Как только строка и столбец определены, добавьте модуль изображения в линию.

Добавить модуль изображения divi

Загрузите изображение размером примерно 500 на 700 пикселей. Я использую один из набора макетов глазного доктора.

Настройки изображения DiviПосле загрузки изображения установите максимальную ширину изображения, используя единицу длины vw, чтобы оно хорошо соответствовало другим изображениям, которые мы собираемся объединить, а затем выровняйте по левому краю следующим образом :

  • Максимальная ширина: 33vw
  • Выравнивание модуля: слева

Модификация выравнивания изображений модуля diviМы хотим, чтобы следующее изображение, которое мы добавляем, выровнялось по правому краю этого изображения. Поэтому нам нужно переместить это изображение влево. Для этого добавьте к основному элементу следующий CSS:

плавать: слева;

Добавить код divi css

Изображение № 2

Затем добавьте новый модуль изображения под текущее изображение.

Добавьте изображение под divi

После этого загрузите новое изображение, размеры которого близки к пикселям 1000 по пикселям 667.

Вставьте изображение модуля Divi 2

Затем придайте изображению новую ширину и новое максимальное выравнивание.

  • Максимальная ширина: 40vw
  • Выравнивание модуля: справа

Поскольку первое изображение плавает влево, второе изображение теперь должно быть смежным справа.

Модификация изображения Divi

Мы еще вернемся, чтобы добавить несколько штрихов к этим изображениям, а пока перейдем к настройкам в разделе.

Настройки раздела

Откройте раздел настроек и добавьте фоновое изображение и градиент следующим образом:

  • Фоновое изображение: [загрузить изображение размером примерно 1920 x 1280 пикселей]
    Добавить фоновое изображение раздела divi
  • Левый градиент фона Цвет: rgba (1,16,63,0.64)
  • Правый градиент фона Цвет: rgba (12,113,195,0.82)
  • Поместите градиент над фоновым изображением: ДА

Добавить деградированный эффект

Затем немного отрегулируйте отступы.

  • Обивка (офис): 0px вверху, 0px внизу
  • Обивка (телефон): 0px вверху, 10vw внизу

Настроить заполнение diviНастройки линии

По завершении раздела откройте настройки линии и обновите следующие элементы:

  • Ширина: 100%;
  • Максимальная ширина: 100%;
  • Обивка: 0px вверху, 0px внизу

Настройка модуля Divi Line

Добавьте режим слияния в строку

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

  • Режим Fusion: умножение

Режим слияния Divi Line

Зачем умножать?

В режиме наложения «Умножение» текущий слой / строка (включая любые изображения в нем) умножается на слой под ним (фон раздела). Легкий способ представить себе эффект - это представить два слайда в слайд-проекторе, расположенные один за другим. Если вы спроецируете два изображения на экран, вы получите их немного более темную смесь.

Центрировать изображения по вертикали

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

дисплей: гибкий; align-items: center;

Параметр линии divi

Последний штрих к двум лучшим картинкам

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

Image # 1 Final Keys

Откройте настройки модуля изображения слева и обновите следующее:

  • Box Shadow: см. Снимок экрана
  • Box Shadow Blur Force: 6vw
  • Толщина тени коробки: 6vw
  • Цвет тени: #ffffff
    Модуль теневой конфигурации divi image
  • Transformer Translate: 5vw (ось X), 11vw (ось Y)

Преобразование оси модуля изображения Divi

Image # 2 Final Keys

Когда вы закончите манипулировать изображением №1 слева, откройте настройки изображения №2 справа и внесите следующие изменения:

  • Box Shadow: см. Снимок экрана
  • Box Shadow Blur Force: 3vw
  • Сила распространения тени от ящика: 3vw
  • Цвет тени: #ffffff

Модификация второго изображения divi

Мы даже можем добавить несколько фильтров, чтобы сделать изображение более четким.

  • Насыщенность: 30%
  • Непрозрачность: 60%

Конфигурация фильтра модуля изображения Divi

Добавить текстовое содержание

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

Добавить новый раздел на diviЗатем добавьте строку столбца в обычный раздел.

Выберите макет divi

Затем добавьте текстовый модуль в строку.

Вставьте второй раздел текстового модуля divi

Содержание тела

Обновите содержание текстового модуля с содержание следующего органа:

Запишитесь на глазной экзамен Ваш контент идет сюда. Отредактируйте или удалите этот текст в строке или в настройках содержимого модуля. Вы также можете стилизовать каждый аспект этого контента в настройках дизайна модуля и даже применить собственный CSS к этому тексту в расширенных настройках модуля.

Закажите экзамен по модулю divi

Форматирование текста

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

  • Цвет текста текста: #ffffff
  • Шрифт: Поппинс
  • Цвет текста заголовка: #ffffff
  • Размер текста заголовка: 5vw
  • Ширина: 60vw (рабочий стол), 100% (телефон)
  • Маржа (на рабочем столе): -35% вверх, 35% вниз
  • Маржа (телефон): -70% вверх, 70% вниз

Настройка шрифта для текстового модуля divi

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

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

Окончательный дизайн закажите консультацию

Заключительные мысли

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

Надеюсь, что эта статья вдохновила вас, и надеюсь услышать от вас в комментариях.

За ваше здоровье!