Вы хотите объединить фоновые маски и разделитель Divi иметь возвышенное и уникальное происхождение?
Комбинация фоновых масок с разделителями секций в Divi добавляет еще один уровень творчества в и без того мощный арсенал вариантов оформления фона.
В дополнение к параметрам фона разделители разделов также позволяют пользователям улучшать дизайн фона.
В этом уроке мы покажем вам, как комбинировать фоновые маски с разделителями разделов в Divi. Мы дадим вам пошаговую инструкцию, как сделать фон для раздела Divi в этой технике.
Кроме того, мы даже объясним, как создавать альтернативные дизайны с помощью всего лишь нескольких простых настроек.
Давайте начнем!
обследование
Вот предварительный просмотр рисунков в этом уроке.
концепция
Основная концепция этого урока состоит в том, чтобы объединить фоновую маску и разделители разделов, чтобы создать еще более уникальные формы маски.
Во-первых, мы добавляем фоновую маску.
Затем мы добавляем разделители секций, чтобы творчески завершить форму маски.
Создайте новую страницу с помощью Divi Builder
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Комбинируйте фоновые маски и разделители в Divi
Добавьте размер раздела и интервал
Для начала мы добавим размер и интервал к существующему разделу в конструкторе. Мы приостановим добавление строки или всех содержание поэтому мы можем сосредоточиться на разработке фона раздела.
Откройте настройки раздела. Под вкладкой Проект, обновите размер и интервал следующим образом:
- Минимальная высота: 50 vw
- Отступы (сверху и снизу): 0 пикселей
Создайте фоновый градиент
Как только раздел имеет определенную высоту, мы готовы добавить фоновый градиент к разделу.
Под вкладкой Содержание, щелкните вкладку Фоновый градиент в настройках фона. Затем добавьте градиент следующим образом:
- Остановки градиента
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
Создайте фоновую маску
Теперь, когда у нас есть цветовой градиент, мы готовы создать фоновую маску.
Под вкладкой Фоновая маска, обновите следующее:
- Маска: Елочка
- Цвет маски: #000000
- Преобразование: Перевернутое
- Соотношение сторон маски: см. скриншот
Добавить разделители разделов (разделители)
С нашей маской на месте мы можем дополнительно изменить форму маски, используя разделители секций.
В этом примере мы добавим разделитель в виде полукруга вверху и внизу. Это сожмет фоновую маску, чтобы она больше походила на причудливую стрелку.
Для этого нажмите на вкладку Проект и добавьте следующие разделители:
Во-первых, добавьте верхний разделитель под вкладкой Топовое.
- Стиль разделителя: см. скриншот
- Цвет: #000
- Высота делителя: 10 vw
Затем добавьте нижний разделитель под вкладкой Дно.
- Стиль разделителя: см. скриншот
- Цвет: #000
- Высота делителя: 10 vw
- Переворот разделителя: Переворот по вертикали
Результат
Вот результат.
Настройте параметры фона и разделители для большего дизайна
Теперь, когда у вас есть основная идея, мы можем легко поиграть с разделителями секций, чтобы создать больше узоров.
Смотрите также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения
Альтернативный дизайн №1
Для нашего первого альтернативного дизайна мы повернем существующую фоновую маску. Далее мы заменим разделители полукруглого сечения на треугольники.
Для этого откройте существующие настройки раздела, нажмите на вкладку Фоновая маска и обновите следующее:
- Преобразование маски: вертикальное отражение, вращение
- Соотношение сторон маски: см. скриншот
Затем обновите разделители разделов следующим образом:
Верхний разделитель
- Стиль разделителя: см. скриншот
- Высота делителя: 13 vw
Нижний разделитель
- Стиль разделителя: см. скриншот
- Высота: 13 см
- Переворот делителя: дезактивировать
Результат
Voici le résultat.
Альтернативный дизайн №2
Для нашего второго и последнего альтернативного дизайна мы собираемся заменить маску стропила по маске Диагональные брусья 2 а также дайте ему новый разделитель верхней секции.
Для этого откройте существующие настройки раздела, нажмите на вкладку Фоновая маска и обновите следующее:
- Маска: Диагональные полосы 2
- Преобразование маски: горизонтальное отражение
- Соотношение сторон: см. скриншот
Затем обновите разделители разделов следующим образом:
Верхний разделитель
- Стиль разделителя: см. скриншот
- Делитель флип: Горизонтальный флип
Нижний разделитель
- Стиль разделителя: Нет
Результат
Voici le résultat.
Конечные результаты
Чтобы дать вам лучшее представление о том, как будут выглядеть эти фоны с содержаниемы добавили строку в столбец с заголовком.
Читайте также: Divi: Как создать липкую фоновую маску
Скачайте DIVI прямо сейчас!!!
Заключение
Комбинирование масок и разделителей секций для оформления фона открывает больше возможностей для создания уникальных форм для этих встроенных масок.
Не стесняйтесь исследовать различные комбинации самостоятельно.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
