Как оформить меню навигации разделителями разделов

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

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

Давайте начнем!

Sneak Peek

Вот краткий обзор того, что можно достичь с помощью этой техники дизайна.

Что вам нужно

Для этого урока все, что вам действительно нужно, это следующее:

• Тема Divi (установлена ​​и активна)
• Пакет макетов аптек (бесплатный готовый макет, доступный в Divi Builder)

Настройка основного меню в настройщике темы

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

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

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

Измените цвет фона, чтобы он был полностью прозрачным, перетащив ползунок прозрачности полностью вниз или введите цветовой код rgba (255,255,255,0).

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

Поскольку мы собираемся добавить цветной фон для рамки нашего меню навигации, давайте также обновим следующие параметры текста меню.

Шрифт: Montserrat
Стиль шрифта: полужирный (B)
Цвет текста: белый
Цвет активной ссылки: белый

Вернитесь на один уровень назад в меню настройщика и щелкните вкладку «Фиксированная навигация». Если вы собираетесь сохранить функциональность фиксированной навигации, вы можете задать ей собственный цвет, который будет дополнять цвет вашего пользовательского фона, который вы создадите в визуальном конструкторе. Или вы можете дать ему более общий цвет, чтобы вы могли создавать свои основные меню разными цветами для каждой страницы. А пока я собираюсь использовать более общую цветовую схему для фиксированной навигации. Обновите следующее:

Цвет фона основного меню: #ffffff
Цвет ссылки основного меню: rgba (0,0,0,0.61)
Цвет активной ссылки основного меню: # ff5473

Готово! Убедитесь, что вы публикуете свои изменения.

Обрамление навигационного меню фоном разделителя разделов

Пример # 1

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

Теперь вернитесь в режим рабочего стола, чтобы завершить дизайн.

Откройте настройки раздела и обновите следующее:

Стиль верхнего делителя: см. Снимок экрана
Цвет разделителя: # ff5473
Высота разделителя: 150 пикселей
Повторение по горизонтали делителя: 0,8x
Пользовательское поле: -80 пикселей внизу
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

Цвет разделителя - тот же розовый, что и в макете. Я установил горизонтальный повтор разделителя на 0,8x, чтобы немного сгладить разделитель. Нижнее поле -80 пикселей перемещает раздел вниз по странице, чтобы скрыть белый фон раздела. Это приводит к тому, что разделитель обрамляет навигацию справа. Разделитель простирается влево, чтобы добавить красивый фон вашему логотипу.

Вот как это выглядит на живом сайте.

Пример # 2

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

Зайдите в настройки раздела и обновите следующее:

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

Ширина: 75%
Выравнивание раздела: справа
Стиль разделителя: см. Снимок экрана
Горизонтальный повтор разделителя: 1x

Вот как это выглядит:

Если активирована фиксированная навигация, вы можете увидеть, как активируется фиксированный заголовок меню, когда меню начинает покидать рамку.

Если вы хотите отключить фиксированную навигацию, перейдите в Divi> Параметры темы и отключите параметр «Фиксированная панель навигации» в разделе «Общие настройки».

Если не активирована фиксированная навигация, ваше меню останется заблокированным внутри вашего фреймового дизайна во время прокрутки.

Отзывчивый

Рамка будет хорошо смотреться даже на мобильном телефоне.

Но вы всегда можете скрыть фрейм, задав для вашего раздела высоту разделителя, равную нулю, для настольных и мобильных устройств. А затем настройте свое мобильное меню в настройщике тем.

Используйте разные цветовые рамки на разных страницах

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

Последняя мысль

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!