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

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

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

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

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

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

1. Перейдите к конструктору тем Divi.
2. Щелкните область «Добавить глобальный заголовок» шаблона веб-сайта по умолчанию (или используйте новый шаблон, если вы не хотите, чтобы он был глобальным).
3. В раскрывающемся меню выберите «Создать глобальный заголовок».

После этого вы сможете приступить к разработке нового заголовка с помощью Divi Builder.

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

1. Создание фона раздела с помощью цвета фона и узора

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

Фоновый цвет:

• Цвет фона: #262d3f

Фоновый узор:

• Выкройка: Таблетки
• Цвет узора: rgba (255 255 255, 0,1)
• Размер скороговорки: нестандартный размер
• Ширина узора: 1px

Заполнение раздела

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

• Отступы: 0px сверху, 0px снизу

Это немного уменьшит вертикальное пространство заголовка.

2. Добавление макета строки

Как только фон раздела будет готов, мы готовы добавить содержимое заголовка. В этом случае мы собираемся добавить меню слева и кнопку призыва справа, поэтому нам нужно добавить макет строки, который будет работать. Добавьте в раздел макет «три четверти — одна четвертая» (две колонки).

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

3. Добавление макета содержимого заголовка (меню и кнопка)

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

В левом столбце строки добавьте новое меню.

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

В правом столбце добавьте модуль кнопки и также настройте его по своему вкусу.

4. Создание фона строки с градиентом, маской и узором

Градиент

Откройте настройки строки, содержащей ваше меню и кнопку. Затем обновите параметры фона со следующими настройками фона:

Градиент фона:

• Градиентная остановка 1 Цвет: прозрачный
• Градиент Стоп 1 Позиция: 50%
• Градиент Стоп 2 Цвет: #ff4c00
• Позиция остановки градиента 2: 75%
• Направление градиента: 90 градусов

Шаблон

• Выкройка: Таблетки
• Цвет узора: rgba (38,45,63,0,48)
• Размер узора: 1px
• Вертикальное смещение шаблона: 20 пикселей

Примечание. Вертикальное смещение шаблона установлено на 20 пикселей, потому что верхний отступ в 20 пикселей находится в разделе над строкой. Это гарантирует, что рисунок секции совпадет с рисунком ряда.

Маска

• Маска: Шевроны
• Цвет маски: #262d3f

Для заголовков лучше всего использовать маски с симметричным дизайном. Маска Chevrons — отличный вариант, потому что она не только круто выглядит, но и заставляет пользователя смотреть на кнопку справа.

ПРИМЕЧАНИЕ. Для заголовков лучше оставить размер маски равным «Растянуть до заполнения», чтобы он покрывал горизонтальное пространство без ущерба для дизайна маски.

5. Последние штрихи к ряду

Чтобы завершить дизайн (буквально), мы добавим радиус границы и еще несколько настроек строки.

Радиус границы, граница и интервал

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

• Отступы: 5px сверху, 5px снизу

Затем придайте ряду красивый закругленный угол для дополнительного элемента дизайна.

• Закругленные углы: 50 пикселей
• Ширина левой границы: 50 пикселей
• Цвет левой границы: #262d3f

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

Расстояние между столбцами для вертикального выравнивания содержимого

И в качестве последнего штриха добавьте отступы во второй столбец, чтобы центрировать кнопку по вертикали.

• Отступы: 13 пикселей сверху, 13 пикселей снизу.

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

Давайте проверим окончательный результат. Вот наш новый заголовок, используемый на одной из страниц нашего пакета макетов личного тренера.

Градиент немного тонкий, поэтому вот подробнее, как он выглядит.

А вот и дизайн шапки на десктопе и мобайле.

Получайте удовольствие от экспериментов

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

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

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

Чтобы узнать больше, узнайте, как комбинировать новый конструктор градиентов Divi с масками и узорами.

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

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