Хотите знать, как создать раздел Hero с модулем полноширинного заголовка Divi?

Создание раздела «Герой» — отличный способ привлечь внимание к содержание важно для вашей страницы. Это содержание большого размера, который вы можете использовать, чтобы рассказать свою историю, поделиться информацией о своей работе или выделить продукт или услугу.

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

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

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

Он ушел!

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

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

как создать раздел Hero с помощью модуля Divi Fullwidth Header
как создать раздел Hero с помощью модуля Divi Fullwidth Header

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

Прежде чем начать, убедитесь, что на вашем компьютере установлена ​​последняя версия Divi. Веб-сайт.

Теперь вы готовы начать!

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

Читайте также: Divi: Как использовать «Построитель градиентов», чтобы украсить ваши изображения

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

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

Из панели инструментов Worpress добавьте новую страницу в свой Веб-сайт

Divi

Дайте ему название, затем выберите вариант Используйте Диви Строитель.

Divi

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

Найдите и выберите макет Заводчик собак.

выбрать Использовать этот макет чтобы добавить макет на свою страницу.

Теперь мы готовы к дизайну.

Добавьте модуль Fullwidth Header.

Мы воссоздадим раздел героя, используя модуль Fullwidth Header. Добавьте на страницу новый полноразмерный раздел под существующим заголовком.

Добавьте в раздел модуль Fullwidth Header.

Модуль заголовка полной ширины

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

Настройте модуль Fullwidth Header

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

Откройте настройки модуля и добавьте содержание рядом с модулем:

  • Название: Ветеринар
  • Подзаголовок: Дививет. Служить нашим лучшим друзьям
  • Кнопка №1: Все услуги
  • Кнопка № 2: Записаться на прием
  • Тело: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu Erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Затем добавьте изображение заголовка.

Настройки градиентного фона

Зайдите в настройки фона. Удалите исходный цвет фона, затем добавьте градиент фона.

  • 0%: RGBA(255,170,205,0.48)
  • 40%: RGBA(110,66,255,0.24)
  • 87%: rgba (124,239,255,0.71 XNUMX XNUMX)
  • Тип градиента: Эллиптический
  • Положение градиента: справа

Затем выберите вкладку Фоновая маска и добавьте фоновую маску.

  • Фон маски: угловая капля
  • Цвет маски: #FFFFFF
  • Преобразование: вертикальное

Настроить текст

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

  • Шрифт названия: Нунито
  • Толщина шрифта заголовка: Ультра полужирный
  • Стиль шрифта: TT (верхний регистр)
  • Цвет текста заголовка: #a9cb6b
  • Размер текста: 14 пикселей
  • Расстояние между буквами заголовка: 2 пикселя

Перейти в раздел Основной текст и настроить шрифт.

  • Цвет текста: # 000000
  • Размер основного текста:
    • Рабочий стол: 18 пикс.
    • Телефон: 14px
  • Высота линии кузова: 1.8 см

Смотрите также: Divi: Как настроить иконки корзины и поиска модуля "Полноширинное меню"

Затем откройте настройки субтитров и настройте шрифт.

  • Шрифт субтитров: Nunito
  • Начертание шрифта субтитров: полужирный
  • Цвет текста: #000000

Наконец, измените размер текста

  • Размер текста субтитров:
    • Рабочий стол: 56 пикс.
    • Подвижный: 32px
  • Высота строки субтитров: 1.2em

Настроить кнопку №1

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

  • Использовать пользовательские стили для кнопки: ДА
  • Размер текста кнопки One: 14px

Добавьте фоновый градиент к кнопке. Значения градиента следующие:

  • 58%: #316EFF
  • 100%: #1D2B60
  • Направление градиента: 90 градусов

Затем настройте параметры границ и параметры шрифта.

  • Кнопка один:
    • Ширина границы: 0 пикселя
    • Радиус границы: 80px
    • Расстояние между буквами: 2px
    • Шрифт: Нунито
    • Вес шрифта: очень жирный
    • Стиль: ТТ (с большой буквы)
  • Показать значок кнопки One: НЕТ

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

  • Кнопка One Margin
    • Верх: 200 пикселей
    • Внизу: 0px
  • Кнопка One Padding:
    • Верх: 16 пикселей
    • Внизу: 16 пикселей
    • Слева: 2ЭМ
    • Справа: 50em
  • Box Shadow: просмотр захвата

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

  • Кнопка One Margin-Top-Mobile: 25px
  • Кнопка One Padding-Right-Mobile: 10em

Настроить кнопку №2

Сначала щелкните правой кнопкой мыши кнопку № 1 и нажмите Копировать стили кнопки One.

Затем щелкните правой кнопкой мыши вторую кнопку и вставьте стили из кнопки №1.

Теперь мы можем настроить вторую кнопку. Измените цвет текста.

  • Цвет текста второй кнопки: #121F60

Настройте градиент фона для второй кнопки.

  • 30%: RGBA(0,229,198,0)
  • 100%: #00e5c6

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

  • 0%: RGBA(0,229,198,0)
  • 100%: #00e5c6

Затем настройте поля и отступы для дизайна рабочего стола.

  • Кнопка два поля:
    • Сверху: 0 пикселей
    • Внизу: 0px
    • Слева: 30%
  • Кнопка два заполнения:
    • Верх: 16 пикселей
    • Внизу: 16px
    • Слева: 48ЭМ
    • Справа: 2em

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

  • Кнопка 5 Margin-Left-Mobile: XNUMX%
  • Кнопка два заполнения:
    • Лево-мобильные: 35%
    • Право-мобильный: 5%

Пользовательский CSS

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

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

z-index: 1;
position:relative;

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

Для настольного компьютера:

padding-top:50px;
padding-bottom:30px;

Для мобильных устройств:

padding-top:5px;
padding-bottom:10px;

Наконец, добавьте следующий CSS-код к первой и второй кнопкам.

white-space: nowrap;

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

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

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

как создать раздел Hero с помощью модуля Divi Fullwidth Header
как создать раздел Hero с помощью модуля Divi Fullwidth Header

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

Заключение

Модуль Fullwidth Header позволяет легко создать красивый раздел Hero для рекламы ваших услуг и посетителей о чем ты говоришь Веб-сайт.

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

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

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

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

...