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

Если вы знакомы с программами для редактирования изображений, такими как Photoshop, вы, вероятно, также знакомы с масками. Маски помогают объединить два слоя и создать уникальный результат. С Divi вы можете проявить творческий подход и создавать свои собственные маски на своих страницах, используя градиентный фон в сочетании с фоновыми изображениями. В этом уроке мы шаг за шагом покажем вам, как создать 8 различных фоновых масок для любого дизайна, над которым вы работаете. Это руководство поможет вам быстро внести изменения в дизайн ваших страниц, вообще не прикасаясь к программному обеспечению для редактирования изображений.

Давайте приступим к делу!

Предварительный просмотр

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

Начнем творить!

Подпишитесь на наш канал Youtube

Добавить новый раздел

Интервал

Добавьте новый раздел на свою страницу, откройте настройки раздела и добавьте пользовательские отступы сверху и снизу.

• Верхний отступ: 150 пикселей
• Нижний отступ: 150 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Добавить модуль Blurb в # 1

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

Пора начинать добавлять модули! Всего нам понадобится 8 модулей Blurb. Мы начнем с первого, внесем общие изменения и затем клонируем его 7 раз, прежде чем вносить уникальные изменения в каждый модуль Blurb. Добавьте новый модуль Blurb в первый столбец и добавьте контент по выбору.

Настройки текста

Перейдите на вкладку дизайна и затем измените настройки текста.

• Ориентация текста: по центру
• Цвет текста: темный

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

Также откройте настройки текста заголовка и измените все вокруг.

• Шрифт заголовка: Antic Didone
• Размер текста заголовка: 23 пикс.
• Высота строки заголовка: 1,5 м

Коробка Тень

Наконец, добавьте тонкую тень блока к модулю Blurb.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Клонировать модуль Blurb 7 раз и разместить 4 дубликата во втором столбце

После того, как вы внесли все общие изменения, вы можете клонировать модуль Blurb 7 раз. Поместите четыре дубликата во второй столбец ряда и оставьте три в первом.

Измените модуль Blurb # 1

Градиентный фон

Теперь мы можем начать добавлять уникальные настройки в каждый из модулей Blurb. Откройте первый модуль Blurb в столбце 1 и добавьте к нему градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: снизу
• Стартовая позиция: 45%
• Конечная позиция: 45%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

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

• Расположение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 350 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Измените модуль Blurb # 2

Градиентный фон

Давайте перейдем к следующему модулю Blurb (первый модуль во втором столбце) и добавим градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: вверху справа
• Стартовая позиция: 45%
• Конечная позиция: 45%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

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

• Расположение фонового изображения: вверху справа
• Повтор фонового изображения: без повтора

Интервал

И завершите дизайн, добавив пользовательские значения отступов в настройках интервалов.

• Верхний отступ: 350 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 200 пикселей (компьютер и планшет), 50 пикселей (телефон)

Измените модуль Blurb # 3

Градиентный фон

Переходим к третьему модулю рекламных сообщений (второму модулю рекламных сообщений в первом столбце). Откройте настройки и добавьте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: вверху слева
• Стартовая позиция: 45%
• Конечная позиция: 45%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Затем добавьте фоновое изображение.

• Расположение фонового изображения: вверху слева
• Повтор фонового изображения: без повтора

Интервал

И добавьте к модулю некоторые пользовательские отступы, чтобы он принял свою форму.

• Верхний отступ: 350 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 200 пикселей (компьютер и планшет), 50 пикселей (телефон)
• Отступ справа: 50 пикселей

Измените модуль Blurb # 4

Градиентный фон

Переходим ко второму модулю во втором столбце! Откройте настройки модуля Blurb и добавьте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 45%
• Конечная позиция: 45%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Затем добавьте фоновое изображение.

• Расположение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

И завершите дизайн, добавив пользовательские значения отступов в настройках интервалов.

• Верхний отступ: 350 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Измените модуль Blurb # 5

Градиентный фон

Переходим к следующему модулю, который является третьим модулем в первом столбце. Откройте модуль и добавьте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: влево
• Стартовая позиция: 35%
• Конечная позиция: 35%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Продолжите, добавив фоновое изображение в сочетании со следующими настройками фона:

• Расположение фонового изображения: вверху слева
• Повтор фонового изображения: без повтора

Интервал

И также добавьте несколько пользовательских значений отступов в настройки интервала.

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 240 пикселей (компьютер и планшет), 150 пикселей (телефон)
• Отступ справа: 50 пикселей (компьютер и планшет), 20 пикселей (телефон)

Измените модуль Blurb # 6

Градиентный фон

Переходим к третьему модулю во втором столбце! Откройте настройки и добавьте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: линейный
• Направление градиента: 140 градусов
• Стартовая позиция: 60%
• Конечная позиция: 60%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Затем добавьте фоновое изображение с соответствующими настройками фона.

• Расположение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

И завершите дизайн, используя некоторые пользовательские значения отступов в настройках интервалов.

• Верхний отступ: 100 пикселей
• Нижний отступ: 350 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 200 пикселей (компьютер и планшет), 50 пикселей (планшет)

Измените модуль Blurb # 7

Градиентный фон

Следующий модуль Blurb в столбце 1 использует следующий градиентный фон:

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: линейный
• Направление градиента: 220 градусов
• Стартовая позиция: 60%
• Конечная позиция: 60%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Также добавьте фоновое изображение.

• Расположение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 350 пикселей
• Отступ слева: 200 пикселей (компьютер и планшет), 50 пикселей (телефон)
• Отступ справа: 50 пикселей

Измените модуль Blurb # 8

Градиентный фон

Переходим к последнему модулю Blurb! Откройте настройки и добавьте градиентный фон.

• Цвет 1: rgba (255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: радиальный
• Радиальное направление: вправо
• Стартовая позиция: 35%
• Конечная позиция: 35%
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Затем загрузите фоновое изображение.

• Расположение фонового изображения: вверху слева
• Повтор фонового изображения: без повтора

Интервал

И завершите дизайн и руководство, добавив несколько пользовательских отступов в настройки интервала модуля.

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей (компьютер и планшет), 20 пикселей (телефон)
• Отступ справа: 240 пикселей (компьютер и планшет), 170 пикселей (телефон)

Предварительный просмотр

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

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

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