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

Опубликовано: 2022-08-08

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

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

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

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

Что мы создаем

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

Дизайн тонкий, простой, но эффектный.

Скачайте макет БЕСПЛАТНО

Если вы хотите загрузить предварительно разработанный дизайн макета из этого руководства, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на нашу рассылку Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше возможностей Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить». Вы не будете «переподписываться» или получать дополнительные электронные письма.

Скачать файлы
Скачать бесплатно

Скачать бесплатно

Подпишитесь на информационный бюллетень Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевых страниц Divi, а также множество других удивительных и бесплатных ресурсов, советов и рекомендаций Divi. Следуйте вперед, и вы сразу же станете мастером Divi. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Как скачать и использовать макеты

Чтобы импортировать макет раздела в вашу библиотеку Divi, сделайте следующее:

  1. Перейдите в библиотеку Divi.
  2. Нажмите кнопку Импорт в верхней части страницы.
  3. Во всплывающем окне переносимости выберите вкладку импорта.
  4. Выберите файл для загрузки со своего компьютера (не забудьте сначала разархивировать файл и использовать файл JSON).
  5. Затем нажмите кнопку импорта.

После успешного импорта макетов они появятся в вашей библиотеке Divi и будут доступны для использования в Divi Builder.

Теперь давайте перейдем к учебнику!

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

Прежде чем мы начнем, вам необходимо:

  1. Установите и активируйте тему Divi.
  2. Создайте новую страницу, опубликуйте ее и нажмите кнопку «Использовать Divi Builder», чтобы отредактировать страницу во внешнем интерфейсе с помощью Visual Builder.
  3. Выберите вариант «Создать с нуля».

Теперь у нас есть чистый холст для начала проектирования!

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

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

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

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

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

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

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

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

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

Как создать героя Раздел № 1

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

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

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

Введите текст заголовка, а затем на вкладке «Текст заголовка» настройте следующие параметры:

  • Семейство шрифтов: Work Sans
  • Цвет шрифта: белый #ffffff
  • Размер шрифта:
    • Рабочий стол: 3rem
    • Таблетка: 2.2рем
    • Телефон: 1.4рем

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

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

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

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

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

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

4. Добавляем фоновый узор

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

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

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

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

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

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

Как создать героя Раздел № 2

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

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

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

2. Добавляем фоновый узор

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

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

3. Добавляем фоновую маску

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

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

Как создать героя Раздел № 3

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

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

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

2. Добавляем фоновый узор

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

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

3. Добавляем фоновую маску

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

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

Как создать героя Раздел № 4

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

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

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

2. Добавляем фоновый узор

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

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

3. Добавляем фоновую маску

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

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

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

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

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

Как создать героя Раздел № 5

Теперь давайте создадим пятую секцию героя.

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

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

2. Добавляем фоновый узор

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

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

3. Добавляем фоновую маску

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

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

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

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

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

Получите больше фоновых масок и узоров!

Если вы хотите больше дизайнов, подобных этому, ознакомьтесь с этими 12 фоновыми масками и узорами, которые можно бесплатно скачать.

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

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