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

Хотели бы вы использовать маску Divi и наложение фонового рисунка?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Во-первых, давайте создадим раздел Hero

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

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. Добавьте фоновое изображение

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

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

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

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

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

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

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

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

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

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

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

1. Добавьте фоновое изображение и установите режим наложения на Overlay.

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

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

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

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

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

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

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

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

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

1. Добавьте фоновое изображение и установите режим наложения на Overlay.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 всех времен.

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

...