Хотите создать глобальный заголовок с модулем полноэкранного меню в Divi?
Заголовок — один из важнейших элементов любого Веб-сайт и находится в основе пользовательский опыт. Меню навигации дает вашим пользователям представление о том, что они могут найти на вашем сайте. Веб-сайт и помогает им найти нужную им информацию.
Кроме того, дополнительная строка меню может быть идеальным местом для выделения призыва к действию или содействовать Предложение. Не говоря уже о том, что заголовок — одна из самых важных частей вашего Веб-сайт, потому что обычно он появляется на каждой странице. Это прекрасная возможность продемонстрировать свой брендинг и создать заголовок, который будет соответствовать дизайну остальной части вашего сайта.
Параметры Divi Theme Builder позволяют вам создать собственный глобальный заголовок и настроить внешний вид вашего заголовка и модулей меню на всем вашем веб-сайте.
В этом уроке мы покажем вам, как создать глобальный заголовок, используя модуль полноэкранного меню Divi.
Давайте начнем!
обследование
Вот предварительный просмотр глобального заголовка, который мы собираемся разработать.
Откройте конструктор тем
Поскольку в этом примере мы создаем глобальный заголовок, давайте перейдем к «Создателю тем», который вы можете найти в меню WordPress Divi. Выберите «Добавить глобальный заголовок», затем выберите «Создать глобальный заголовок».
Создайте дополнительную строку меню
Когда вы впервые открываете макет глобального заголовка, он поставляется с предварительно загруженным обычным разделом. Мы изменим ее, чтобы она стала нашей вторичной строкой меню, которая будет располагаться над нашим полноразмерным меню и включать текст призыва к действию и кнопку.
Сначала откройте настройки раздела и добавьте цвет фона.
- Фон: #92A8A1
Далее поля раздела.
- Вершина внутреннего поля: 0px
- Нижнее внутреннее поле: 0px
Теперь вставьте строку. В этом примере мы будем использовать макет, показанный ниже.
В настройках строки на вкладке «Размеры» на вкладке «Стиль» согласуйте высоту столбцов.
- Гармонизировать высоту столбцов: ДА
Затем установите верхнее и нижнее поля следующим образом:
- Верхнее внутреннее поле: 5 пикселей
- Нижнее внутреннее поле: 5 пикселей
Поскольку мы хотим, чтобы наши вторичные элементы заголовка были выровнены по вертикали, мы добавим некоторый пользовательский CSS к основному элементу строки.
1.
align-items:center;
Теперь, когда наша линия настроена, мы можем вставить модули для нашей содержание. Сначала вставьте текстовый модуль слева.
Измените содержание текста. Это идеальное место для включения призыва к действию или содействовать Предложение.
- Текст: «Присоединяйтесь к нашему списку рассылки, чтобы получить скидку 10% на ваш заказ!» »
Откройте вкладку «Стиль» модуля «Текст» и измените параметры следующим образом:
- Шрифт «Текст»: Poppins
- «Текст» тусклый свет: средний
- Цвет текста «Текст»: #FFFFFF
Затем добавьте модуль Button справа.
Добавьте текст кнопки.
- Текст: «Получить бесплатное предложение»
На вкладке «Стиль» выровняйте кнопку по центру.
- Выравнивание кнопок: по центру
Теперь давайте настроим внешний вид кнопки.
- Использовать пользовательские стили для «Кнопки»: Да
- Размер текста кнопки: 14px
- Цвет текста кнопки: #FFFFFF
- Фоновая кнопка: #2F5349
- Ширина границы кнопки: 0px
- Кнопка «Радиус границы»: 50 пикселей
- Расстояние между буквами кнопки: 1px
- Шрифт кнопки: Поппинс
Добавьте модуль полноэкранного меню
Теперь, когда вторичное меню разработано, мы можем перейти к главному меню. Мы создадим меню, используя модуль «Полноэкранное меню». Добавьте новый полноэкранный раздел в глобальный заголовок.
Выберите и вставьте модуль полноэкранного меню
Далее мы настроим параметры полноэкранного меню.
- Цвет активной ссылки: #2F5349
- Меню шрифтов: Поппинс
- Меню приглушенного света: полужирный шрифт
- Меню стиля копирования: TT
- Цвет текста меню: #000000
- Цвет текста Hover Menu: #2F5349
- Размер текста меню: 15px
- Расстояние между буквами меню: 2px
Измените цвет значка меню гамбургера на черный.
- Цвет значка меню гамбургера: #000000
Прежде чем мы добавим логотип в наше меню, давайте изменим параметры размера. Мы будем использовать встроенные параметры адаптивности Divi, чтобы установить разную максимальную высоту для ПК и мобильных устройств.
- Максимальная высота логотипа на ПК: 3vw
- Максимальная высота логотипа на мобильных устройствах: 6vw.
Теперь добавьте свой логотип в полноэкранное меню.
Наконец, мы хотим, чтобы главное меню оставалось в верхней части экрана, когда пользователь прокручивает веб-сайт, поэтому мы будем использовать для этого встроенные в Divi настройки прилипания.
- Липкое положение: приклеить сверху
На этом наш глобальный дизайн заголовка завершен.
Создайте новую страницу с предопределенным макетом
Чтобы увидеть полноразмерный заголовок и меню в действии, давайте создадим новую страницу с предопределенным макетом из библиотеки Divi. В этом примере мы будем использовать домашнюю страницу Flooring из пакета план этажа.
Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder».
В этом примере мы используем готовый макет из библиотеки Divi, поэтому выберите «Выбрать макет».
Найдите и выберите макет «Домашняя страница напольных покрытий».
Выберите «Выбрать макет», чтобы добавить макет на свою страницу.
Теперь дизайн завершен!
Конечный результат
Заключение
Как мы уже говорили выше, заголовок и меню навигации лежат в основе пользовательского опыта вашего сайта. Теперь вы видели, как легко создать потрясающий общий заголовок с модулем «Полноэкранное меню» Divi.
К счастью, конструктор тем Divi дает вам контроль над каждым аспектом меню и заголовка вашего веб-сайта, и вы можете создавать совершенно индивидуальные и уникальные дизайны всего за несколько кликов.
Использовали ли вы глобальные параметры заголовка Divi для настройки заголовка и меню навигации? Расскажите нам, что вы думаете в комментариях!
