Как стилизовать фон вашего полноразмерного модуля заголовка

Опубликовано: 2022-09-28

Модуль Divi Fullwidth Header позволяет легко создать потрясающий раздел для вашего веб-сайта всего за несколько минут. Главный раздел — это самый первый раздел вашего веб-сайта, который увидят ваши посетители, поэтому вам нужно, чтобы он был фирменным, информативным и убедительным. К счастью, заголовок Divi Fullwidth поставляется с вариантами содержимого: текст заголовка, текст подзаголовка, основной текст, два изображения и две кнопки. Сегодня мы будем использовать все эти элементы в наших заголовках полной ширины.

В этом посте мы собираемся продемонстрировать 3 способа оформления фона полноширинного заголовка с привлекательным дизайном. Готовы начать? Давайте погрузимся!

Предварительный просмотр дизайна

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

Сообщество Диви Бушкрафт

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

Миссис Николь во 2-м классе

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

Заголовок риелтора

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

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

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

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

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

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

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

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

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

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

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

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

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

Установите Divi на свой сайт WordPress.
Добавьте страницу, дайте ей название и опубликуйте.
Включите визуальный конструктор.

Настройка нашей страницы

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

Как создать полноширинный заголовок сообщества Divi Bushcraft

Добавьте раздел Fulldwith и заголовок Fullwidth

Во-первых, нам нужно добавить раздел полной ширины на нашу страницу. Нажмите на значок «+», чтобы открыть параметры раздела, а затем нажмите «Полная ширина». Это загрузит библиотеку модулей полной ширины, где вы можете выбрать «Заголовок полной ширины» из параметров. Это загрузит модуль заголовка полной ширины на вашу страницу.

Добавить контент

Теперь мы добавим содержимое нашего модуля на вкладку «Текст». Настройте следующие параметры:

Текст заголовка: Сообщество Divi Bushcraft
Текст субтитров: Диви Бушкрафт
Кнопка №1: Присоединяйтесь сегодня
Кнопка № 2: Узнать больше
Основной текст: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque Corpti quos dolores et quas molestias excludeuri sint occaecati cupiditate non предусмотрительно.

Стиль фона

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

Добавить фоновое изображение

Когда у вас есть фотографии, добавьте фоновое изображение.

Щелкните третий значок, значок изображения.
Нажмите «Добавить фоновое изображение». Это вызовет медиатеку, где вы можете загрузить новую фотографию или выбрать фотографию из своей медиатеки.
Установите режим наложения фонового изображения на Overlay .
Щелкните первый значок, значок ведра с краской и установите цвет фона: rgba (10,10,10,0,3).

Выберите макет

В разделе «Параметры дизайна» на вкладке «Макет» выберите «Выравнивание по центру». Установите для параметра «Сделать полноэкранный режим» значение «да».

Текст заголовка стиля

Стилизуйте текст заголовка, настроив следующие параметры:

Уровень заголовка заголовка: H1
Шрифт заголовка: Josefin Sans
Начертание шрифта заголовка: полужирный
Стиль шрифта заголовка: верхний регистр
Размер текста заголовка: 7rem

Стиль основного текста

Стилизуйте основной текст, настроив следующие параметры:

Основной шрифт: Жозефин Санс
Размер основного текста: 20 пикселей

Стиль текста субтитров

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

Шрифт субтитров: Josefin Sans
Вес шрифта субтитров: полужирный
Стиль шрифта субтитров: верхний регистр
Расстояние между буквами субтитров: 3 пикселя
Высота строки субтитров: 5em

Кнопка стиля №1

Теперь давайте стилизуем кнопки! Для первой кнопки настройте следующие параметры:

Использовать пользовательские стили для первой кнопки: Да
Размер текста кнопки One: 14px
Цвет текста первой кнопки: #666b4a
Фон кнопки номер один: #ead5a4
Ширина одной границы кнопки: 0px
Радиус границы одной кнопки: 0px
Кнопка Однобуквенный интервал: 3px
Стиль шрифта кнопки One: верхний регистр
Button One Padding: 15px сверху и снизу; 25px влево и вправо.

Кнопка стиля № 2

Чтобы оформить кнопку № 2, настройте следующие параметры:

Использовать пользовательские стили для первой кнопки: Да
Размер текста кнопки One: 14px
Цвет текста первой кнопки: #ead5a4
Кнопка 1 Фон: #666b4a
Ширина одной границы кнопки: 0px
Радиус границы одной кнопки: 0px
Кнопка Однобуквенный интервал: 3px
Стиль шрифта кнопки One: верхний регистр
Button One Padding: 15px сверху и снизу; 25px влево и вправо.

И, вуаля! У вас есть красиво оформленный полноразмерный заголовок с текстурированным фоновым изображением с наложением для сообщества Divi Bushcraft.

Как спроектировать заголовок миссис Николь во всю ширину

Теперь давайте создадим заголовок во всю ширину для второго класса миссис Николь! В этом заголовке используется фоновое изображение и градиент для создания забавного и свежего дизайна. Давайте начнем!