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

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

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

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

Давайте!

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

Раздел «Герой» — это самый первый раздел, который вы посетителей узнай, когда они прибудут на твой Веб-сайт. Часто это полноразмерный баннер, который также может называться главным заголовком. Это видное место на вашем веб-сайте, потому что оно способно произвести неизгладимое первое впечатление.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь, когда вы понимаете плюсы и минусы обоих подходов, давайте создадим каждый раздел 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 всех времен.

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

...