Как сделать полноэкранный модуль заголовка Divi Fullwidth

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

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

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

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

Рабочий стол

планшет

Телефон

Зачем делать полноэкранный заголовок с модулем заголовка Divi Fullwidth?

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

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

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

Во-вторых, он может преподнести пользователю интересный дизайн, который удержит его на сайте. У веб-сайтов есть всего несколько секунд, чтобы привлечь внимание посетителей.

При создании полноэкранного заголовка следует помнить о нескольких вещах:

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

Как сделать полноэкранный заголовок Divi полноэкранным

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

Откроются настройки модуля. Выберите вкладку «Дизайн». Включите параметр « Сделать полноэкранным ».

Теперь у нас есть полноэкранный заголовок. Это так просто.

Включить значок полноэкранной прокрутки заголовка вниз

Мы также можем добавить кнопку, указывающую пользователю на прокрутку вниз. Тем не менее, мы должны включить его. Эта кнопка всегда видна в полноэкранном режиме. Вариант полноэкранного заголовка всегда соответствует высоте экрана посетителя.

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

Полноэкранный заголовок Divi Пример полноэкранного заголовка

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

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

Настройки полноэкранного модуля заголовка

Вот шаги для каждого раздела настроек в полноэкранном модуле заголовка.

Текст

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

• Название: Фотостудия Диви
• Подзаголовок: Фотография
• Кнопка 1: Краткое описание проекта
• Кнопка 2: Планирование проекта
• Тело: содержание

Картинки

Далее добавляем изображение . Это отображается в правой части заголовка полной ширины, перемещая текст влево.

• Изображение в шапке: на ваш выбор

Фон

Прокрутите вниз до Фона и установите Цвет на #f6f5ee.

• Цвет: #f6f5ee

Макет

Далее перейдите на вкладку «Дизайн». Включите Сделать полноэкранным .

• Сделать полноэкранным: Да

Иконка Прокрутить вниз

Затем включите значок прокрутки вниз . Измените цвет на черный для компьютеров и планшетов и белый для телефонов. С изображением, которое я выбрал, значок появится на изображении внизу для телефонов, и это позволяет ему быть видимым с цветами изображения. Измените размер значка на 70 пикселей для настольных компьютеров, 60 пикселей для планшетов и 50 пикселей для телефонов.

• Показать кнопку прокрутки вниз: Да
• Цвет значка: #000000 Рабочий стол и планшет, #ffffff Телефон
• Размер: 70 пикселей для рабочего стола, 60 пикселей для планшета, 50 пикселей для телефона.

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

Далее мы настроим текст заголовка . Установите текст на H1 и выберите Inter для шрифта. Установите жирный шрифт, выравнивание по центру и цвет черный.

• Заголовок: H1
• Шрифт: Интер
• Вес: Жирный
• Выравнивание: по центру
• Цвет: #000000

Мы будем использовать три размера для размера шрифта : 75 пикселей для настольных компьютеров, 40 пикселей для планшетов и 24 пикселей для телефонов. Измените высоту строки на 1,2 em.

• Размер: 75 пикселей для настольных ПК, 40 пикселей для планшетов, 24 пикселей для телефонов.
• Высота строки: 1.2em

Основной текст

Затем прокрутите вниз до основного текста . Выберите Open Sans для шрифта. Установите Выравнивание по левому краю и Цвет на черный.

• Шрифт: Open Sans
• Выравнивание: слева
• Цвет: #000000

Установите размер шрифта на 16 пикселей для настольных компьютеров, 15 пикселей для планшетов и 14 пикселей для телефонов. Измените высоту строки на 1,8 em.

• Размер: 16 пикселей для рабочего стола, 15 пикселей для планшета, 14 пикселей для телефона.
• Высота строки: 1,8 см

Текст субтитров

Затем прокрутите вниз до Текст субтитров . Измените шрифт на Inter. Установите жирность на жирный, стиль на TT, выравнивание по центру и цвет на #ff5a17.

• Шрифт: Интер
• Вес: Жирный
• Стиль: ТТ
• Выравнивание: по центру
• Цвет: #ff5a17

Измените размер на 14 пикселей для всех трех размеров экрана. Измените межбуквенный интервал на 1px и высоту строки на 1.4em.

• Размер: 14 пикселей
• Расстояние между буквами 1px
• Высота строки: 1,8 см

Кнопка один

Затем прокрутите вниз до Button One и выберите Use Custom Styles for Button . Измените цвет текста на черный.

• Использовать пользовательские стили для кнопки: Да
• Размер: 20 пикселей для рабочего стола, 18 пикселей для планшета, 16 пикселей для телефона.
• Цвет текста: #000000

Измените цвет фона на белый и установите ширину и радиус границы на 0px.

• Цвет фона: #ffffff
• Ширина одной границы кнопки: 0px
• Радиус границы одной кнопки: 0px

Измените шрифт на Inter и жирность на жирный.

• Шрифт: Интер
• Вес: Жирный

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

• Значок: на ваш выбор
• Цвет значка: #000000
• Размещение значка кнопки One: слева
• Показывать значок только при наведении для первой кнопки: нет

Наконец, прокрутите вниз до параметров заполнения Button One. Мы будем использовать разные отступы для каждого размера экрана. Для настольных компьютеров используйте 20 пикселей для верхнего и нижнего края и 40 пикселей для левого и правого. Для планшетов измените верхний и нижний отступы на 16 пикселей. На телефонах измените верхний и нижний отступы на 12 пикселей. Оставьте левое и правое заполнение одинаковыми для всех трех.

• Отступы на рабочем столе: 20 пикселей сверху и снизу, 40 пикселей слева и справа
• Отступы для планшета: 16 пикселей сверху и снизу, 40 пикселей слева и справа
• Заполнение телефона: 12 пикселей сверху и снизу, 40 пикселей слева и справа

Кнопка два

Наконец, прокрутите вниз до второй кнопки . Выберите «Использовать пользовательские стили для кнопки» . Установите размер шрифта на 20 пикселей для настольных компьютеров, 19 пикселей для планшетов и 16 пикселей для телефонов. Измените цвет текста на белый.

• Использовать пользовательские стили для кнопки: Да
• Размер: 20 пикселей для рабочего стола, 18 пикселей для планшета, 16 пикселей для телефона.
• Цвет текста: #ffffff

Измените цвет фона на #ff5a17. Установите ширину и радиус границы на 0px.

• Цвет фона: #ff5a17
• Ширина границы двух кнопок: 0px
• Радиус границы двух кнопок: 0px

Затем измените шрифт на Inter и жирность на жирный.

• Шрифт: Интер
• Вес: Жирный

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

• Значок: на ваш выбор
• Цвет значка: #000000
• Расположение значка второй кнопки: слева
• Показывать значок только при наведении для второй кнопки: нет

Наконец, прокрутите вниз до параметров заполнения второй кнопки. Для настольных компьютеров используйте 20 пикселей для верхнего и нижнего края и 40 пикселей для левого и правого. На планшетах измените верхний и нижний отступы на 16 пикселей. Для телефонов измените верхний и нижний отступы на 12px. Закройте модуль и сохраните свою работу.

• Отступы на рабочем столе: 20 пикселей сверху и снизу, 40 пикселей слева и справа
• Отступы для планшета: 16 пикселей сверху и снизу, 40 пикселей слева и справа
• Заполнение телефона: 12 пикселей сверху и снизу, 40 пикселей слева и справа

Результаты заголовка в полноэкранном режиме

Вот как наш полноразмерный заголовок выглядит на настольных компьютерах, планшетах и ​​телефонах.

Рабочий стол

планшет

Телефон

Завершение мыслей о создании полноэкранного заголовка с помощью модуля Divi Fullwidth Header

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

Ждем вашего ответа. Вы сделали полноэкранный заголовок Divi Fullwidth? Дайте нам знать об этом в комментариях.