Divi: Как использовать модуль Fullwidth Header для создания раздела Hero

Хотите создать раздел Hero Divi с модулем Fullwidth Header или создать его самостоятельно?

Создание главного раздела веб-сайта с нуля или использование модуля Divi Fullwidth Header — это два способа создать привлекательный дизайн для вашего веб-сайта. 

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

Давайте!

Важность главных разделов веб-сайта

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

Читайте также: Divi: как отобразить модуль заголовка Fullwidth в полноэкранном режиме

Поэтому важно, чтобы он был разработан таким образом, чтобы его было легко читать, но при этом он оставался привлекательным и убедительным. Разделы «Герой веб-сайта» важны, поскольку они могут привлечь внимание потенциальных клиентов, быстро описать страницу и привести к дополнительному участию и потенциальным клиентам. Героические разделы должны быть фирменными, включать заголовок H1 и призыв к действию.

Создайте раздел Hero с нуля

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

Давайте взглянем на плюсы и минусы этого подхода.

Преимущества такого подхода

Во-первых, давайте посмотрим на преимущества создания раздела Hero с нуля с помощью Divi.

• Полный контроль дизайна
• Используйте любой модуль Divi

Недостатки этого подхода

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

• Вы должны построить с нуля
• Требуется несколько модов

Создайте раздел Hero с модулем Divi Fullwidth Header.

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

Давайте взглянем на плюсы и минусы этого подхода.

Преимущества такого подхода

Давайте посмотрим на преимущества создания раздела Hero с модулем Divi Fullwidth Header.

• Весь ваш контент находится в одном модуле
• Дизайн уже оптимизирован

Недостатки этого подхода

Теперь давайте оценим недостатки разработки раздела Hero с модулем Divi Fullwidth Header.

• Меньше гибкости с дизайном

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

Построение двух разделов Героя шаг за шагом

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

Создайте новую страницу с помощью Divi Builder

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

1. Установить Диви  на вашем сайте WordPress.
2. Добавьте страницу и дайте ей название.
3. Включить визуальный конструктор

Создайте свой раздел Hero с нуля

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

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

Активируйте «Конструктор Диви»

Чтобы использовать конструктор перетаскивания Divi, нам нужно активировать Visual Builder, нажав кнопку «Используйте DiviBuilder». Это перезагрузит страницу с помощью Divi Visual Builder.

Выберите: построить с нуля

Теперь, когда ваша страница перезагрузилась с включенным визуальным конструктором, нажмите на параметры « ПОСТРОИТЬ С НУЛЯ чтобы у нас была чистая страница для работы при проектировании.

Добавить строку и настроить столбцы

Создайте строку со следующей структурой столбцов.

Добавить моды

Теперь добавим модули контента, которые нам понадобятся.

• 2 текстовых модуля, разделитель, кнопка в левой колонке
• 1 модуль изображения в средней колонке
• 1 модуль изображения в правом столбце

Раздел стиля

Теперь настроим параметры раздела.

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

• Фон: #1d1d25

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

Настроить текст заголовка:

• Заголовок 1:
  • Вес шрифта: полужирный
  • Цвет текста: #ffffff
  • Размер текста: 90 пикселей
  • Высота строки: 1,1 см

сепаратор

Настройте параметры делителя:

• Цвет линии: rgba(255,255,255,0.3)
• Вес разделителя: 10 пикселей
• Максимальная ширина: 260 пикселей

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

Настройте основной текст:

• Цвет текста: rgba (255,255,255,0.7 XNUMX XNUMX, XNUMX)
• Размер текста: 13 пикселей
• Высота строки: 1,8 см

кнопка

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

Во вкладке «Кнопка»:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 14px
• Цвет текста: #ffffff
• Фон кнопки:
• Ширина границы: 0 пикселей
• Радиус границы: 0 пикселей

На вкладке «Интервал»:

• Верх и низ: 40 пикселей
• Слева и справа: 20 пикселей

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

Добавьте изображения в модули изображений.

Изменить настройки линии

В параметрах строки:

• Маржа (слева): 15vw

Изменить 2-й столбец

Во втором столбце настройте следующие параметры:

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

Вставьте следующий код в раздел кода основного элемента:

argin-right: -15vw!important;
z-index: 100!important;

расстояние

Добавьте 100 пикселей верхнего отступа.

Вот оно! Теперь у вас есть полностью разработанный пользовательский раздел Hero.

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

Создайте раздел «Герой» с помощью модуля Divi Fullwidth Header.

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

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

Добавьте страницу и выберите «Создать с нуля».

Добавьте новую страницу, дайте ей название, затем нажмите «Использовать Divi Builder», затем выберите «Создать с нуля».

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

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

Содержание

Добавьте текстовое содержимое в модуль на вкладке «Текст».

Фотографии

Добавьте изображения на вкладке изображения.

Изменить цвет фона

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

• Фон: #1D1D25

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

Настройте параметры текста заголовка:

• Начертание шрифта заголовка: полужирный
• Размер текста: 90 пикселей

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

Настройте параметры основного текста:

• Цвет основного текста: rgba(255,255,255,0.55)

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

Настройте параметры текста подписи:

• Начертание шрифта субтитров: полужирный
• Цвет текста: #4C594C
• Расстояние между буквами: 3 пикселя

кнопки

Теперь давайте настроим две кнопки.

кнопка один

На вкладке Button One настройте следующие параметры:

• Использовать пользовательские стили для первой кнопки: Да
• Кнопка первая
  • Фон: #4c594c
  • Ширина границы: 0 пикселей
  • Радиус границы: 0px
  • Показать значок: ДА
  • Показывать значок только при наведении: нет
  • Отступы: 25 пикселей (сверху и снизу); 25 пикселей (слева), 50 пикселей (справа)

Кнопка два

На вкладке Button Two настройте следующие параметры:

• Использовать пользовательские стили для второй кнопки: ДА
• Ширина двух границ кнопки: 0 пикселей
• Радиус границы: 0px
• Отступы: 25 пикселей (сверху, снизу, слева и справа)
• Тень коробки кнопок: выберите 4-й
• Коробчатая тень Горизонтальное положение: 0px
• Коробчатая тень по вертикали: 2px
• Цвет тени: #ffffff

Вот оно! Теперь у вас есть полностью разработанный раздел Hero с использованием модуля Divi Fullwidth Header.

Смотрите также: Divi: Как создать фоновые переходы между элементами

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

Заключение

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

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

Прочитав плюсы и минусы обоих, как бы вы разработали раздел «Герой»?

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

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

...