Как объединить фоновые маски с разделителями разделов в Divi

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

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

Наслаждаться!

Краткий обзор

Вот краткий обзор дизайнов из этого урока.

Концепт

Основная концепция этого урока состоит в том, чтобы объединить фоновую маску и разделители разделов, чтобы создать еще более уникальные формы маски.

Во-первых, мы добавляем фоновую маску.

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

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

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

Скачать файлы

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

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

СКАЧАТЬ

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

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

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

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к учебнику, не так ли?

Что вам нужно, чтобы начать

Для начала вам нужно будет сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Создать с нуля».
4. Теперь у вас есть чистый холст, чтобы начать проектирование в Divi!

Как комбинировать фоновые маски и разделители в Divi

1. Добавьте размер раздела и интервал

Для начала мы добавим размер и интервал к существующему разделу в конструкторе. Мы собираемся отложить добавление строки или любого другого контента, чтобы мы могли сосредоточиться на дизайне фона раздела.

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

• Минимальная высота: 50vw
• Отступы: 0px сверху, 0px снизу

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

2. Создаем фоновый градиент

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

На вкладке «Содержимое» щелкните вкладку «Градиент фона» под параметрами фона. Затем добавьте градиент следующим образом:

• Цветная точка 1: #1a2a6c (при 20%)
• Цветовая точка 2: #b21f1f (при 60%)
• Цветовая точка 2: #fdbb2d (100%)

3. Создайте фоновую маску

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

На вкладке «Фоновая маска» обновите следующее:

• Маска: Шевроны
• Цвет маски: #000
• Преобразование маски: перевернутое
• Соотношение сторон маски: см. снимок экрана

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

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

Для этого перейдите на вкладку «Дизайн» и добавьте следующие разделители:

Во-первых, добавьте верхний разделитель на вкладке «Верх».

• Стиль разделителя: см. снимок экрана
• Цвет разделителя: #000
• Высота делителя: 10vw

Затем добавьте нижний разделитель на вкладке «Низ».

• Стиль разделителя: см. снимок экрана
• Цвет разделителя: #000
• Высота делителя: 10vw
• Переворот делителя: Вертикальный переворот

Результат

Вот результат на данный момент.

Настройка параметров фона и разделителей для большего количества дизайнов

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

Альтернативный дизайн №1

Для нашего первого альтернативного дизайна мы повернем существующую фоновую маску и заменим полукруглые разделители треугольниками.

Для этого откройте существующие настройки раздела, перейдите на вкладку «Маска фона» и обновите следующее:

• Преобразование маски: вертикальное отражение, поворот
• Соотношение сторон маски: см. снимок экрана

Затем обновите разделители разделов следующим образом:

Верхний разделитель

• Стиль разделителя: см. снимок экрана
• Высота делителя: 13vw

Нижний разделитель

• Стиль разделителя: см. снимок экрана
• Высота делителя: 13vw
• Переворот разделителя: отключить

Результат

Вот результат.

Альтернативный дизайн №2

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

Для этого откройте существующие настройки раздела, перейдите на вкладку «Маска фона» и обновите следующее:

• Маска: Диагональные полосы 2
• Преобразование маски: горизонтальное отражение
• Соотношение сторон маски: см. снимок экрана

Затем обновите разделители разделов следующим образом:

Верхний разделитель

• Стиль разделителя: см. снимок экрана
• Переворот разделителя: Горизонтальный переворот

Нижний разделитель

• Стиль разделителя: Нет

Результат

Вот результат.

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

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

Проверь их!

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

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!