Как создать вертикальное навигационное меню (или заголовок) для вашего сайта Divi

Вертикальные навигационные меню могут быть полезны для определенных веб-сайтов, которым нужно больше пунктов меню на переднем плане. Горизонтальные меню могут быть трудными для размещения всех необходимых ссылок меню, особенно в браузерах меньшей ширины. В этом уроке мы покажем вам, как создать настраиваемое вертикальное меню навигации с помощью Divi Theme Builder. Это даст вам больше места для демонстрации пунктов меню WordPress. И у вас будет полная возможность добавлять дополнительные модули Divi в вертикальный заголовок и создавать их с помощью конструктора Divi.

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы загрузить шаблон, перейдите к Divi Theme Builder на бэкэнде вашего сайта WordPress.

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

Затем в правом верхнем углу вы увидите значок с двумя стрелками. Щелкните значок.

Перейдите на вкладку импорта, загрузите файл JSON, который вы смогли загрузить в этом посте, и нажмите «Импортировать шаблоны Divi Theme Builder».

Сохранить изменения Divi Theme Builder

После того, как вы загрузите файл, вы заметите новый глобальный верхний и нижний колонтитулы в шаблоне веб-сайта по умолчанию. Сохраните изменения Divi Theme Builder, как только захотите активировать шаблон.

Давайте перейдем к руководству, не так ли?

Часть 1: Создание нового глобального заголовка

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

Для начала перейдите в панель управления WordPress и перейдите в Divi> Theme Builder.

Затем щелкните область «Добавить глобальный заголовок» в шаблоне веб-сайта по умолчанию и выберите «Создать глобальный заголовок» в раскрывающемся списке.

Затем выберите вариант «Строить с нуля».

Часть 2: Разработка макета вертикального сечения

В редакторе макета глобального заголовка откройте настройки обычного раздела, который уже существует, и обновите следующее.

• Ширина (рабочий стол): 300 пикселей
• Ширина (планшет и телефон): 100%

• Высота (рабочий стол): 100vh
• Высота (планшет и телефон): авто

• Padding (рабочий стол): 4vh сверху, 0px снизу
• Отступ (планшет и телефон): 0 пикселей сверху, 0 пикселей снизу.

Продолжите дизайн, добавив тень блока следующим образом:

• Box Shadow: см. Снимок экрана
• Вертикальное положение тени блока: 0 пикселей
• Сила размытия тени коробки: 20 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (0,0,0,0.3)

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

• Позиция: фиксированная
• Индекс Z: 9999

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

overflow: visible !important;

Теперь ваш раздел находится в вертикальном расположении в левой части шаблона.

Часть 3: Разработка вертикального меню

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

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

Добавление строки

Для начала добавьте в раздел строку из одного столбца.

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

Размер и заполнение

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 80%
• Прокладка (десктоп): 3vh сверху, 3vh снизу
• Отступ (планшет и телефон): 0 пикселей сверху, 0 пикселей снизу.

Граница

• Ширина границы: 1 пикс.
• Цвет границы: #eeeeee

Добавление модуля меню

Внутри строки с одним столбцом добавьте новый модуль меню.

Выберите меню, которое будет отображаться под переключателем содержимого.

Затем добавьте логотип вашего сайта в качестве динамического содержимого под переключателем «Логотип».

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

• Стиль: по центру
• Шрифт меню: Nunito Sans
• Цвет текста меню: # 535b7c
• Размер текста меню: 18 пикселей (рабочий стол), 14 пикселей (планшет и телефон)
• Высота строки меню: 2em
• Цвет строки раскрывающегося меню: # 535b7c
• Цвет активной ссылки раскрывающегося меню: # 535b7c

• Цвет значка корзины покупок: # 535b7c
• Цвет значка поиска: # 535b7c
• Цвет значка меню гамбургера: # 535b7c

• Прокладка (рабочий стол): 2vh сверху, 2vh снизу
• Отступ (рабочий стол): 10 пикселей сверху, 10 пикселей снизу.

Часть 4: Добавление пользовательского CSS для меню

Меню нуждается в некотором настраиваемом CSS, чтобы получить желаемую вертикальную навигацию. Для начала перейдите на вкладку «Дополнительно» и добавьте следующий настраиваемый CSS в ссылку меню и логотип меню.

Ссылка меню CSS (рабочий стол):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Ссылка меню CSS (планшет):

width: auto;
border:none;

CSS логотипа меню:

margin-bottom: 20px;

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

Класс CSS: et-vert-menu

Он будет использоваться для таргетинга на это конкретное меню в нашем внешнем настраиваемом CSS, который мы добавим с помощью модуля кода.

Добавление пользовательского CSS с помощью модуля кода

Под модулем меню добавьте новый модуль кода.

Затем вставьте следующий код в поле кода (обязательно поместите его между тегами стиля):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

Часть 5: Дизайн кнопок и значков перехода в социальные сети

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

Добавление строки

Добавьте новую строку из одного столбца под текущей строкой.

Добавление кнопки

Затем добавьте в строку новый модуль кнопок.

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

• Расположение кнопок: по центру
• Размер текста кнопки: 18 пикселей (рабочий стол), 14 пикселей (планшет и телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 535b7c
• Ширина границы кнопки: 0 пикселей

Затем перейдите на вкладку «Дополнительно» и вставьте следующий настраиваемый CSS в основной элемент:

Основной элемент CSS (рабочий стол)

display:block;
width: 100%;

Основной элемент CSS (планшет)

display:inherit;

Добавление значков подписки в социальных сетях

Под кнопкой добавьте модуль подписки в социальных сетях.

Добавьте нужные социальные сети на вкладку содержимого.

На вкладке «Дизайн» обновите следующее:

• Выравнивание модуля: по центру
• Цвет значка: # 535b7c

Затем откройте настройки каждой из сетей и удалите цвет фона.

Затем добавьте немного верхнего поля следующим образом:

• Маржа: 3vh сверху

Обновить настройки строки

После создания значков подписки в социальных сетях откройте настройки строки и настройте следующие параметры:

• Ширина желоба: 1
• Padding (рабочий стол): 3vh сверху, 0px снизу
• Набивка (планшет и телефон): сверху 10 пикселей.

Сохранить макет и шаблон

После этого сохраните макет и шаблон.

Конечный результат

Вот окончательный результат на живой странице.

Как добавить вертикальное меню навигации в основную область шаблона страницы

Если вы хотите добавить вертикальное меню навигации в макет страницы (вместо глобального заголовка), вы должны сначала сохранить макет раздела в библиотеке Divi.

Для этого откройте редактор макета глобального заголовка и сохраните вертикальный раздел (содержащий меню) в своей библиотеке Divi.

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

Выберите, чтобы построить его с нуля.

Добавьте в макет новый полноразмерный раздел.

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

Удалите стандартный раздел по умолчанию в верхней части страницы, а затем откройте настройки для раздела полной ширины и добавьте следующий настраиваемый CSS в основной элемент:

Основной элемент CSS (рабочий стол)

width: calc(100% - 300px);
margin-left:300px !important;

Основной элемент CSS (планшет)

width: 100%;

В обычном разделе щелкните, чтобы добавить новый раздел, и на вкладке «Добавить из библиотеки» выберите раздел вертикального меню, который вы ранее сохранили в библиотеке.

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

Затем откройте модуль кода в макете раздела и замените этот фрагмент кода…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

С этим…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

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

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

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

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

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

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