Использование модуля меню полной ширины Divi по сравнению с обычным модулем меню
Опубликовано: 2022-06-06Часто упускаемой из виду, но важной частью любого веб-сайта является меню навигации. Навигация является ключевым элементом с точки зрения создания приятного пользовательского интерфейса. Если все сделано правильно, меню может значительно улучшить взаимодействие с пользователем и облегчить вашим посетителям навигацию по веб-сайту.
Divi поставляется с 2 различными типами навигационных модулей; Полноэкранное меню и обычное меню. В этой статье мы обсудим и продемонстрируем некоторые различия между модулем меню полной ширины Divi и модулем обычного меню. Если вы когда-нибудь задавались вопросом, какой модуль использовать для своего веб-сайта, надеюсь, эта статья поможет вам понять ключевые различия и варианты использования этих модулей. Мы также дадим вам пошаговые инструкции по настройке дизайна полноэкранного меню и обычного модуля меню.
Давайте начнем!
Краткий обзор
Рабочий стол: полноэкранный модуль меню
Рабочий стол: модуль обычного меню
Мобильный: полноэкранный модуль меню
Мобильный: модуль обычного меню
Ключевые различия между модулем меню полной ширины Divi и модулем обычного меню
Ниже приведен обзор основных различий между модулем меню полной ширины и модулем обычного меню.
Контейнер обычного и полноразмерного разделов
Для модуля меню полной ширины требуется раздел полной ширины в Divi. Поскольку раздел имеет полную ширину, любой добавляемый модуль будет занимать всю ширину страницы. В отличие от обычного раздела меню, у вас не может быть нескольких модулей рядом. Модуль полноширинного меню отлично подходит, если вы хотите, чтобы меню занимало всю ширину страницы и не нуждались в дополнительных модулях рядом с ним.
Для обычного модуля меню требуется обычный раздел в Divi. Обычные разделы имеют множество различных макетов строк, и вы можете использовать любой макет с обычным модулем меню. Это позволяет вам включать дополнительный контент вместе с меню, используя другие строки, чтобы создать более сложную строку меню. Благодаря множеству параметров строки Divi вы можете легко создавать уникальные макеты для строки меню, используя обычный модуль меню.
Встроенные настройки ширины и редактирование контейнера строк
Другое ключевое различие между обычным меню и меню полной ширины заключается в том, что они имеют разные способы редактирования ширины и интервала между модулями.
Модуль меню полной ширины поставляется с некоторыми встроенными настройками для редактирования ширины. Вы можете сделать текст меню на всю ширину с помощью опции «сделать ссылки в меню на всю ширину». Это расширяет модуль меню полной ширины за пределы ширины содержимого по умолчанию.
Чтобы получить аналогичный вид с обычным модулем меню, вам нужно вместо этого отредактировать настройки содержащей строки. Например, отредактируйте ширину, максимальную ширину и выравнивание строки, содержащей обычное меню, чтобы расширить модуль обычного меню за пределы ширины содержимого по умолчанию.
Использование модуля меню полной ширины Divi по сравнению с обычным модулем меню
Что нужно для начала
Если вы хотите следовать этому руководству, установите и активируйте тему Divi и убедитесь, что на вашем веб-сайте установлена последняя версия Divi.
Теперь вы готовы начать!
Проектирование полноразмерного модуля меню
Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder».
Для этого урока мы создадим дизайн с нуля, поэтому выберите вариант «Начать сборку».
Когда вы впервые создаете пустую страницу, она поставляется с предварительно загруженным обычным разделом. Сначала добавьте раздел полной ширины под обычным разделом.
Затем удалите обычный раздел со страницы.
Добавьте модуль Fullwidth Menu в строку полной ширины.
Добавьте цвет фона в полноэкранное меню.
- Фон: #4e7560
Добавьте логотип в полноэкранное меню.
Затем перейдите к параметрам «Текст меню» на вкладке «Дизайн».
- Шрифт меню: Поппинс
- Цвет текста меню: #FFFFFF
- Размер текста меню: 20px
Затем перейдите к настройкам раскрывающегося меню.
- Цвет фона выпадающего меню: #FFFFFF
- Цвет строки выпадающего меню: #7EAD70
- Цвет текста выпадающего меню: #000000
Установите фон мобильного меню и цвет текста.
- Цвет фона мобильного меню: #FFFFFF
- Цвет текста мобильного меню: #000000
Затем измените настройки гамбургер-меню.
- Цвет значка меню гамбургера: #FFFFFF
- Размер шрифта значка меню гамбургера: 40px
Наконец, добавьте верхние и нижние отступы.
- Отступы-Верх: 10px
- Отступы внизу: 10px
Теперь ваш полноэкранный модуль меню готов!
Разработка модуля обычного меню
Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder».
Выберите «Начать сборку», чтобы построить с нуля.
Страница поставляется с предварительно загруженным пустым обычным разделом. В этот раздел добавьте цвет фона.
- Фон: #4e7560
Далее снимаем верхнюю и нижнюю обивку.
- Отступы-Верх: 0px
- Заполнение снизу: 0px
Добавьте новую строку с макетом, показанным ниже.
В настройках строки выровняйте высоту столбцов.
- Выравнивание высоты столбцов: Да
В настройках CSS основного элемента на вкладке «Дополнительно» добавьте следующий пользовательский CSS.
align-items:center;
Добавьте текстовый модуль в крайний левый столбец. Мы будем использовать это для отображения названия веб-сайта вместо загрузки логотипа. Это уникальное преимущество обычного модуля меню, поскольку вы можете использовать его вместе с другими модулями для добавления дополнительных элементов в строку меню.
- Текст H1: «Блог Divi».
Установите выравнивание текста по левому краю на рабочем столе.
- Выравнивание текста на рабочем столе: по левому краю
Установите выравнивание текста по центру на планшете и мобильном телефоне.
- Выравнивание текста-планшет: по центру
- Выравнивание текста для мобильных устройств: по центру
Далее перейдите к настройкам текста заголовка.
- Шрифт заголовка: Poppins
- Начертание шрифта заголовка: Жирный
- Цвет текста заголовка: #FFFFFF
- Размер текста заголовка: 40px
Теперь, когда заголовок «Divi Blog» готов, давайте добавим обычный модуль меню в центральную колонку.
Удалите цвет фона.
- Фон: Нет
Далее перейдите на вкладку «Дизайн». В разделе «Макет» измените стиль на «По центру».
- Стиль: по центру
Теперь мы можем изменить стили текста меню.
- Шрифт меню: Поппинс
- Цвет текста меню: #FFFFFF
- Размер текста меню: 20px
Также измените стили выпадающего меню.
- Цвет строки выпадающего меню: #7EAD70
- Цвет текста выпадающего меню: #000000
Далее измените настройки мобильного меню.
- Цвет фона мобильного меню: #FFFFFF
- Цвет текста мобильного меню: #000000
Наконец, измените настройки меню гамбургера.
- Цвет значка меню гамбургера: #FFFFFF
- Размер шрифта значка меню гамбургера: 40px
На этом оформление обычного модуля меню завершено. Чтобы закончить дизайн меню, давайте добавим кнопку призыва к действию в правую колонку. Сначала добавьте модуль кнопки.
Измените текст кнопки.
- Кнопка: «Бесплатная 30-дневная пробная версия»
Установите выравнивание кнопки по центру.
- Выравнивание кнопок: по центру
Установите «Использовать пользовательские стили для кнопки» на «Да» и измените цвет текста.
- Использовать пользовательские стили для кнопки: Да
- Цвет текста кнопки: #FFFFFF
Установить фон кнопки.
- Фон кнопки: #7EAD70
Установите фон кнопки при наведении на оранжевый.
- Фон кнопки при наведении: #D19929
Затем установите ширину границы кнопки, радиус и шрифт.
- Ширина границы кнопки: 0px
- Радиус границы кнопки: 40px
- Шрифт кнопки: Поппинс
Наконец, установите левый и правый отступы.
- Отступ слева: 30px
- Отступы справа: 30 пикселей
Конечный результат
Теперь давайте посмотрим на окончательный результат для наших модулей меню.
Рабочий стол: полноэкранный модуль меню
Рабочий стол: модуль обычного меню
Мобильный: полноэкранный модуль меню
Мобильный: модуль обычного меню
Последние мысли
Надеюсь, эта статья помогла вам понять некоторые ключевые различия между полноэкранным модулем меню Divi и обычным модулем меню. Оба невероятно легко настраиваются для создания великолепных меню для вашего веб-сайта. Модуль меню полной ширины занимает всю ширину страницы и имеет встроенные параметры для изменения и настройки ширины. С другой стороны, обычный модуль меню может использоваться вместе с другими модулями и содержится в строке, где можно настроить ширину и другие параметры размера. Используете ли вы полноразмерный модуль меню или обычный модуль меню на своем веб-сайте? Мы будем рады услышать от вас в комментариях!