Хотели бы вы настроить модуль полноширинного заголовка Divi, сбалансировав основные и дополнительные кнопки?
Модуль Divi Fullwidth Header позволяет легко добавлять красивые разделы Hero в ваш Веб-сайт. Модуль поставляется с двумя кнопками, текстом заголовка, текстом подзаголовка, основным текстом, логотипом и изображением, что делает возможности настройки безграничными.
В сегодняшней статье мы покажем вам, как воссоздать разделы героев с помощью Полноразмерный заголовок Divi. Мы начнем наш дизайн с 3 готовых пакетов макетов и разработаем наши разделы с акцентом на баланс основных и второстепенных кнопок.
Мы хотим, чтобы основная кнопка выделялась, потому что это наш основной призыв к действию, при этом второстепенная кнопка оставалась видимой и доступной, но не замещала собой основную кнопку.
Принципы дизайна первичных и вторичных кнопок
Справочное руководство по основным и дополнительным кнопкам посетителей ваш Веб-сайт на определенные акции. Основные кнопки обычно являются наиболее распространенными или желаемыми действиями, а второстепенные кнопки — менее распространенными действиями. Это помогает направлять посетителей туда, куда они хотят пойти.
Для этого основные кнопки должны визуально выделяться, а второстепенные кнопки не должны выделяться так сильно. Это означает, что основные кнопки должны быть более заметными и иметь больший визуальный вес, чтобы привлекать больше внимания.
Теперь, когда мы понимаем, как работают основные и дополнительные кнопки, давайте перейдем к руководству!
обследование
Вот посмотрите на три полноразмерных заголовка, которые мы будем разрабатывать сегодня.
Начнем с создания новой страницы с помощью Divi Builder.
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Читайте также: Divi: как использовать маски и фоновые узоры для раздела героя
Дизайн первого примера
Теперь, когда наша страница настроена, давайте начнем с полноразмерного заголовка целевой страницы UX.
Настройка нашей страницы
Прежде чем мы сможем начать настройку, нам нужно будет загрузить предопределенный пакет макетов. UX из библиотеки Диви. Когда вы активируете Visual Builder, вы увидите три всплывающих опции, выберите Просмотр макетов.
Загрузить пакет макетов
Чтобы загрузить пакет макетов UX на свою страницу:
- Во вкладке «Готовые макеты», используйте функцию поиска, чтобы найти пакет макетов UX.
- Как только вы найдете его, нажмите на него. Это вызовет детали макета и доступные страницы.
- Cliquez-сюр- приземлениеИ нажмите «Использовать этот макет».
Мы воссоздадим верхнюю часть макета в виде модуля. Заголовок полной ширины.
Удалить первый раздел
Поскольку мы собираемся воссоздать первый раздел, используя вместо этого модуль Fullwidth Header, нам нужно будет удалить этот раздел. Наведите курсор на раздел и нажмите значок корзины.
Добавить раздел полной ширины
Прежде чем мы сможем добавить заголовок полной ширины, нам нужно добавить раздел полной ширины.
Нажмите на стрелку "+" чтобы отобразить разделы Divi, затем нажмите "Полная ширина". Это автоматически вызовет библиотеку модулей Divi Fullwidth.
Добавьте заголовок во всю ширину
В библиотеке модулей Divi Fullwidth нажмите « Заголовок полной ширины".
Добавить контент
Прежде чем мы начнем настраивать модуль, давайте добавим его содержание требуется для этого модуля.
Добавьте текстовый контент
На вкладке «Текст» добавьте содержание следующий :
- Название: Улучшите свои знания в области UX-дизайна
- Подзаголовок: Курс UX-дизайна
- Кнопка №1: Обзор курса
- Кнопка № 2: Узнать больше
- Тело: по умолчанию
Добавить изображения
Теперь, когда у нас есть наш содержание текст на месте, нам нужно добавить в наш дизайн два изображения.
- Во вкладке Фотографии, добавьте изображение логотипа (звездочки) и изображение заголовка (фото человека, держащего телефон).
Изменить цвет фона
Во вкладке проверка данных , настройте этот параметр:
- Цвет фона: #131517
Настроить заголовок полной ширины
Теперь, когда наш контент настроен, давайте добавим к нему стили с помощью Проект.
Значок прокрутки вниз
Давайте добавим значок прокрутки вниз, стрелку вниз.
- Показать кнопку прокрутки вниз: ДА.
- Выберите значок стрелки вниз.
- Цвет значка прокрутки вниз: #000
Фото товара
Давайте добавим кривые нашим изображениям, закруглив углы.
Во вкладке Фото товара, настройте следующие параметры:
- Скругленные углы изображения : нажмите кнопку звена цепи, чтобы разъединить углы, затем введите 1000px в нижнем левом и нижнем правом полях ввода. Это скруглит нижний левый и нижний правый углы наших изображений.
Текст заголовка
Здесь давайте настроим текст заголовка этого модуля. Во вкладке Текст заголовка, настройте эти параметры:
- Название:
- Шрифт: PT Sans
- Вес шрифта: полужирный
- Размер текста: 5 рем
- Высота строки: 1,2 см
текст тела
Здесь мы настраиваем основной текст для этого модуля. Во вкладке Основной текст, настройте эти параметры:
- Шрифт тела: Мукта
- Размер основного текста: 18 пикселей
Текст субтитров
Здесь мы настраиваем текст заголовка для этого модуля. Во вкладке Текст субтитров, настройте эти параметры:
- Подзаголовок:
- Шрифт: Мукта
- Вес шрифта: полужирный
- Стиль: верхний регистр
- Цвет текста: #13d678
- Расстояние между буквами: 3 пикселя
кнопка один
Здесь мы можем определить пользовательские стили для первой кнопки: главная кнопка. Во вкладке КнопкаОдин, настройте эти параметры:
- Использовать пользовательский стиль для первой кнопки: ДА
- Кнопка один:
- Цвет текста: #ffffff
- Цвет фона: #13d678
- Ширина границы: 0 пикселей
- Радиус границы: 100 пикселей
- Шрифт: Мукта
- Вес шрифта: полужирный
- Показать значок кнопки One: ДА
- Значок: стрелка вправо
- Показывать значок только при наведении для первой кнопки: нет
Кнопка два
Теперь давайте настроим второй: дополнительная кнопка. Во вкладке Вторая кнопка, настройте эти параметры:
- Использовать пользовательский стиль для кнопки: ДА
- Вторая кнопка
- Цвет текста: #ffffff
- Цвет фона: #303030
- Ширина границы: 0 пикселей
- Радиус границы: 100 пикселей
- Шрифт: Мукта
- Вес шрифта: полужирный
- Показать значок второй кнопки: Да
- Кнопка два значок: стрелка вправо
- Показывать значок только на кнопке Hover Two: ДА
Добавьте ссылки на кнопки
Не забудьте добавить ссылки на кнопки! Во вкладке Ссылка, настройте следующие параметры:
- URL-адрес ссылки кнопки № 1: вставьте сюда URL-адрес кнопки 1.
- URL-адрес ссылки кнопки № 1: вставьте сюда URL-адрес кнопки 2.
Сохраните вашу работу
Теперь, когда у нас есть полностью разработанный заголовок во всю ширину, обязательно сохраните свой дизайн!
- Щелкните зеленую стрелку в правом нижнем углу окна модуля.
- Сохранить
- Выйдите из VisualBuilder.
Читайте также: Divi: как создать раздел Fluid Hero
Получайте удовольствие от экспериментов
Способы настройки модуля Divi Fullwidth Header безграничны. Использование основной и вторичной кнопок может помочь вам посетителей на страницу, которую вы хотите, чтобы они просмотрели или выполнили действие (например, отправку запроса), которое вы хотите, чтобы они выполнили.
Давайте взглянем еще на два примера полноразмерных заголовков с основной кнопкой, которая выделяется.
Заголовок во всю ширину из пакета "Пенсионный центр"
Стили кнопок
Давайте взглянем на уникальные основные и дополнительные стили кнопок.
кнопка один
На вкладке Button One настройте следующие параметры:
- Использовать пользовательские стили для первой кнопки: ДА
- Кнопка один:
- Размер текста: 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 прямо сейчас!!!
Заключение
Модуль Divi Fullwidth Header позволяет легко создавать потрясающие разделы Hero на вашем компьютере. Веб-сайт.
Стратегическое использование основных и дополнительных кнопок улучшит ваш пользовательский опыт и поможет посетителям веб-сайта совершать нужные им действия.
Варианты настройки безграничны с заголовком во всю ширину, так что получайте удовольствие от экспериментов!
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
