Как заменить основную строку меню модулем меню полной ширины Divi

Панель основного меню упрощает навигацию для посетителей. Помимо основной панели меню по умолчанию, к которой мы привыкли в WordPress, вы, вероятно, встречали модуль меню полной ширины, который также предлагает Divi. Обычно он используется для отображения других меню на вашем веб-сайте, которые отличаются от основного меню в верхней части каждой страницы.

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

В этом руководстве мы покажем вам, как заменить основную строку меню на модуль меню полной ширины с помощью пакета макетов плотника Divi. Это часть нашей постоянной дизайнерской инициативы Divi. Вы можете выбрать, хотите ли вы применить этот метод ко всем страницам или только к некоторым из них. Давайте приступим к делу!

Предварительный просмотр

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

Отключить фиксированную панель навигации

Перейдите к параметрам темы Divi

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

Отключить фиксированную панель навигации

Откройте вкладку «Общие» и отключите параметр «Фиксированная панель навигации».

Создать основное меню

Перейти в меню

Следующее, что мы собираемся сделать, это создать наше основное меню. Мы будем использовать это основное меню как для основной панели меню по умолчанию вверху, так и для модуля меню полной ширины. Чтобы добавить меню, перейдите в панель управления WordPress> Внешний вид> Меню.

Добавить новое основное меню

Добавьте новое меню, дайте своему меню имя и сделайте его основным меню.

Добавить страницы и сохранить меню

И последнее, но не менее важное: добавьте все свои страницы и сохраните меню.

Стиль основной строки меню в настройщике тем

Перейти в настройщик тем

В зависимости от того, хотите ли вы скрыть основную строку меню по умолчанию на всех страницах или нет, вы можете сначала стилизовать основную строку меню по умолчанию. Вам нужно сделать это только в том случае, если вы планируете использовать его на некоторых страницах. Если вы хотите удалить всю основную строку меню, вы можете пропустить этот шаг.

Настройки основной панели меню

Чтобы соответствовать пакету макетов, мы внесли следующие изменения:

• Стиль шрифта: полужирный и прописные.
• Цвет текста: #FFFFFF
• Цвет активной ссылки: #FFFFFF
• Цвет фона: # f25b3a
• Цвет фона выпадающего меню: # f25b3a

Скрыть основную строку меню

Одна страница

Перейти на страницу выбора и включить Visual Builder

Чтобы скрыть основную строку меню в верхней части наших страниц, нам потребуется немного кода CSS. Обратите внимание, что важно отключить параметр фиксированной панели навигации (один из предыдущих шагов). В противном случае пространство, занимаемое основной строкой меню, будет белым и не исчезнет полностью. В частности, если вы собираетесь скрыть основную строку меню на одной странице, перейдите на эту страницу и включите Visual Builder.

Открыть настройки страницы

Затем откройте настройки страницы, щелкнув следующий значок внизу страницы:

Добавить код CSS

Перейдите на вкладку Advanced и добавьте следующий код CSS в поле Custom CSS:

#main-header {
display: none;
}

Весь веб-сайт

Перейдите к параметрам темы Divi

Если вы хотите избавиться от основной панели меню на всем веб-сайте, вы также можете это сделать. Вам не нужно добавлять код на каждую страницу вручную. Вместо этого вы можете просто перейти в панель управления WordPress> Divi> Параметры темы.

Добавить код CSS

Продолжайте прокручивать вниз, пока не найдете поле Custom CSS и добавьте туда тот же код CSS:

#main-header {
display: none;
}

Добавить основную строку меню на страницу

Открыть целевую страницу с помощью Visual Builder

Теперь, когда мы скрыли основную строку меню, мы можем начать добавлять на нашу страницу модуль меню полной ширины. Для этого перейдите, например, на свою целевую страницу и включите Visual Builder.

Добавить секцию полной ширины

Продолжите, добавив раздел Fullwidth прямо под разделом вашего героя.

Верхняя граница

Вы можете использовать все встроенные функции Divi для создания именно того дизайна, который вам нужен. Мы будем держать его в чистоте. Единственное, что мы добавим к параметрам раздела - это верхняя граница:

• Ширина верхней границы: 7 пикселей
• Цвет верхней границы: # f25b3a

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

Затем добавьте в свой раздел модуль меню полной ширины.

Выберите основное меню

Выберите главное меню в качестве меню, которое вы хотите отобразить.

Фоновый цвет

Затем задайте модулю черный цвет фона.

Настройки ссылок

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

• Цвет активной ссылки: #FFFFFF
• Цвет текста раскрывающегося меню: #FFFFFF
• Цвет текста мобильного меню: #FFFFFF
• Ориентация текста: влево
• Цвет текста: светлый

Параметры раскрывающегося меню

Затем измените настройки раскрывающегося меню:

• Цвет фона выпадающего меню: # 000000
• Цвет строки раскрывающегося меню: # 000000
• Цвет фона мобильного меню: # 000000

Настройки текста меню

Наконец, мы собираемся сделать так, чтобы настройки текста соответствовали пакету макетов:

• Толщина шрифта меню: Ультра жирный
• Стиль шрифта меню: прописные

Сделайте полноразмерный раздел глобальным и используйте его также на других страницах

Сохранить как глобальный раздел

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

Добавить на другие страницы без основной строки меню

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

Предварительный просмотр

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

Последние мысли

В этом сообщении блога о сценарии использования мы показали вам, как заменить основную строку меню в верхней части ваших страниц на модуль меню полной ширины. Применение этого метода дает вам возможность разместить свое меню в любом месте на странице. Кроме того, вы также можете использовать встроенные параметры Divi для его стилизации. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.