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

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

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

В сегодняшней статье мы покажем вам, как воссоздать разделы "Герой" с помощью... Полноразмерный заголовок DiviМы начнем разработку дизайна, используя 3 предопределенных набора макетов, и разработаем разделы, уделяя особое внимание балансу основных и второстепенных кнопок. 

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

Принципы дизайна первичных и вторичных кнопок

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

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

Теперь, когда мы понимаем, как работают основные и дополнительные кнопки, давайте перейдем к руководству!

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

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

Начнем с создания новой страницы с помощью Divi Builder.

В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.

Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель

Затем нажмите Начать строительство (Построить с нуля)

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

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

Дизайн первого примера

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

Настройка нашей страницы

Прежде чем мы сможем начать настройку, нам нужно будет загрузить предопределенный пакет макетов. UX из библиотеки Диви. Когда вы активируете Visual Builder, вы увидите три всплывающих опции, выберите Просмотр макетов.

Загрузить пакет макетов

Чтобы загрузить пакет макетов UX на свою страницу:

1. Во вкладке «Готовые макеты», используйте функцию поиска, чтобы найти пакет макетов UX.
2. Найдя нужный пункт, щелкните по нему. Отобразятся подробные сведения о структуре и доступные страницы.
3. Cliquez-сюр- приземлениеИ нажмите "Используйте этот макет".

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

Удалить первый раздел

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

Добавить раздел полной ширины

Прежде чем добавить заголовок во всю ширину страницы, нам нужно добавить раздел во всю ширину страницы.

Нажмите на стрелку "+" чтобы отобразить разделы Divi, затем нажмите "Полная ширина". Это автоматически вызовет библиотеку модулей Divi Fullwidth.

Добавьте заголовок во всю ширину

В библиотеке модулей Divi Fullwidth нажмите на "Заголовок полной ширины".

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

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

Добавьте текстовый контент

На вкладке «Текст» добавьте следующее содержимое:

1. Название: Улучшите свои знания в области UX-дизайна
2. Подзаголовок: Курс UX-дизайна
3. Кнопка №1: Обзор курса
4. Кнопка № 2: Узнать больше
5. Тело: по умолчанию

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

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

1. Во вкладке ФотографииДобавьте изображение логотипа (звезды) и изображение заголовка (фотография человека, держащего телефон).

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

Во вкладке Предыстория, настройте этот параметр:

1. Цвет фона: #131517

Настройте заголовок во всю ширину экрана.

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

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

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

1. Показать кнопку прокрутки вниз: ДА.
2. Выберите значок стрелки вниз.
3. Цвет значка прокрутки вниз: #000

Фото товара

Давайте добавим кривые нашим изображениям, закруглив углы.

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

1. Скругленные углы изображения : нажмите кнопку звена цепи, чтобы разъединить углы, затем введите 1000px в нижнем левом и нижнем правом полях ввода. Это скруглит нижний левый и нижний правый углы наших изображений.

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

Давайте настроим заголовок для этого модуля. На вкладке Текст заголовка, настройте эти параметры:

• Название:
  • Шрифт: PT Sans
  • Вес шрифта: полужирный
  • Размер текста: 5 рем
  • Высота строки: 1,2 см

текст тела

Здесь мы настраиваем основной текст этого модуля. На вкладке Основной текст, настройте эти параметры:

1. Шрифт тела: Мукта
2. Размер основного текста: 18 пикселей

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

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

• Подзаголовок:
  • Шрифт: Мукта
  • Вес шрифта: полужирный
  • Стиль: верхний регистр
  • Цвет текста: #13d678
  • Расстояние между буквами: 3 пикселя

кнопка один

Здесь мы можем задать пользовательские стили для первой кнопки: главная кнопкаНа вкладке КнопкаОдин, настройте эти параметры:

• Использовать пользовательский стиль для первой кнопки: ДА
• Кнопка один:
  • Цвет текста: #ffffff
  • Цвет фона: #13d678
  • Ширина границы: 0 пикселей
  • Радиус границы: 100 пикселей
  • Шрифт: Мукта
  • Вес шрифта: полужирный
• Показать значок кнопки One: ДА
• Значок: стрелка вправо
• Показывать значок только при наведении для первой кнопки: нет

Кнопка два

Теперь давайте настроим второй: дополнительная кнопкаНа вкладке Вторая кнопка, настройте эти параметры:

• Использовать пользовательский стиль для кнопки: ДА
  • Вторая кнопка
  • Цвет текста: #ffffff
  • Цвет фона: #303030
  • Ширина границы: 0 пикселей
  • Радиус границы: 100 пикселей
  • Шрифт: Мукта
  • Вес шрифта: полужирный
• Показать значок второй кнопки: Да
• Кнопка два значок: стрелка вправо
• Показывать значок только на кнопке Hover Two: ДА

Добавьте ссылки на кнопки

Не забудьте добавить ссылки на ваши кнопки! Во вкладке Ссылка, настройте следующие параметры:

1. Ссылка на кнопку №1: вставьте сюда URL кнопки №1.
2. Ссылка на кнопку №1: вставьте сюда URL кнопки №2.

Сохраните вашу работу

Теперь, когда у нас есть полностью разработанный заголовок во всю ширину, обязательно сохраните свой дизайн!

• Щелкните зеленую стрелку в правом нижнем углу окна модуля.
• Сохранено
• Выйдите из VisualBuilder.

Читайте также: Divi: как создать раздел Fluid Hero

Получайте удовольствие от экспериментов

Возможности настройки модуля Divi Fullwidth Header безграничны. Использование основных и дополнительных кнопок может помочь направить посетителей на нужную страницу или к выполнению желаемого действия (например, отправке запроса).

Давайте рассмотрим еще два примера полноэкранных заголовков, в которых выделяется основная кнопка.

Заголовок во всю ширину страницы для пакета "Центр для пенсионеров".

Стили кнопок

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

кнопка один

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

• Использовать пользовательские стили для первой кнопки: ДА
• Кнопка один:
  • Размер текста: 14 пикселей
  • Цвет текста: #ffffff
  • Цвет фона: #0a0a0a
  • Ширина границы: 0 пикселей
  • Радиус границы: 10 пикселей
  • Расстояние между буквами: 3px
  • Вес шрифта: полужирный
  • Стиль шрифта: ТТ
• Показывать значок только при наведении для кнопки XNUMX: ДА
• Кнопка One Padding: 15 пикселей (сверху и снизу), 25 пикселей (слева и справа)

Кнопка два

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

• Использовать пользовательский стиль для кнопки: ДА
  • Кнопка вторая:
  • Размер текста: 14 пикселей
  • Цвет текста: #ffffff
  • Цвет фона: #0a0a0a
  • Ширина границы: 0 пикселей
  • Радиус границы: 10 пикселей
  • Вес шрифта: полужирный
  • Стиль шрифта: ТТ
• Кнопка 10 Padding: 10px (снизу), XNUMXpx (слева и справа)

И вот! Две уникальные кнопки, одна выделяется, а другая занимает второе место.

Заголовок во всю ширину страницы для пакета «Финансовое планирование».

Стили кнопок

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

кнопка один

Во вкладке Кнопка первая, настройте следующие параметры:

• Использовать пользовательский стиль для первой кнопки: ДА
• Кнопка один:
  • Размер текста: 18 пикселей
  • Цвет текста: #ffffff
  • Цвет фона: #1b4ffe
  • Отступы: 15 пикселей (сверху и снизу); 25 пикселей (слева и справа)

Кнопка два

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

• Использовать пользовательский стиль для второй кнопки: ДА
• Кнопка вторая:
  • Цвет текста: #1b4ffe
  • Цвет фона: прозрачный
  • Цвет значка: #1b4ffe

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

Заключение

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

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

Возможности настройки заголовка во всю ширину страницы безграничны, так что смело экспериментируйте!

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

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

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

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

...