Как настроить меню и навигацию на сайте?

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

1. Меню из страниц сайта

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

Чтобы изменить его:

  1. Выберите нужный сайт и откройте раздел «Страницы».

  2. У нужных страниц включите «Отображать в меню». Этот параметр также доступен в настройках страницы.

  3. Чтобы изменить название пункта, измените название соответствующей страницы.

  4. Чтобы изменить порядок, перетащите страницы в списке.

Обратите внимание: первая страница в списке является главной. Учитывайте это при изменении порядка.

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

Чтобы посетители могли открыть это меню, добавьте элемент «Меню» в шапку сайта или панель навигации. В настройках элемента можно выбрать вариант отображения: всплывающее меню по центру, боковую панель или выдвижную боковую панель.

Для перехода на внешний ресурс в списке страниц также можно создать страницу типа «Ссылка» и включить её отображение в меню.

2. Отдельные пункты и ссылки в шапке

Если нужны постоянно видимые ссылки, например «Услуги», «Контакты» или «Записаться», добавьте их непосредственно в шапку.

  1. Откройте «Шапка сайта» в настройках выбранного сайта.

  2. Включите шапку, если она отключена.

  3. Добавьте элемент «Пункт меню», «Ссылка» или «Кнопка» в нужную область.

  4. Откройте настройки элемента и укажите текст, если он предусмотрен выбранным элементом.

  5. Выберите цель ссылки: страницу, блок, товар, внешний адрес или другое доступное действие.

  6. Настройте оформление и расположение, затем сохраните изменения.

Такие ссылки настраиваются отдельно от списка страниц: их названия и цели вы задаёте самостоятельно.

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

3. Настраиваемое меню со своими пунктами

Этот вариант подходит, когда состав меню должен отличаться от списка страниц. Например, в одном меню нужны ссылки на страницу «О компании», блок «Цены», каталог и мессенджер.

  1. Откройте настройки элемента «Меню» в шапке или панели навигации.

  2. В поле «Вариант меню» выберите «Настраиваемое меню».

  3. В разделе «Собственные пункты меню» нажмите «Добавить пункт».

  4. Укажите текст пункта и цель ссылки.

  5. Добавьте остальные пункты. Меняйте их порядок стрелками вверх и вниз.

  6. Настройте цвета, шрифт, выравнивание и отступы.

  7. Сохраните изменения.

В таком меню можно создать до 20 собственных пунктов.

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

4. Нижняя панель навигации

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

  1. Откройте «Панель навигации» в настройках сайта.

  2. Включите панель.

  3. Нажмите «Добавить элемент» и перетащите нужный элемент на панель.

  4. Откройте его настройки, задайте ссылку или действие и выберите оформление.

  5. Расположите элементы в нужном порядке и сохраните изменения.

На панели доступны:

  • Ссылка — переход на выбранную страницу, ресурс или другое назначение.

  • Меню — открытие общего или настраиваемого меню.

  • Корзина — открытие корзины магазина.

  • Закладки — открытие списка желаний.

  • Поиск — поиск товаров.

  • Профиль — вход посетителя и переход в его аккаунт.

На панели можно разместить до 5 элементов. Корзина, закладки, поиск, профиль и меню добавляются по одному экземпляру каждого типа.

5. Кнопки и ссылки внутри страницы

Навигацию можно разместить прямо в содержимом страницы: например, кнопки «Посмотреть цены», «Перейти в каталог» или «Связаться с нами».

  1. Откройте страницу в редакторе.

  2. Добавьте блок с кнопками или выберите кнопку в существующем блоке.

  3. Откройте настройки кнопки и вкладку «Текст и цель».

  4. Укажите текст и выберите действие при нажатии.

  5. Заполните параметры выбранной цели и сохраните изменения.

Для нескольких переходов можно использовать блоки с кнопками или ссылками.

Какие типы ссылок доступны?

Набор вариантов зависит от выбранного элемента. Основные цели:

  • Страница — открывается выбранная страница вашего сайта. Сначала создайте её, затем выберите в настройках ссылки.

  • Каталог товаров — открывается каталог магазина.

  • Категория товаров — открывается выбранная категория каталога.

  • Товар — открывается карточка конкретного товара.

  • Блог — открывается блог сайта.

  • Категория блога — открываются материалы выбранной категории.

  • Ссылка на внешний ресурс — открывается указанный адрес. Вставляйте полный адрес, например https://example.com.

  • Якорь — скролл до блока — посетитель переходит к конкретному блоку на текущей или другой странице.

  • Звонок — открывается приложение для звонка на указанный номер, если устройство поддерживает это действие.

  • Мессенджеры — открывается выбранный мессенджер для связи по указанным данным.

Для ссылки на электронную почту используйте адрес вида mailto:info@example.com в поле внешней ссылки. При нажатии откроется почтовое приложение, если оно настроено у посетителя.

Как сделать переход к блоку страницы?

  1. Откройте настройки нужного блока и вкладку «Расширенные».

  2. Скопируйте якорь блока.

  3. В настройках кнопки или пункта меню выберите «Якорь — скролл до блока».

  4. Укажите текущую страницу или выберите другую страницу.

  5. Вставьте скопированный якорь и сохраните изменения.

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

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

Как проверить навигацию?

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