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