Хотели бы вы использовать маски и шаблоны для раздела «Герой» в Divi ?

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

Сегодня мы покажем вам, как пользоваться Divi и его новые маски и фоновые узоры для создания раздела героев. 

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

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

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

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

Читайте также: Divi: как создать адаптивную сетку изображений со ссылками и эффектами наведения

Пример секции Героя с белой маской и узором.

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

Вот темная версия того же раздела Hero с черной маской и узором.

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

С этим дизайном вы можете легко менять маски и их положения всего за несколько кликов!

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

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

Линии Divi преобразованы во вкладки

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

#image_title

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

Линии Divi преобразованы во вкладки

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

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

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

Для этого главного раздела мы используем классическую структуру макета с заголовком и призывом к действию слева и изображением (или визуальным дизайном) справа. 

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

маски и фоновые узоры раздел героя

2. Добавьте заголовок и призыв к действию

В левом столбце (столбец 1) добавьте модуль «Текст» для основного заголовка, модуль «Текст» для текста подзаголовка и модуль «Кнопка» для кнопки.

маски и фоновые узоры раздел героя
маски и фоновые узоры раздел героя

3. Добавьте вертикальное расстояние к разделу

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

Откройте настройки раздела. На вкладке «Дизайн» обновите отступы следующим образом:

  • Прокладка:
    • Рабочий стол: верхние 20vw, нижние 20vw
    • Планшет: верхний 8vw, нижний 48vw
    • Телефон: верхний 8vw, нижний 70vw
маски и фоновые узоры раздел героя

4. Добавьте фоновое изображение и градиент

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

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

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

маски и фоновые узоры раздел героя

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

  • Остановки градиента:
    • 0%: #3e22ff
    • 100%: ясно
  • Квадратный градиент над фоновым изображением: ДА
маски и фоновые узоры раздел героя

5. Создайте фоновый узор для раздела

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

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

Под вкладкой Фоновые Узоры, обновите следующее:

  • Фоновый узор: Тафтинговый
маски и фоновые узоры раздел героя

ОБМАНЫВАТЬ : С фоновыми узорами обычно лучше всего делать их тонкими. Попробуйте использовать нестандартные размеры для небольших дизайнов, а затем уменьшите непрозрачность цвета.

6. Создайте фоновую маску для раздела

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

Под вкладкой Фоновая маска, обновите следующее:

  • Маска: Соты
  • Цвет маски: #ffffff
  • Размер: Обложка
маски и фоновые узоры раздел героя

7. Отрегулируйте положение фонового изображения

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

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

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

  • Положение фонового изображения: Внизу справа
  • Горизонтальное смещение фонового изображения: -4vw

8. Используйте режим наложения

Один из способов проявить творческий подход ко всем этим фоновым элементам — добавить режим наложения. Режимы наложения можно добавить к любому из параметров фона, и их можно использовать для творческого смешивания нескольких фоновых слоев (изображение, градиент, маска и т. д.).

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

  • Смешение фонового изображения: умножение
маски и фоновые узоры раздел героя

9. Настройте фоновую маску для мобильных устройств

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

Помните, что мы уже добавили дополнительные отступы на планшет и телефон, чтобы освободить место для нашего фона. 

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

Под вкладкой Фоновая маска, включите адаптивные параметры и обновите следующее:

Версия для планшета

  • Преобразование маски: Отразить по вертикали, Отразить по горизонтали, Повернуть
  • Соотношение сторон маски: квадрат
маски и фоновые узоры раздел героя

Телефонная версия

  • Преобразование маски: Отразить по вертикали, Отразить по горизонтали, Повернуть
  • Соотношение сторон маски: портрет
маски и фоновые узоры раздел героя

Результат

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

Настольный компьютер

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

Версия для планшета

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

Телефонная версия

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

10. Создайте темную версию

Если вам нужна темная версия этого дизайна, просто измените цвет фоновой маски на темный цвет (например, черный).

маски и фоновые узоры раздел героя

Затем измените цвет узора на черный.

маски и фоновые узоры раздел героя

Затем измените заголовок и текст подзаголовка на белый. И вы также можете обновить цвет кнопки.

маски и фоновые узоры раздел героя

Вот так выглядит темная версия.

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

Конечные результаты

Смотрите также: Divi: как настроить ссылку «Подробнее» в блоге

Вот еще один взгляд на наши окончательные результаты.

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

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

Заключение

Создайте раздел «Герой» для своего Веб-сайт очень весело с маски и фоновые узоры от Диви. Параметры фона легко изменить, чтобы получить идеальный дизайн. И есть множество других опций, которые вы можете использовать (например, режимы наложения) для создания еще более уникальных фонов. 

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

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

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

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

...

Pin It на Pinterest