Вы хотите создать уникальный и потрясающий фон с масками и фоновыми узорами из Divi ?
Новые фоновые маски и узоры Divi чаще всего используется для разделов страницы. Но мы также можем добавить их в заголовки!
В этом уроке мы покажем вам, как добавлять маски и фоновые узоры в шаблон заголовка. Divi с помощью конструктора темы.
Это отличный способ создать совершенно уникальный дизайн заголовков для вашего сайта. Веб-сайт.
Давайте начнем.
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Перейдите в конструктор тем Divi и начните создавать глобальный заголовок.
В панели управления WordPress перейдите к Divi > Конструктор тем
Cliquez-сюр- «Добавить глобальный заголовок»
выбрать «Построить глобальный заголовок».
После этого вы можете приступить к разработке нового заголовка с помощью Divi Builder.
Как добавить фоновые маски и узоры в заголовок Divi
Создание фона раздела с фоновым цветом и узором
Читайте также: Divi: Как создать раздел отзывов в виде сетки
Для начала откройте настройки существующего раздела.
Под вкладкой Содержание, обновите параметры фона со следующими настройками:
Фоновый цвет:
- Фон: #262d3f
Фоновый узор:
- Модель: Таблетки
- Цвет узора: rgba (255,255,255,0.1 XNUMX XNUMX, XNUMX)
- Размер узора: нестандартный размер.
- Ширина узора: 1px
Набивка
Под вкладкой Проект, обновите заполнение раздела следующим образом:
- Отступы (сверху и снизу): 0 пикселей
Это немного уменьшит вертикальное пространство заголовка.
Добавьте строку со следующим расположением столбцов
Добавлено содержимое заголовка заполнителя (меню и кнопка)
В левом столбце строки добавьте новое меню.
Выберите меню.
Затем добавьте логотип и используйте настройки, чтобы настроить меню и логотип по своему усмотрению.
В правой колонке добавьте модуль кнопки и также настройте его по своему вкусу.
Создание фона линии с градиентом, маской и узором
Градиент
Откройте настройки строки, содержащие ваше меню и кнопку. Затем обновите параметры фона со следующими настройками фона:
Фоновый градиент:
- Остановки градиента 1 (50%): очистить
- Остановки градиента 2 (75%): #ff4c00
- Рулевое управление: 90 градусов
шаблон
- Модель: Таблетки
- Цвет узора: rgba (38,45,63,0.48)
- Размер шаблона: 1 пиксель
- Вертикальное смещение: 20 пикселей
Примечание. Вертикальное смещение шаблона установлено на 20 пикселей, потому что верхний отступ в секции над линией составляет 20 пикселей. Это гарантирует, что рисунок сечения совпадет с рисунком ряда.
Фоновая маска
- Маска: Елочка
- Цвет маски: #262d3f
ПРИМЕЧАНИЕ. Для заголовков лучше оставить размер маски равным «Расширить до заполнения», чтобы он покрывал горизонтальное пространство без ущерба для дизайна маски.
Последние штрихи к линии
Смотрите также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения
Чтобы завершить дизайн, мы добавим радиус границы и еще немного отредактируем линию.
Радиус, граница и расстояние между границами
Под вкладкой Проект, обновите заполнение следующим образом:
- Отступы (сверху и снизу): 5 пикселей
Затем придайте ряду красивый закругленный угол для дополнительного элемента дизайна.
- Закругленные углы: 50 пикселей
- Ширина левой границы: 50px
- Цвет левой границы: #262d3f
Нам нужно задать границу левой стороне строки, потому что квадратный край маски будет выходить за пределы строки, несмотря на закругленные углы.
Конечный результат
Давайте посмотрим на конечный результат.
Градиент немного тонкий, так что вот посмотрите, как он выглядит.
А вот десктопный и мобильный дизайн шапки.
Скачайте DIVI прямо сейчас!!!
Заключение
Дизайн фона заголовка — это только верхушка айсберга. Есть много возможностей для изучения параметров фона, доступных в Divi.
Мы надеемся, что это руководство помогло вам понять, как фоновые маски и шаблоны Divi могут работать вместе, чтобы создать уникальный дизайн фона для ваших заголовков.
Не стесняйтесь экспериментировать с другими комбинациями дизайна фона, чтобы соответствовать вашему собственному дизайну. Веб-сайт или ваш предстоящий проект.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
