Вы хотите отобразить полноэкранный модуль Divi Fullwidth Header?

Полноэкранные заголовки занимают весь экран независимо от размера экрана. посетитель. Это отлично подходит для привлечения внимания пользователей. К счастью, с помощью модуля легко создать полноэкранный заголовок. Заголовок полной ширины Диви.

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

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

обследование

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

офис

таблетка

Полноэкранный модуль Divi Fullwidth Header

телефон

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

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

Затем добавьте Модуль заголовка полной ширины на всю ширину раздела.

Откроются настройки модуля. Выберите вкладку Проект. Активируйте опцию под названием Сделать полноэкранным

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

Включить значок прокрутки

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

  • Показать кнопку прокрутки вниз: ДА

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

Параметры модуля полноширинного заголовка

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

Читайте также: Divi: Как комбинировать фоновые маски и разделители

Текст

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

  • Название: Создать ваш блог с Диви
  • Подзаголовок: Блогпасчер
  • Буррон № 1: Резюме
  • Кнопка № 2: Расписание
  • Тело: (по умолчанию)

Фотографии

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

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

фон

Прокрутите до проверка данных  и установите цвет #f6f5ee.

  • Цвет фона: #f6f5ee

Предоставление

Далее перейдите на вкладку «Дизайн».

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

Значок прокрутки вниз

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

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

Далее мы настроим текст заголовка.

  • Уровень заголовка: H1
  • Шрифт: Интер
  • Толщина шрифта: полужирный
  • Выравнивание текста: по центру
  • Цвет текста: #000000
  • Размер текста заголовка: 75 пикселей (рабочий стол), 40 пикселей (планшет), 24 пикселя (телефон).
  • Высота строки заголовка: 1.2em

Текст описания

Затем прокрутите вниз до Основной текст.

  • Шрифт: Open Sans
  • Выравнивание: слева
  • Цвет: #000000
  • Размер текста: 16 пикселей (рабочий стол), 15 пикселей (планшет), 14 пикселей (телефон).
  • Высота строки: 1.8 см

подзаголовок

Затем прокрутите вниз до Текст субтитров.

  • Шрифт: Интер
  • Вес шрифта: полужирный
  • Стиль: ТТ
  • Выравнивание: по центру
  • Цвет: #ff5a17
  • Размер: 14 пикселей
  • Расстояние между буквами: 1px
  • Высота строки: 1.8 см

Кнопка №1

Затем прокрутите вниз до Кнопка первая.

  • Использовать пользовательские стили для кнопки: ДА
  • Размер текста: 20 пикселей (рабочий стол), 18 пикселей (планшет), 16 пикселей (телефон).
  • Цвет текста: #000000
  • Цвет фона: #ffffff
  • Ширина границы: 0 пикселя
  • Радиус границы: 0px
  • Шрифт: Интер
  • Вес шрифта: полужирный
  • Значок: на ваш выбор
  • Цвет значка: #000000
  • Размещение: справа
  • Показывать значок только при наведении для кнопки One: НЕТ

Наконец, прокрутите вниз до вариантов Кнопка One Padding.

  • Прокладка:
    • Рабочий стол: 20 пикселей (сверху и снизу), 40 пикселей (слева и справа)
    • Планшет: 16 пикселей (сверху и снизу), 40 пикселей (слева и справа)
    • Телефон: 12 пикселей (сверху и снизу), 40 пикселей (слева и справа)

Кнопка №2

Наконец, прокрутите вниз до Вторая кнопка.

  • Использовать пользовательские стили для второй кнопки: Да
  • Размер текста: 20 пикселей (рабочий стол), 18 пикселей (планшет), 16 пикселей (телефон)
  • Цвет текста: #ffffff
  • Цвет фона: #ff5a17
  • Ширина границы: 0 пикс.
  • Радиус границы: 0px
  • Шрифт: Интер
  • Вес шрифта: полужирный

Выберите свой любимый значок.

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

Наконец, прокрутите вниз до вариантов Кнопка два заполнения.

  • Прокладка:
    • Рабочий стол: 20 пикселей (сверху и снизу), 40 пикселей (слева и справа)
    • Планшет: 16 пикселей (сверху и снизу), 40 пикселей (слева и справа)
    • Телефон: 12 пикселей (сверху и снизу), 40 пикселей (слева и справа)

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

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

Вы также можете проконсультироваться: Divi: как использовать эффекты тени и наведения для создания интерактивного контента

офис

Полноэкранный модуль Divi Fullwidth Header

таблетка

Полноэкранный модуль Divi Fullwidth Header

телефон

Полноэкранный модуль Divi Fullwidth Header

Скачайте DIVI прямо сейчас!!!

Заключение

Вот наш взгляд на то, как создать полноширинный заголовок с помощью модуля Divi Fullwidth Header.

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

Разработка полноэкранного заголовка аналогична разработке раздела Hero. Следуя нескольким простым рекомендациям, вы сможете создавать потрясающие полноэкранные заголовки с помощью модуля Divi Fullwidth Header.

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...