Хотите ли вы использовать маски и шаблоны для раздела «Герой» в Divi?
Новые маски и фоновые узоры от Divi Это одна из наших самых интересных новых дизайнерских функций на сегодняшний день. Каждую маску и узор можно комбинировать с другими элементами фона (такими как цвета, изображения и градиенты), создавая бесчисленное множество уникальных комбинаций всего за несколько кликов.
Сегодня мы покажем вам, как использовать Divi а также новые маски и фоновые узоры для оформления главного раздела.
В этом уроке мы рассмотрим важные шаги, необходимые для создания фоновых масок и узоров.
Мы даже покажем вам, как расположить фоновые изображения, чтобы они соответствовали дизайну маски. Это даст вам инструменты, необходимые для создания идеального главного раздела для вашего сайта за считанные минуты.
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Читайте также: Divi: как создать адаптивную сетку изображений со ссылками и эффектами наведения
Пример секции Героя с белой маской и узором.
Вот темная версия того же раздела Hero с черной маской и узором.
С этим дизайном вы можете легко менять маски и их положения всего за несколько кликов!
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в 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. Настройте фоновую маску для мобильных устройств.
Важно убедиться, что дизайн фоновой маски также отлично выглядит на мобильных устройствах. К счастью, встроенные опции упрощают этот процесс.
Не забывайте, что мы уже добавили дополнительный отступ на планшет и телефон, чтобы освободить место для нашего фонового изображения.
Теперь нам осталось лишь использовать параметры преобразования фона и соотношения сторон, чтобы настроить маску для мобильных устройств.
Под вкладкой Фоновая маска, включите адаптивные параметры и обновите следующее:
Версия для планшета
- Преобразование маски: Отразить по вертикали, Отразить по горизонтали, Повернуть
- Соотношение сторон маски: квадрат
Телефонная версия
- Преобразование маски: Отразить по вертикали, Отразить по горизонтали, Повернуть
- Соотношение сторон маски: портрет
Результат
Ознакомьтесь с дизайном, который мы уже создали.
Настольный компьютер
Версия для планшета
Телефонная версия
10. Создайте темную версию
Если вам нужен тёмный вариант этого дизайна, просто измените цвет фоновой маски на тёмный (например, чёрный).
Затем измените цвет узора на черный.
Затем измените заголовок и текст подзаголовка на белый. И вы также можете обновить цвет кнопки.
Вот так выглядит темная версия.
Конечные результаты
Смотрите также: Divi: как настроить ссылку «Подробнее» в блоге
Вот еще один взгляд на наши окончательные результаты.
Скачайте DIVI прямо сейчас!!!
Заключение
Разработка раздела Hero для вашего сайта может стать настоящим удовольствием с помощью маски и фоновые узоры из Divi. Параметры фона легко настраиваются для достижения идеального дизайна. Также есть множество других опций (например, режимы наложения), которые можно использовать для создания еще более уникальных фонов.
Кроме того, вы можете добавлять маски и узоры к любому элементу Divi, а не только к секциям. Так что получайте удовольствие от экспериментов!
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...