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

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

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

Давайте начнем!

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

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

Что нужно для начала

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

Давайте прыгать.

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

Создайте новую страницу с готовым макетом

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

Создайте новую страницу, добавьте заголовок, затем выберите параметр «Использовать Divi Builder».

В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Обзор макетов».

Найдите и выберите макет целевой страницы магазина мороженого.

Выберите «Использовать этот макет», чтобы добавить макет на свою страницу.

Теперь мы готовы построить нашу конструкцию.

Изменение макета фонового узора и маски

Мы изменим вид раздела CTA месяца из этого макета. Давайте внесем некоторые изменения в наш макет для фонового рисунка и дизайна маски.

Настройки строки

Откройте «Настройки строки», затем выберите «Дизайн».

В разделе «Размер» выровняйте высоту столбцов.

• Выравнивание высоты столбцов: Да

В разделе «Интервал» удалите верхнюю прокладку, чтобы конус оказался в верхней части секции.

• Верхнее заполнение: 0px

Настройки столбца 1

На вкладке «Содержимое» для настроек строки выберите настройки «Столбец 1». В разделе «Фон» удалите оранжевый фон.

Настройки столбца 2

Теперь выберите настройки столбца 2. В исходном дизайне есть интервалы, которые нам не нужны, поэтому давайте избавимся от них. В разделе «Дизайн» перейдите к «Интервал» и удалите верхний отступ.

Затем выберите «Дополнительно» и добавьте следующий пользовательский CSS к основному элементу, чтобы наш текст «изюминка месяца» располагался по центру по вертикали.

margin:auto;

Настройки раздела

Откройте настройки раздела. В разделе «Дизайн» выберите «Отступы». Отрегулируйте заполнение раздела так, чтобы верхний конус выровнялся по самому верху страницы.

• Отступ: 0px

Добавление фонового узора и маски в раздел CTA

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

Цвет фона, узор и настройки маски

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

Под вкладкой цвета добавьте оранжевый фон.

• Цвет: #FFA256

На вкладке Узор задайте форму и цвет узора.

• Форма: Конфетти
• Цвет: #FF7D14

Теперь давайте добавим маску. Выберите вкладку маски, затем добавьте настройки следующим образом:

• Форма: угловая капля
• Цвет маски: #FFFFFF
• Преобразование маски: горизонтальное
• Соотношение сторон маски: Пейзаж
• Маска Размер: Обложка

Корректировки дизайна

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

Откройте настройки кнопки «Купить» и измените выравнивание на вкладке «Дизайн».

• Расположение кнопок: слева

Измените цвет фона состояния наведения для кнопки «Купить», чтобы она выделялась на оранжевом фоне.

• Фон кнопки при наведении: #FF7D14

Мы также настроим расположение строк, чтобы добавить больше пространства между оранжевым фоном и разделом «Аромат месяца» справа. Измените раскладку с 1:1 на 3:2.

И теперь дизайн рабочего стола завершен, и вы узнали, как создать уникальный раздел CTA с фоновым рисунком Divi и параметрами маски!

Сделайте раздел CTA отзывчивым

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

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

• Измените текст «Апельсиновый шоколад» на H3.

Далее мы внесем некоторые изменения в текст, чтобы он выделялся на этом фоне. Перейдите на вкладку «Дизайн» и внесите следующие изменения:

• H2 (телефон и планшет) Цвет текста: #000000
• H2 (телефон и планшет) Размер текста: 30 пикселей
• H3 (телефон и планшет) Цвет текста: #000000
• H4 (телефон и планшет) Цвет текста: #000000

Теперь перейдите в настройки оригинального текстового модуля «Аромат месяца» и измените видимость, чтобы он был виден только на десктопных устройствах. Это скроет исходный текстовый модуль на устройствах меньшего размера. Над кнопкой появится текст «Аромат месяца», а остальной текст — на странице.

• Отключить на: телефоне и планшете

Затем откройте настройки строки, затем откройте настройки столбца 1. Снимите правую и левую обивку.

• Отступ справа: 0px
• Отступ слева: 0px

Заходим в настройки раздела, затем фон, затем редактируем настройки маски

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

И теперь вы создали полностью адаптивный раздел CTA с уникальным фоном благодаря опциям Divi Background Pattern и Mask.

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

Давайте посмотрим на окончательный результат.

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

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

Как вы использовали фоновый рисунок и параметры маски Divi на своем веб-сайте? Дайте нам знать, что вы создали в комментариях ниже!