Divi: 5 наложений масок и узоров, применимых к фоновому изображению.

Вы хотите использовать функцию фоновой маски и наложения узора в Divi?

С последним версия функциональности фоновой маски и фонового узора С помощью Divi вы можете создавать уникальные разделы-«герои» для своего сайта. Раздел-«герой» — это первый раздел вашего сайта и первое, что видят посетители, прежде чем прокрутить страницу вниз, поэтому важно сделать его привлекательным!

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

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

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

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

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

Скачайте DIVI прямо сейчас!!!

Дизайн тонкий, простой и в то же время впечатляющий.

Читайте также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения

Создайте новую страницу с помощью Divi Builder

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

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

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

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

Для начала давайте создадим раздел «Герой».

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

1. Создайте структуру макета

Добавьте строку на страницу, затем нажмите на зеленую иконку «+», чтобы отобразить структуру столбцов, и выберите первый столбец, занимающий всю ширину страницы.

2. Добавьте расстояние между секциями

Теперь, когда мы определили строку и столбец, пришло время добавить отступы в раздел.

На вкладке «Интервал» обновите следующее:

• Рабочий стол: 400 пикселей (сверху и снизу)
• Планшет: 200 пикселей (сверху и снизу); 25 пикселей (слева и справа)
• Телефон: 50 пикселей (сверху и снизу); 25 пикселей (слева и справа)

Дизайн раздела героев №1

Давайте создадим первый раздел Героя.

Скачайте DIVI прямо сейчас!!!

1. Добавьте текст заголовка.

Нажмите на серый значок «+», чтобы открыть библиотеку модулей. Прокрутите вниз до текста и нажмите, чтобы загрузить его.

Введите текст заголовка, затем во вкладке Заголовок текста, настройте эти параметры:

• Шрифт заголовка: Work Sans
• Цвет текста: белый #ffffff
• Размер текста заголовка:
  • Рабочий стол: 3 см
  • Планшет: 2,2 см
  • Телефон: 1.4em

2. Добавить кнопочный модуль

Добавьте кнопку и настройте следующие параметры:

• Под вкладкой Содержаниес: узнать больше
• Под вкладкой центровка, выберите: Центр
• Cliquez-сюр- Используйте пользовательские стили для кнопки затем настройте:
  • Размер текста кнопки:
    • Рабочий стол: 20 пикселей
    • Планшет: 16 пикселей
    • Телефон: 14px
  • Цвет текста кнопки: #ffffff
  • Фон: #1d1d1d
  • Ширина границы кнопки: 0
  • Радиус границы: 0
  • Межбуквенный интервал: 3 пункта
  • Шрифт кнопки: Work Sans
  • Стиль шрифта: ТТ

3. Добавьте фоновое изображение.

Теперь, когда контент готов, пора приступить к разработке фона раздела.

• Откройте переключатель фона и перейдите на третью вкладку, вкладку «Изображение», затем нажмите «Добавить фоновое изображение».
• Откроется ваша медиатека, где вы сможете выбрать фотографию или загрузить новую.
• Выбрав фотографию, нажмите кнопку «Загрузить изображение» в правом нижнем углу.

4. Добавьте фоновый узор

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

• Во вкладке ПредысторияПерейдите на 5-ю вкладку, вкладку Фоновый узорЗатем нажмите кнопку «Добавить фоновый узор».
• выбрать с хохолком из выпадающего меню и настройте следующие параметры:
  • Цвет узора - rgba (255,255,255,0.31)
  • Преобразование узора: нет
  • Размер: Фактический размер
  • Происхождение повторения узора: Верх Низ
  • Повтор шаблона: Повторить
  • Режим наложения: нормальный

5. Добавьте фоновую маску.

Теперь, когда мы настроили фоновое изображение и узор, давайте добавим фоновую маску.

• Во вкладке ПредысторияПерейдите на 6-ю вкладку, вкладку Фоновая маскаЗатем нажмите «Добавить фоновую маску».
• выбрать боб из выпадающего меню и настройте следующие параметры:
  • Цвет маски: rgba(0,0,0,0.36)
  • Соотношение сторон маски: горизонтальный прямоугольник
  • Размер: растягиваться до заполнения

Так ! Теперь у вас есть красиво оформленный раздел Hero.

Раздел Hero #2 дизайн

Теперь давайте создадим второй раздел героя.

1. Добавьте фоновое изображение и установите режим наложения «Перекрытие».

Выберите фоновое изображение, установите режим наложения «Перекрытие» и добавьте цвет перекрытия rgba (10,10,10,0.64).

2. Добавьте фоновый узор

Теперь, когда мы подготовили фоновое изображение, давайте добавим фоновый узор.

• На вкладке «Фон» перейдите на 5-ю вкладку, Фоновый узорЗатем нажмите кнопку «Добавить фоновый узор».
• выбрать с хохолком из выпадающего меню и настройте следующие параметры:
  • Цвет узора - rgba (255,255,255,0.09)
  • Преобразование узора: нет
  • Размер: Обложка
  • Происхождение повторения узора: вверху слева
  • Повтор шаблона: Повторить
  • Режим наложения: нормальный

3. Добавьте фоновую маску.

Теперь, когда мы настроили фоновое изображение и узор, давайте добавим фоновую маску.

• Во вкладке ПредысторияПерейдите на 6-ю вкладку, вкладку Фоновая маскаЗатем нажмите кнопку «Добавить фоновую маску».
• выбрать не из выпадающего меню и настройте следующие параметры:
  • Цвет маски: rgba(0,0,0,0.36)
  • Преобразование Маски: Нет
  • Соотношение сторон: горизонтальный прямоугольник
  • Размер маски: Растянуть, чтобы заполнить
  • Режим наложения маски: нормальный

Раздел Hero #3 дизайн

Теперь давайте создадим третий раздел Hero.

1. Добавьте фоновое изображение и установите режим наложения «Перекрытие».

Выберите фоновое изображение, установите режим наложения «Перекрытие» и добавьте цвет перекрытия rgba (10,10,10,0.39).

2. Добавьте фоновый узор

Теперь, когда мы подготовили фоновое изображение, давайте добавим фоновый узор.

• Во вкладке ПредысторияПерейдите на 5-ю вкладку, вкладку Фоновый узорЗатем нажмите кнопку «Добавить фоновый узор».
• выбрать Диагональные полосы 2 из выпадающего меню и настройте следующие параметры:
  • Цвет узора - rgba (0,0,0,0.06)
  • Преобразование узора: нет
  • Размер: Фактический размер
  • Происхождение повторения узора: вверху слева
  • Повтор шаблона: Повторить
  • Режим наложения: нормальный

3. Добавьте фоновую маску.

Теперь, когда мы добавили фоновое изображение и узор, давайте добавим фоновую маску.

• Во вкладке ПредысторияПерейдите на 6-ю вкладку, вкладку Фоновая маскаЗатем нажмите кнопку «Добавить фоновую маску».
• выбрать Треугольники из выпадающего меню и настройте следующие параметры:
  • Цвет маски: rgba (10, 10, 10, 0,61)
  • Преобразование Маски: нет
  • Соотношение сторон: горизонтальный прямоугольник
  • Размер маски: Растянуть, чтобы заполнить
  • Режим наложения маски: нормальный

Раздел Hero #4 дизайн

Теперь давайте создадим четвертую часть Hero.

1. Добавьте фоновое изображение.

Выберите фоновое изображение.

2. Добавьте фоновый узор

Теперь, когда мы добавили фоновое изображение, давайте добавим фоновый узор.

• Во вкладке ПредысторияПерейдите на 5-ю вкладку, вкладку Фоновый узорЗатем нажмите кнопку «Добавить фоновый узор».
• выбрать Улыбки из выпадающего меню и настройте следующие параметры:
  • Цвет узора - rgba (0,0,0,0.2)
  • Преобразование узора: нет
  • Размер: Обложка
  • Повторить начало: вверху слева
  • Повтор шаблона: Повторить
  • Режим наложения узора: нормальный

3. Добавьте фоновую маску.

Теперь, когда фоновое изображение и узор применены, давайте добавим фоновую маску.

• Во вкладке ПредысторияПерейдите на 6-ю вкладку, вкладку Фоновая маскаЗатем нажмите кнопку «Добавить фоновую маску».
• выбрать Угловое озеро  из выпадающего меню и настройте следующие параметры:
  • Цвет маски: rgba (10, 10, 10, 0,61)
  • Трансформация маски: горизонтальная
  • Соотношение сторон: горизонтальный прямоугольник
  • Размер: Обложка
  • Положение маски: по центру слева
  • Режим смешивания маски: нормальный

3. Настройте параметры линии

Прежде чем мы начнем, этот раздел «Герой» имеет уникальные стили линий. Давайте настроим это.

• Размеры:
  • Ширина: 80%
  • Максимальная ширина: 800 пикселей
• Выравнивание строк:
  • Рабочий стол: по умолчанию
  • Планшет: Центр
  • Телефон: Центр
• Поля:
  • Слева: 20vw

Раздел Hero #5 дизайн

Теперь давайте создадим пятый раздел Героя.

Скачайте DIVI прямо сейчас!!!

1. Добавьте фоновое изображение.

Выберите фоновое изображение.

2. Добавьте шаблон

Теперь, когда мы подготовили фоновое изображение, давайте применим фоновый узор.

• Во вкладке ПредысторияПерейдите на 5-ю вкладку, вкладку Фоновый узорЗатем нажмите кнопку «Добавить фоновый узор».
• выбрать Кросс из выпадающего меню и настройте следующие параметры:
  • Цвет узора — #ffffff
  • Преобразование узора: нет
  • Размер: Изготовленный на заказ размер
  • Ширина узора: 10 пикселей
  • Высота узора: 10 пикселей
  • Повторить происхождение: верхнее нижнее
  • Повтор шаблона: Повторить
  • Режим наложения узора: нормальный

3. Добавьте фоновую маску.

Теперь, когда у нас есть фоновое изображение и узор, давайте добавим фоновую маску.

• Во вкладке ПредысторияПерейдите на 6-ю вкладку, вкладку Фоновая маскаЗатем нажмите кнопку «Добавить фоновую маску».
• выбрать Диагональные таблетки  из выпадающего меню и настройте следующие параметры:
  • Цвет маски: rgba (10, 10, 10, 0,61)
  • Трансформация маски: горизонтальная
  • Соотношение сторон: горизонтальный прямоугольник
  • Размер: Обложка
  • Положение маски: по центру слева
  • Режим наложения маски: нормальный

3. Настройте параметры линии

Прежде чем мы начнем, этот раздел «Герой» также имеет уникальные стили линий. Давайте настроим это.

• Размеры:
  • Ширина: 80%
  • Максимальная ширина: 800 пикселей
• Выравнивание строк:
  • Рабочий стол: по умолчанию
  • Планшет: Центр
  • Телефон: Центр
• Расстояние:
  • Поле (справа): 18vw

Смотрите также: Divi: Как добавить маски и фоновые узоры в заголовок

Заключение

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

Кроме того, вы можете добавлять фоновые узоры и маски к любому элементу Divi Builder! Возможности дизайна безграничны.

Надеюсь, эта техника добавит еще один полезный дизайнерский навык для будущих проектов.

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...