Что такое меню сайта: Горизонтальное меню для сайта

Инструкция по добавлению виджета «Меню подразделов» в узкую колонку сайта

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

Особенно это удобно, если на сайте есть страницы третьего уровня вложенности: к ним нет доступа из основного меню. Рассмотрим на примере: пусть раздел основного меню «Оплата и доставка» (страница первого уровня) содержит страницы «Реквизиты», «Бесплатная доставка», «Доставка в удаленные регионы», «Способы оплаты», «Личный кабинет» — это страницы второго уровня. В свою очередь, в раздел «Способы оплаты» вложены страницы третьего уровня: «Наличная оплата», «Оплата банковской картой», «Электронный кошелек», «Тариф Доверие: доставка без предоплаты».

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

В «Нубексе» есть два способа это исправить: организовать меню подразделов в виде списка на странице или добавить виджет вложенного меню в узкую колонку сайта.

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

Как добавить виджет «Меню подразделов» в колонку сайта

Войдите в админку сайта, откройте раздел «Виджеты» в меню управления (слева) и выберите нужную колонку. Раскройте список доступных виджетов и выберите пункт «Создать меню подразделов».

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

Если Вы хотите, чтобы виджет отображался в том же стиле, что и основное меню сайта, активируйте галочку «Оформление как у главного меню».

Затем отрегулируйте поведение виджета, выбрав один из четырех вариантов.

Показывать меню 2-го и 3-го уровня вложенности полностью раскрытыми

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

Показывать меню 2-го уровня вложенности и раскрывать текущий пункт меню

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

То есть, например, находясь в разделе главного меню «Оплата и доставка», мы увидим перечень вложенных в него страниц — «Реквизиты», «Бесплатная доставка» и т.д. Однако более мелкие разделы отображаться в списке не будут. Получить к ним доступ можно, кликнув на соответствующий пункт меню (например, «Способы оплаты»): тогда откроется перечень страниц третьего уровня, вложенных в этот раздел.

Показывать меню 2-го уровня вложенности

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

Показывать меню 3-го уровня вложенности

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

Например, на странице первого уровня «Оплата и доставка» виджет с таким поведением не отобразится.

Также не отобразится он и в разделе второго уровня, не содержащем вложенных страниц.

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

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

Меню сайта компании – tiu.ru

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

Возможности конструктора меню

• Добавление произвольного количества пунктов верхнего, бокового и нижнего меню сайта.
• Двухуровневое верхнее меню.
• До 4-х блоков в нижнем меню сайта.
• Произвольные названия пунктов меню.
• Возможность настройки порядка пунктов меню на сайте.
• Добавление ссылок на любые разделы сайта компании, включая подразделы сайта (например, ссылки на конкретные папки новостей).
• Добавление произвольных веб-ссылок к пунктам меню (например, ссылки на отдельные товары или на внешние ресурсы в Интернете).
• Возможность удаления верхнего, бокового или нижнего меню.
• Изменение стандартных названий разделов сайта.

Внимание!

• Все функции настройки меню сайта компании доступны только для компаний на платных пакетах услуг, которые используют Premium-дизайны сайта. Компании, которые используют оригинальные дизайны версии 3.0, не смогут добавить второй уровень верхнего меню, этот дизайн имеет лимит на количество пунктов — можно добавить до 5 элементов.
• Компании, использующие оригинальные дизайны версии 4.0, не смогут менять названия пунктов горизонтального меню (можно только скрывать и показывать пункты), у них отсутствует боковое меню.
• Для компаний, использующих оригинальный дизайн 3 или 4 версии, недоступно добавление пункта меню «Условия возврата и обмена».

Разделы, подключаемые в меню

В меню можно подключить такие разделы сайта:

• Категории товаров;
• Новости и статьи;
• Другие страницы: Ссылки на партнеров, Часто задаваемые вопросы, Вакансии;
• Файлы: Прайсы, Сертификаты и лицензии, Презентации и документы;
• Фотогалерея;
• Веб-адрес — адрес любой страницы;
• Главная страница;
• О компании;
• Контакты;
• Доставка и оплата;
• Возврат и обмен;
• Портфолио;
• Отзывы;
• Товары со скидками;
• Новинки — на эту страницу попадают товары, которые были созданы за последние 2 недели.

Конструктор меню

Конструктор меню находится в разделе «Управление сайтом ― Меню и заголовки». Здесь выводится четыре блока, которые отвечают за настройку верхнего, бокового и нижнего меню сайта компании, а также меню в мобильной версии сайта компании.

Кнопка Сохранить изменения сохраняет изменения во всех разделах меню одновременно.

Верхнее горизонтальное меню

Здесь настраиваются пункты и подпункты горизонтального меню. Оптимальное количество пунктов верхнего горизонтального меню 5-7 шт. Если количество пунктов горизонтального меню превышает предусмотренное дизайном количество, то они будут скрываться в пункте «Другие разделы».

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

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

Чтобы указать в качестве ссылки адрес в Интернете, выберите в раскрывающемся списке значение «Веб-адрес» и вставьте в поле адреса ссылку, скопированную из адресной строки браузера (без префикса «http://»)

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

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

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

Обратите внимание: изменения вступят в силу в течение часа.

Боковое меню

Настройка бокового меню не отличается от настройки верхнего горизонтального меню за исключением того, что в Premium-дизайнах можно настроить различное отображение категорий товаров.

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

Для выбора подраздела раскройте список Укажите подраздел и выберите необходимое значение:

• Отображать в боковом меню — категории товаров отобразятся списком в боковом меню;
• Группировать в контекстное меню — категории товаров будут отображаться раскрывающимся меню при нажатии на группу товаров.

После выбора подраздела отобразится список Категории и подкатегории. Выберите необходимое значение из списка:

• Категории — будут отображаться только названия категорий товаров.
• Категории и подкатегории — будут отображаться категории, раскрывающиеся в подкатегории, если такие существуют.

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

Обратите внимание: изменения вступят в силу в течение часа.

Группировка в контекстное меню

Отображение в боковом меню

Нижнее меню (футер, подвал)

Настройка нижнего меню не отличается от настройки верхнего горизонтального меню.

• Нижнее меню может содержать максимум 4 блока с произвольным количеством пунктов меню в каждом блоке.
• Каждый блок меню имеет свое название.
• Нижнее меню не содержит пункты подменю.
• Настройка нижнего меню аналогична настройке верхнего и бокового меню.

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

Обратите внимание: изменения вступят в силу в течение часа.

Меню в мобильной версии сайта

Настройка меню в мобильной версии сайта не отличается от настройки верхнего горизонтального меню. Для мобильной версии сайт можно настроить двухуровневое меню.

Если не настроить это меню, то в мобильной версии сайта по умолчанию будут отображаться разделы: «Главная», «Товары и услуги», «О нас» и «Контакты».

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

Заголовки сайта

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

Можно переименовать такие разделы:

• Товары и услуги;
• Витрина;
• О нас;
• Контакты;
• Условия оплаты и доставки;
• Статьи.

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

Обратите внимание: если вы хотите, чтобы заголовок раздела совпадал с названиями пунктов меню для этого раздела, то нужно указать одинаковое название во всех блоках: Меню в мобильной версии сайта, Горизонтальное меню, Боковое меню, Нижнее меню, Заголовки сайта.

Меню сайта. Типовое решение «GS: ремонт квартир, домов»

В шаблоне решения реализовано 3 меню:

1. Верхнее меню
2. Меню в сайдбаре
3. Нижнее меню

Верхнее меню

Создание новых пунктов меню через создание новой страницы (раздела)

Пункты меню создаются автоматически при создании Страниц либо Разделов.

Для примера создадим новый раздел «Тест». При создании раздела отмечаем «добавить пункт меню».

Нажимаем Далее.

1. Выбираем название нового пункта меню.
2. Выбираем тип меню: Верхнее меню
3. Выбираем размещение нового пункта меню относительно других пунктов

Нажимаем Далее. Наполняем и сохраняем страницу.

Создание и редактирование пунктов через панель «Редактировать пункты меню»

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

1. Войти в Битрикс
2. Включить режим правки
3. Навести на меню курсором мыши и кликнуть по кнопке «Редактировать пункты меню»

Изменяем действующий пункт меню либо добавляем новый. Нажимаем Сохранить

Создание подуровней верхнего меню

Подуровни в верхнем меню создаются автоматически при создании новых страниц либо разделов. Для этого необходимо во время создания Новой страницы (раздела) выбрать тип меню «Левое меню». 

Чтобы создать подуровень для раздела «Цены» необходимо перейти в раздел «Цены» и кликнуть «Создать раздел».

Нижнее меню

Нижнее меню не соодержит вложенных пунктов. Добавление и редактирование новых пунктов меню происходит таким же образом, как описано для верхнего меню.

Меню сайдбара

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

Для создания вложенных пунктов меню необходимо:

1. Перейти в раздел, для которого будет создано подменю
2. Создать страницу либо раздел
2. Для нового пункта меню выбрать тип меню «Левое подменю»

! Стоит заметить, что подуровни для левого меню не будут отображаться в подуровнях верхнего меню.

Создание сайта в системе uCoz

Редактирование меню сайта

Система uCoz позволяет так же менять уже составленное меню и создавать новое меню.
Для этого зайдите в Панель управления сайта через ссылку http://site.ucoz.ru/admin/ (заместо site.ucoz.ru пишите адрес своего сайта) или через панель после входа на сайт через пункт меню Общие => Вход в панель управления.
Далее сразу же в открывшейся странице нужно выбрать Конструктор меню.

Перед вами откроется список меню сайта

Рассмотрим два варианта работы с меню:
1) Редактирование имеющегося меню
2) Создание нового меню (меню может быть сколько угодно)  

Редактирование имеющегося меню

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

Откроется окошко, в котором нужно указать Название и Адрес, куда будет ссылаться.

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

Создание нового меню

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

Откроется следующее окно

В нем необходимо написать Название и выбрать Способ отображения.
Способ отображения может быть двух видов:
1) Вертикальное (оно обычно стандартное)
2) Горизонтальное
По названию уже становится ясно как оно будет расположено. После выбора нажимаем Сохранить.
Откроется страница, где нужно будет указать какие пункты меню будут в нем.

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

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

Далее переходим в верхнее меню панели управления, выбираем Дизайн => Управление дизайном

Выбираем в нем Глобальные блоки => Первый контейнер

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

Код прописью:
<!— <block13> —>
<div><h2><!— <bt> —>
<!—<s5184>—>Название вашего меню<!—</s>—><!— </bt> —>
</h2><div><!— <bc> —>
<!— </bc> —></div>
</div><div></div>
<!— </block13> —>

Что нужно изменить в указанном выше коде:
Номер блока — <block13> — у меня он 13 потому что у меня всего создано 12 блоков, соответственно 13 свободный. Вам нужно будет прописать тот который у вас свободен, следующий по номеру.

if()?> — сюда вы подставляете свое меню новое

Название вашего меню – указывается то как вы назовете свое новое меню.
<!— <bc> —><!— </bc> —> — вставляется свое новое меню
После сделанных вами изменений нажимайте кнопку Сохранить, которая находится в конце страницы.

Работа с меню — Помощь

1. Помощь
2. Редактор Html5

 

Содержание:

Установка меню
Изменение размеров меню
Управление структурой меню
Добавление пунктов меню и настройка ссылок
Стили меню
 

 

 

 

 

Установка меню

 

Перетаскиваем новый виджет из списка виджетов левого меню.

 

Виджет появился.

 

 

  Изменение размера меню

 

Вы можете изменять размер виджета «Меню» двумя способами:

1. Выставить необходимое значение в «Свойствах» виджета.

 

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

 

Нажмите дважды на меню, чтобы зайти в настройки.

 

 

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

 

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

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

Для удаления лишнего пункта меню откройте контекстное меню кликнув по иконке  и выберите «Удалить пункт»

 

 

  Управление структурой меню. Создание выпадающего меню

 

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

Аналогичным способом можно управлять вложенностью страниц.

 

Вложенность позволяет создавать выпадающее меню. В нашем редакторе максимально можно создать 3 уровня вложенности.

Для изменения уровня страницы в структуре меню также можно использовать контекстное меню. Кликните по иконке справа от названия страницы и выберите «Опустить на уровень» или «Поднять на уровень». 

 

 

 

  Добавление пунктов меню и настройка ссылок

 

Добавить новый пункт меню можно двумя способами:

1. Использовать кнопку «Добавить странцу»
   
    
2. Добавить дочернюю страницу
   

 

Перед вами появится окно с двумя вкладками:

Чтобы добавить ссылку на страницу сайта просто выберите ее из списка.

 

Для добавления внешней ссылки, перейдите на вкладку «Ссылка» и введите адрес сайта для перехода. 

 

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

 

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

 

Вы в любой момент вы можете изменить ссылку.

 

 

 

В настройках меню вы можете управлять стилями меню.

Постепенно мы будем добавлять новые.

Вы можете внести изменения в стандартный стиль, изменив шрифт и его размер.

Есть три режима отображения пуктов меню:

— обычный режим (применяется в режиме покоя)
— по наведению (применяется при наведении мышки на меню)
— активный (применяется, когда открыта текущая страница)

Соответственно, для каждого режима вы можете установить собственный стиль.

 

В режиме просмотра это будет выглядеть так.

 

 

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

 

Настройки данного виджета идентичны настройкам горизонтального меню.

 

 

Создание нового пункта меню сайта в Joomla 3

После того, как новое меню в админке Joomla 3 создано, можно приступать к наполнению этого меню. Для этого необходимо разобраться, как создать новый пункт меню. В этой статье рассмотрим только как добраться до страницы создания нового меню в админке Joomla. Это связано с тем, что Joomla предоставляет массу готовых инструментов для того, чтобы облегчить управление сайтом… Но не будем забегать вперёд.

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

Для этого выбираем пункт Главного меню админки «Меню», кликнув по нему левой кнопкой мыши.

Выпадет подменю, в котором внизу будет список из имеющихся уже меню сайта. Нужно провести курсором мыши до того меню, в которое будем добавлять новый пункт. Остановка курсора на названии этого меню вызовет выпадение ещё одного пункта меню «Создать пункт меню». Это то, что нужно! По нему и нужно кликнуть левой кнопкой мыши, чтобы открылась страница создания нового пункта меню:

Есть второй способ добраться до создания нового пункта меню. Через Менеджер меню: Все меню. Раздел «Все пункты меню». Этот способ нужен для того, чтобы работая над определённым меню, не обращаться к Главному меню админки, а создавать и создавать новые пункты меню. Итак, на что следует обратить внимание, находясь в Разделе «Все пункты меню» админки Joomla:

1. Выпадающий список должен быть на выборе «Сайт» (ведь мы создаём новый пункт для меню сайта).
2. Выпадающий список с названиями меню должен соответствовать тому меню, в котором мы создаём новый пункт.

Когда эти параметры выставлены, то можно смело кликнуть левой кнопкой мышки на зелёную кнопку «Создать»:

Какой бы из указанных выше способов не был выбран, откроется страница «Менеджер меню: Создание пункта меню»:

Страница «Менеджер меню: Создание пункта меню» состоит из нескольких частей:

• «Заголовок меню» — поле для задания Заголовка пункта меню. То, что будет тут введено, то и будет отображено в меню.
• «Алиас» — Алиас (псевдоним) применяется для создания сокращённой URL-ссылки (SEF URL). Если оставить это поле пустым, Joomla! заполнит его значением по умолчанию, созданным на основе заголовка объекта. Это значение будет зависеть от установленных на сайте параметров SEO (Общие настройки -> Сайт).

  В случае использования адресов страниц в формате Unicode, Алиас будет состоять из символов того же языка, что и заголовок. При желании можно вручную ввести любые символы в кодировке UTF-8 (т.е. создавать адреса на русском языке, как в Wiki), но следует помнить, что пробелы и некоторые другие служебные символы при этом будут заменены на дефисы.

  По умолчанию, без использования Unicode, Алиас генерируется из символов заголовка, переведённых в нижний регистр. Пробелы при этом также заменяются на тире. Можно ввести Алиас вручную, латинскими символами, используя строчные буквы и дефисы без пробелов. Допускается вводить символ подчёркивания. Если заголовок состоит не из латинских букв, значение алиаса будет состоять из текущей даты и времени.

Ниже следуют вкладки, про которые рассказано в статье «Вкладки менеджера меню Joomla при создании нового пункта меню»

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

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Оптимизация меню вашего сайта для SEO

Главная / SEO / Оптимизация меню вашего сайта

Опубликовано 24 июня 2018

Изменен: 27 июня, 2018

212

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

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

Меню веб-сайта

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

Подобно множеству других ресурсов, у Greenday.com на черном фоне главное меню, при этом меню на красном фоне также имеет массу ссылок на внутренние и внешние страницы. Профили в социальных сетях, ссылки на Apple Music и Spotify, там же — окно подписки на почтовую рассылку.

У Manhattan College есть четкое второстепенное меню, ведущее на внутренние страницы для конкретной аудитории. Эти примеры показывают, что дополнительные меню есть везде.

Зачем мы привели эти примеры?
Главная мысль – не сваливайте все в одно меню. Поступая так, вы загромождаете свой сайт и превращаете главное меню в жалкое подобие структуры сайта. Сфокусируйтесь на самом важном контенте.

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

Обратная сторона большого количества ссылок в меню веб-сайта

Не рекомендуется делать слишком много ссылок, где угодно на странице. Да, Google допускает до 250 ссылок на одной странице без проблем (а, может и больше). Но цель вашего ресурса, наверно, не заключается в том, чтобы потерять лес за деревьями?
Не рекомендуются:

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

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

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

Идеальное меню сайта

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

• — Как выглядит самая лучшая структура меню для сайта?
• — Какие пункты должны обязательно присутствовать в меню?

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

Продолжайте читать: «Структура сайта полное руководство»

Оригинал

 

Иерархия сайта и навигация | Удобство использования и веб-доступность

Карты сайта и иерархия сайтов

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

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

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

Меню и навигация

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

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

Что такое меню и как их использовать в WordPress

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

Изменение меню

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

Добавление содержимого

В разделе меню WordPress вы увидите различные элементы, которые вы можете добавить.Страницы, сообщения, настраиваемые ссылки и категории должны отображаться по умолчанию. Однако у вас также могут быть установлены плагины, предлагающие дополнительный контент. Например, плагин Resume Builder позволяет добавлять выбранные резюме в свои меню. Используя уже созданный контент, вы можете придать своим меню особый вид и функциональность. Установив флажок рядом с материалом, который вы хотите добавить, а затем нажав кнопку «Добавить в меню», WordPress создаст структуру.

Функциональность перетаскивания

При редактировании или создании нового меню WordPress предлагает форму формата перетаскивания, которая позволяет вам изменять внешний вид.Это позволяет вам перемещать элементы в меню, чтобы упорядочить их так, как вы считаете нужным. Если вам нужно что-то удалить, в правом верхнем углу каждого добавленного компонента доступна небольшая стрелка раскрывающегося списка. При щелчке по нему появляется ссылка «Удалить» компонент из меню.

Где разместить меню в WordPress

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

Пример меню навигации левой боковой панели

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

• Создайте новое меню: перейдите в «Внешний вид» => «Меню» и щелкните ссылку «Создать новое меню» вверху.Дайте вашему новому меню имя, например «Левая навигация», и нажмите кнопку «Создать меню».

• Выберите категории: слева будет поле «Категории», которое расширяется при нажатии. Отсюда вы можете выбрать все категории, которые хотите добавить в меню.
• Меню «Сохранить». После добавления категорий нажмите кнопку «Сохранить меню».
• Создание виджета: перейдите в «Внешний вид» => «Виджеты» и перетащите «Пользовательское меню» на «Левую боковую панель».
• Заголовок: Это необязательная запись.Если вы не дадите ему заголовок, текст заголовка нового меню останется пустым. В качестве аргумента мы назовем это «Навигация».
• Выберите меню: появится раскрывающийся список, в котором будут отображаться все меню, которые у вас есть в WordPress. Выберите созданное вами меню под названием «Левая навигация».
• Сохранить: после того, как вы нажмете кнопку «Сохранить», на левой боковой панели вашего веб-сайта появится левое меню навигации.

ПРИМЕЧАНИЕ : Для того, чтобы приведенный выше пример работал, в вашей теме должна быть доступна «Левая боковая панель».В противном случае это не будет отображаться. Меню могут дать вам много возможностей для управления и настройки вашего веб-сайта. От специальных сообщений и страниц, которые вы создали, до списка ссылок, которые, по вашему мнению, нужны вашей целевой аудитории, — меню WordPress позволяет вам доставлять эту информацию в понятной форме. Поэкспериментируйте со своими собственными меню и посмотрите, как они могут помочь вам создать замысловатый веб-сайт.

Что вы добавляете в меню? Могут ли они стать частью дизайна вашего веб-сайта, не загромождая его?

Автор: Каумил Патель

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

Редактирование меню сайта — Pixieset

Что такое меню моего сайта?

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

Сколько страниц отображается в меню сайта?

Чтобы ваш сайт оставался чистым и организованным, вы можете отображать до шести страниц в меню сайта.Если у вас более шести страниц, последний слот меню будет читать «Еще» и будет служить выпадающим меню, содержащим остальные страницы.

Могу ли я изменить порядок страниц?

Да! Чтобы настроить порядок страниц в меню сайта, просто перейдите к списку страниц, выберите страницу и перетащите ее в нужное место.

Как создать раскрывающийся список?

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

Примечание: Папка не может быть добавлена ​​в качестве подстраницы, а ссылки не могут содержать подстраницы.

Могу ли я скрыть страницы из меню сайта?

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

Чтобы скрыть страницу из меню, нажмите Еще > Скрыть из меню .

Это немедленно удалит страницу из вашего меню, оставив ее видимой в вашем листинге страниц.

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

Навигация и поиск | Докси

Настройте навигацию по сайту и выполните поиск по сайту Docsy.

Меню верхнего уровня (то, которое отображается в верхней панели навигации для всего сайта) использует главное меню вашего сайта. Все сайты Hugo имеют основной массив пунктов меню , доступный через переменную сайта .Site.Menus и заполняемый через заголовок страницы или config.toml вашего сайта.

Чтобы добавить страницу или раздел в это меню, добавьте его в главное меню сайта в config.toml или в заголовок целевой страницы (в _index.md или _index.html для раздела, так как это целевая страница раздела). Например, вот как мы добавили целевую страницу раздела "Документация" в главное меню на этом сайте:

  ---
title: "Добро пожаловать в Докси"
linkTitle: "Документация"
меню:
  основной:
    вес: 20
    предварительно:  
---
  

Меню упорядочено слева направо по странице вес . Так, например, индекс раздела или страница с весом : 30 появится после раздела «Документация» в меню, а страница с весом : 10 появится перед ним.

Если вы хотите добавить ссылку на внешний сайт в это меню, добавьте ее в файл config.toml , указав вес .

  [[menu.main]]
    name = "GitHub"
    вес = 50
    url = "https://github.com/google/docsy/"
  

Как описано в документации Hugo, вы можете добавлять значки в меню верхнего уровня, используя параметр pre и / или post для пунктов главного меню, определенных в файле config.toml вашего сайта, или через заголовок страницы. Например, следующая конфигурация добавляет значок GitHub к пункту меню GitHub и New! предупреждение, чтобы указать, что это новое дополнение к меню.

  [[menu.main]]
    name = "GitHub"
    вес = 50
    url = "https://github.com/google/docsy/"
    pre = " "
    post = " Новинка! "
  

Полный список используемых значков можно найти в документации FontAwesome. Docsy по умолчанию включает бесплатные значки FontAwesome.

Добавление раскрывающегося списка версии

Если вы добавите [params.versions] в config.toml , тема Docsy добавит выпадающий список выбора версии в меню верхнего уровня.

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

Добавление раскрывающегося списка языков

Если вы настраиваете более одного языка в config.toml , тема Docsy добавляет раскрывающийся список выбора языка в меню верхнего уровня. При выборе языка пользователь переходит на переведенную версию текущей страницы или на домашнюю страницу для данного языка.

Подробнее см. В разделе «Поддержка нескольких языков».

Меню раздела, как показано в левой части раздела docs , автоматически создается из дерева содержимого .Как и меню верхнего уровня, оно упорядочено по индексу страницы или раздела , весу (или по созданию страницы , дате , если вес не установлен), с заголовком страницы или индекса или linkTitle , если отличается в качестве заголовка ссылки в меню. Если в подпапке раздела есть страницы, отличные от _index.md или _index.html , эти страницы появятся в виде подменю, снова упорядоченного по весу . Например, вот метаданные для этой страницы, показывающие ее вес и заголовок :

  ---
title: "Навигация и поиск"
linkTitle: "Навигация и поиск"
дата: 2017-01-05
вес: 3
описание:>
    Настройте навигацию по сайту и выполните поиск по своему сайту Docsy.---
  

Чтобы скрыть страницу или раздел из меню, установите toc_hide: true в передней части.

По умолчанию в меню раздела отображается текущий раздел полностью развернутым вниз. Это может сделать левую навигацию слишком длинной и сложной для поиска крупных сайтов. Попробуйте установить параметр сайта ui.sidebar_menu_compact = true в config.toml .

В компактном меню ( .ui.sidebar_menu_compact = true ) отображаются только предки, братья и сестры текущей страницы и прямые потомки.Вы можете использовать необязательный параметр .ui.ul_show , чтобы установить желаемую глубину меню, чтобы оно было всегда видимым. Например, при .ui.ul_show = 1 всегда отображается первый уровень меню.

На больших сайтах (по умолчанию:> 2000 страниц) меню раздела не создается для каждой страницы, а кэшируется для всего раздела. Затем с помощью JS устанавливаются классы HTML для маркировки активного пункта меню (и пути в меню). Вы можете настроить предел для активации меню кэшированных разделов с помощью необязательного параметра .ui.sidebar_cache_limit .

Также можно добавить значки в меню раздела на боковой панели, установив параметр icon в начале страницы (например, значок : fas fa-tools ).

Вы можете найти полный список значков для использования в документации FontAwesome. Docsy по умолчанию включает бесплатные значки FontAwesome.

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

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

Чтобы создать страницу-заполнитель, создайте файл страницы, как обычно, в каталоге, где вы хотите, чтобы ссылка отображалась в меню, и добавьте параметр manualLink к его метаданным. Если на странице есть manualLink в своих метаданных, Docsy генерирует ссылку для нее в меню раздела для этой страницы и в индексе раздела (список дочерних страниц раздела на целевой странице — см. Описание в документации Docsy. ), но место назначения ссылки заменяется значением manualLink .Текст ссылки — это title (или linkTitle , если он установлен) вашей страницы-заполнителя. При желании вы также можете установить атрибут title ссылки с помощью параметра manualLinkTitle и цель ссылки с помощью manualLinkTarget — например, если вы хотите, чтобы внешняя ссылка открывалась в новой вкладке, вы можете установить цель ссылки на _blank . Docsy автоматически добавляет rel = noopener к ссылкам, открывающим новые вкладки, в целях безопасности.

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

Примечание

Хотя все сгенерированные ссылки меню и целевой страницы на основе вашего файла-заполнителя установлены в соответствии с параметрами manualLink или manualLinkRelref , Hugo по-прежнему генерирует обычную HTML-страницу сайта для файла, хотя и без сгенерированных ссылок на нее.Чтобы избежать путаницы, если пользователи случайно попадают на сгенерированную страницу-заполнитель, мы рекомендуем указывать URL-адрес для внешней ссылки в обычном содержании и / или описании страницы.

Навигация по хлебным крошкам

Навигация по хлебным крошкам включена по умолчанию. Чтобы отключить навигацию по хлебным крошкам, установите параметр сайта ui.breadcrumb_disable = true в config.toml .

Параметры поиска по сайту

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

• Система пользовательского поиска Google (GCSE), вариант по умолчанию, который использует индекс вашего общедоступного сайта Google для создания страницы результатов поиска.
• Algolia DocSearch, который использует механизм индексирования и поиска Algolia и предоставляет организованный выпадающий список результатов поиска, когда ваши читатели используют окно поиска. Algolia DocSearch бесплатен для сайтов с общедоступной документацией.
• Локальный поиск с Lunr, который использует Javascript для индексации и поиска вашего сайта без необходимости подключения к внешним службам.Этот вариант не требует, чтобы ваш сайт был общедоступным.

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

Имейте в виду, что если вы случайно включите более одной опции поиска в конфигурации .toml , вы можете получить неожиданные результаты (например, если вы добавили .js для Algolia DocSearch, вы получите результаты Algolia, если включите поиск GCSE, но забудете отключить поиск Algolia).

По умолчанию поле поиска отображается как на верхней панели навигации, так и в верхней части левой панели навигации боковой панели. Если вам не нужно окно поиска на боковой панели, установите sidebar_search_disable на true в config.toml :

  sidebar_search_disable = true
  

Настройка поиска с помощью системы пользовательского поиска Google

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

Настройка поиска по сайту

1. Разверните свой сайт и убедитесь, что он построен с использованием HUGO_ENV = "production" , поскольку Google будет сканировать и индексировать только сайты Docsy, созданные с этим параметром (вы, вероятно, не хотите, чтобы ваш неготовый к работе сайт быть доступным для поиска!). Вы можете указать эту переменную как флаг командной строки для Hugo:

     $ env HUGO_ENV = "производство" hugo
     

   В качестве альтернативы, если вы используете Netlify, вы можете указать его как параметр развертывания Netlify в netlify.toml или пользовательский интерфейс Netlify вместе с версией Hugo. Может пройти день или около того, прежде чем на вашем сайте появятся реальные результаты поиска.

2. Создайте систему пользовательского поиска Google для развернутого сайта, щелкнув Новая поисковая система на странице пользовательского поиска и следуя инструкциям. Запишите идентификатор своей новой поисковой системы.

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

   • Выберите Внешний вид . Измените макет Overlay по умолчанию на Только результаты , поскольку этот параметр означает, что результаты поиска будут встроены в страницу поиска, а не отображаться в отдельном поле. Нажмите Сохранить , чтобы сохранить изменения.
   • Измените поведение ссылки результатов по умолчанию, чтобы результаты поиска с вашего сайта не открывались в новой вкладке. Для этого выберите Search Features — Advanced — Настройки веб-поиска .В поле Link Target введите «_parent». Нажмите Сохранить , чтобы сохранить изменения.

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

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

1. Убедитесь, что у вас есть файл Markdown в content / en / search.md (и один для других языков, если необходимо), чтобы отображать результаты поиска. Требуется только заголовок и макет : найдите , как в следующем примере:

     ---
   title: Результаты поиска
   макет: поиск
   ---
     

2. Добавьте свой идентификатор системы пользовательского поиска Google в параметры сайта в конфигурации .toml . При необходимости вы можете добавить разные значения для каждого языка.

     # Идентификатор системы пользовательского поиска Google. Удалите или закомментируйте, чтобы отключить поиск.
   gcs_engine_id = "011737558837375720776: fsdu1nryfng"
     

Отключение поиска GCSE

Если вы не укажете идентификатор системы пользовательского поиска Google для своего проекта и не включили другие параметры поиска, окно поиска не появится на вашем сайте. Если вы используете по умолчанию config.toml с сайта-примера и хотите отключить поиск, просто закомментируйте или удалите соответствующую строку.

Настроить Algolia DocSearch

В качестве альтернативы GCSE вы можете использовать Algolia DocSearch с этой темой. Algolia DocSearch бесплатен для сайтов с общедоступной документацией.

Подпишитесь на Algolia DocSearch

Заполните форму на странице https://community.algolia.com/docsearch/#join-docsearch-program.

Если вы будете приняты в программу, вы получите код JavaScript для добавления на свой сайт документации от Algolia по электронной почте.

Добавление Algolia DocSearch

1. Включите Algolia DocSearch в конфигурации .toml .

     # Включить поиск документов Algolia
   algolia_docsearch = правда
     

2. Удалите или закомментируйте любой идентификатор GCSE в config.toml и убедитесь, что для локального поиска установлено значение false , так как у вас может быть включен только один тип поиска. См. Отключение поиска GCSE.

3. Отключите поиск на боковой панели в config.toml , так как в настоящее время это не поддерживается для Algolia DocSearch. См. Отключение окна поиска на боковой панели.

4. Добавьте код JavaScript, предоставленный вам Algolia, в заголовок и тело каждой страницы вашего сайта.Дополнительные сведения см. В разделе Добавление кода в заголовок или перед концом тела.

5. Обновите поле inputSelector в Javascript конца тела с помощью соответствующего селектора CSS (например, .td-search-input , чтобы использовать CSS по умолчанию из этой темы).

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

Настроить локальный поиск с помощью Lunr

Lunr — это опция поиска на основе Javascript, которая позволяет вам проиндексировать ваш сайт и сделать его доступным для поиска без необходимости использования внешних служб поиска на стороне сервера.Это хороший вариант, особенно для небольших или закрытых сайтов.

Чтобы добавить поиск Lunr на свой сайт Docsy:

1. Включить локальный поиск в config.toml .

     # Включить локальный поиск
   offlineSearch = true
     

2. Удалите или закомментируйте любой идентификатор GCSE в config.toml и убедитесь, что для Algolia DocSearch установлено значение false , так как у вас может быть включен только один тип поиска. См. Отключение поиска GCSE.

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

Подсказка

Если вы тестируете это локально с помощью функций локального сервера Hugo, вам необходимо сначала создать файл offline-search-index.xxx.json , запустив hugo . Если у вас запущен сервер Hugo во время сборки offline-search-index.xxx.json , вам может потребоваться остановить сервер и перезапустить его, чтобы увидеть результаты поиска.

Изменение общей длины результатов локального поиска

Вы можете настроить итоговую длину, установив offlineSearchSummaryLength в конфигурации .toml .

  # Включить офлайн-поиск с Lunr.js
offlineSearch = true
offlineSearchSummaryLength = 200
  

Изменение максимального количества результатов локального поиска

Вы можете настроить максимальное количество результатов, установив offlineSearchMaxResults в config.toml .

  # Включить офлайн-поиск с Lunr.js
offlineSearch = true
offlineSearchMaxResults = 25
  

Изменение ширины всплывающего окна результатов локального поиска

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

Если вы хотите ограничить ширину, добавьте следующий scss в файл assets / scss / _variables_project.scss .

  body {
    .popover.offline-search-result {
        максимальная ширина: 460 пикселей;
    }
}
  

Исключение страниц из результатов местного поиска

Чтобы исключить страницы из результатов локального поиска, добавьте exclude_search: true в начало каждой страницы:

.

  ---
title: "Указатель"
вес: 10
exclude_search: true
---
  

Последнее изменение 16 апреля 2021 г .: Попытка уточнить manualLink и manualLinkTitle (1a5979c)

Как улучшить навигацию по сайту с помощью этих 12 советов

Навигация по веб-сайту — самая важная особенность общего пользовательского опыта.Это может повысить или снизить ваши шансы на конверсию.

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

К сожалению, многие владельцы веб-сайтов не осознают важность навигации. Большинство из них сосредоточены на дизайне веб-сайтов и мультимедиа, уделяя очень мало внимания созданию сайта, который прост в использовании, и даже хорошо спроектированные сайты могут потерять около 55% посетителей.У них остается сайт, на котором людям нужно «охотиться» за контентом, чтобы найти то, что им нужно — это никогда не бывает хорошими новостями.

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

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

Навигация по сайту и взаимодействие с пользователем

Почему важна навигация по сайту?

Простая навигация по сайту имеет решающее значение для ведения посетителя на пути к покупке. Слишком большое количество категорий может занять очень много времени и вызвать серьезную нерешительность.Это может легко стоить вам конверсии, потому что, как только ваш посетитель запутается, он с большей вероятностью уйдет. Фактически, исследования показывают, что 94% посетителей ушли бы просто из-за дизайна веб-сайта.

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

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

Навигация по сайту на мобильных устройствах

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

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

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

Методы улучшения навигации по сайту

1. Разделенные категории

Навигационная система вашего веб-сайта, вероятно, имеет несколько категорий, разделов и подразделов. Им следует давать хорошие, оптимизированные для SEO заголовки, но этого недостаточно. Ваши категории также должны быть четко представлены на сайте и четко отделены от подкатегорий.

2. Ограничьте количество пунктов меню

В большинстве случаев рекомендуемое количество пунктов меню — не более 7 или 8. У людей не так много времени, которое они проводят на вашем сайте, и они оценят это, если вы разделите свой контент на несколько категорий в меню навигации. .

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

3. Создание различных интерактивных ссылок

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

См. Также: Принимайте решения, а не догадывайтесь — как аналитика веб-данных может стимулировать разработку цифровых продуктов

4. Организуйте его так, как ожидают пользователи.

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

5. Удалите вводящие в заблуждение навигационные заголовки и текст

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

Намерение не может быть злонамеренным — расплывчатости или неясности может быть достаточно, чтобы пользователь сорвал процесс.

6. Включите в изображения текст ALT

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

7. Убедитесь, что функция поиска легко найти

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

8. Убедитесь, что поле поиска работает

Недостаточно сделать поиск легким — нужно, чтобы он работал.Страница результатов поиска вашего сайта всегда должна давать качественные результаты, допускать опечатки и показывать сопутствующие товары и товары. Google предлагает программируемую поисковую систему для добавления пользовательского поиска на ваш сайт. Результат поиска, который возвращает уведомление «продукт не найден», больше не является общепринятой стратегией!

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

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

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

10. Используйте цвета с умом

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

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

11. Сделайте навигацию связанной с приоритетами бизнеса

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

12. Добавьте CTA

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

CTA

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

Лучшие практики и советы по навигации по сайту

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

Вот еще несколько моментов, которые следует учитывать:

• Добавьте кнопку «вернуться наверх», чтобы уменьшить количество обновлений страницы. Кнопки навигации веб-сайта с правильной функциональностью могут значительно улучшить работу.
• Нарисуйте свои меню на бумаге и посмотрите, как они связаны — если это не имеет смысла на бумаге, это не будет иметь смысла в Интернете!
• Подумайте о веб-сайтах, которые вам нравятся. Что делает их легкими? Загромождены ли они информацией или скорее просты?

Запустите A / B-тесты с разными меню, чтобы узнать, что удерживает посетителей на сайте дольше.

У вас есть какие-нибудь уловки? Поделитесь ими в комментариях ниже или свяжитесь с одним из наших экспертов сегодня!

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

8 ошибок, из-за которых дизайн сайта неуклюж

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

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

Но эти ошибки — те, на которых будущие веб-дизайнеры могут легко поучиться — именно это и привело нас сюда сегодня. Давайте поговорим о 8 из тех навигационных ошибок, которые заставляют работать клавиатуру и заставляют бросать ноутбук, которые привели к дурной славе веб-дизайна.

Омерзительная восьмерка веб-навигации

Несоблюдение Конвенции

Сегодня в сети насчитывается около 1,75 миллиарда веб-сайтов, что по сути означает, что ваш веб-сайт конкурирует с примерно 1 749 999 999 другими за внимание пользователей Интернета во всем мире.

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

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

Помните, когда мы упоминали, как навигация сводится к набору подсказок? Многие из этих подсказок основаны на так называемом соглашении: общих комбинациях или конфигурациях текста и / или визуальных элементов, которые грамотные в Интернете пользователи знают и понимают.

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

Однако, когда условности отбрасываются ради уникальности, новому пользователю становится намного труднее добраться туда, где ему нужно. Они могут признать, что ваш сайт не похож ни на один другой…но они будут помнить свое разочарование больше, чем ваш «интересный» веб-макет.

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

• Сделайте главное меню навигации легко видимым
• Разместите логотип вашего бренда в верхнем левом углу страницы
• Используйте интуитивно понятную иконографию (значок дома для домашней страницы, сумка для покупок или тележка для обозначения онлайн-корзины и т. Д.)
• Реализуйте четкую визуальную иерархию, чтобы помочь пользователям легко обрабатывать каждую страницу

Добавление слишком большого количества пунктов меню

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

Почему? Потому что, хотя вы можете настроить классификацию информации на своем веб-сайте, вы не сможете изменить тот факт, что семь — это магическое число для обработки информации.В 1950-х годах знаменитый гарвардский психолог Джордж Миллер изучал, как человеческий мозг использует «фрагменты» в качестве механизма для поглощения новой информации. Он обнаружил, что наша кратковременная память обычно допускает не более семи «фрагментов» за раз.

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

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

Но когда вы группируете эти предметы, остерегайтесь…

Неправильное использование раскрывающихся меню

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

• Задачи для SEO.Поисковые системы могут бороться со сканированием элементов в формате раскрывающегося меню.
• Замедление перехода пользователей со страницы на страницу. Когда пользователи решают нажать на основную кнопку навигации, внезапное появление раскрывающегося меню может замедлить их продвижение.
• Обычно отягощает при использовании. Еще раз: не позволяйте своему сайту выделяться по неправильным причинам!

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

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

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

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

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

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

Начало меню: излишне глубокие меню

Что касается меню, давайте перейдем к обсуждению двух других типов: плоских меню и глубоких меню.

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

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

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

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

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

Нечеткие (или основанные на формате) этикетки

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

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

То же самое с «Свяжитесь с нами». Это простой и стандартный набор фраз, но он также сразу распознается как призыв к действию, который направляет пользователей на какую-то страницу с контактами.

А как насчет «Услуги» как лейбла? Или «Продукты»? Звонят ли они в одни и те же узнаваемые колокольчики? Они могут.Но в то же время … они упускают возможность продемонстрировать, чем является ваш бренд и чем он занимается.

Не для того, чтобы гудеть, но давайте взглянем на одно из наших собственных творений в Интернете: веб-сайт Hotel Saranac, роскошного исторического отеля, расположенного на озере Саранак, штат Нью-Йорк. Если вы перейдете на сайт hotelsaranac.com, вы увидите следующие пункты меню:

Посмотрите на первые три элемента навигации: Stay, Dine и Explore. Когда вы попадаете на главную страницу, зная, что она связана с отелем, эти короткие, состоящие из одного слова ярлыки по-прежнему довольно понятны.

• Пребывание: звучит так, как будто это ведет к информации, полезной для бронирования, не так ли?
• Dine: теперь мы должны говорить о еде и столовых.
• Исследуйте: хотя и не так явно, как первые два, это, кажется, предлагает путь, ведущий к пониманию района озера Саранак и других интересных мест, которые может предложить отель.

А что, если бы мы вместо этого решили объединить все три темы под ярлыком «Услуги»? Это только мы, или это кажется излишне расплывчатым?

Представьте, если бы кто-то, кто попал на сайт отеля Saranac, не знал (каким-то образом), что это был сайт отеля.Термин «услуги» на самом деле не поможет им понять, в то время как «остаться» и «пообедать» — гораздо больше.

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

В конечном счете, расплывчатость совершенно отличается от ясности и краткости, но бывает трудно заметить разницу.Когда вы пишете элементы навигации для своего сайта, спросите себя: «Что эта фраза указывает новым и существующим посетителям?» Если ваши посетители могут взглянуть на этикетку и получить полезную информацию, какой бы незначительной она ни была, то вы на правильном пути.

Излишнее скрытие навигации

На новом веб-сайте простой способ ориентироваться от страницы к странице — это следить за меню навигации, что становится затруднительным, когда меню автоматически скрывается!

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

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

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

Если вы не соревнуетесь за место на экране карманного размера, пусть ваша система навигации верхнего уровня увидит свет на ваших веб-страницах.

Игнорирование ложного дна на веб-странице

Уместно закончить этот список примечанием о дне — ложном дне.

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

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

Это особенно важно, когда у вас есть большое изображение заголовка, которое занимает много места на вашей домашней странице. На самом деле, это звучит для нас немного знакомо…

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

графический

Оптимизация навигации ТОЛЬКО на домашней странице

Шучу, у нас есть для вас еще один совет — верхний совет был ложным дном (простите нас).

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

НЕПРАВИЛЬНО.

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

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

• Эффективное использование соглашений о дизайне для навигации пользователей по сайту
• Обеспечение простых и понятных путей ко ВСЕМ доступным материалам
• Помогает пользователям понять и отслеживать, где они были

Вопросы? Мы здесь, чтобы помочь

Мы надеемся, что это устранит некоторую путаницу, которая могла возникнуть у вас в отношении веб-навигации.Как у нас дела?

Если вы все еще не уверены, дайте нам знать, и мы сможем сделать работу лучше в следующий раз … и, надеюсь, вам пригодятся в вашем следующем проекте веб-дизайна!

Использование меню навигации — Liferay Learn

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

Для начала работы с меню навигации необходимо:

1. Создание меню навигации

2. Добавление элементов в меню, таких как существующие страницы, добавление ссылок или подменю

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

4. Добавление виджета меню навигации (если он еще не присутствует) на страницу и его настройка

Например, меню навигации может содержать все дочерние страницы данной страницы.Вы можете отобразить меню с помощью виджета «Меню навигации» на родительской странице. Это создает навигацию, которая отображает только выбранные дочерние страницы, фактически создавая мини-сайт.

Подсказка

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

Создание меню навигации¶

1. Нажмите Меню продукта () → Site Builder → Меню навигации .

2. Нажмите кнопку Добавить (), чтобы добавить новое меню.

3. Введите имя: (например: Новое меню ).

4. Нажмите Сохранить , когда закончите.

Создано новое меню навигации.

Назначение страниц меню навигации¶

Существует два основных способа назначить существующие страницы меню навигации: нажать кнопку Новый или кнопку Добавить ().

1. Щелкните Новый → Страница .

2. Выберите страницы для включения в это меню навигации; в этом примере должны быть включены три дочерние страницы из частных страниц.

3. Нажмите Добавить , когда закончите.

4. Убедитесь, что создано новое меню навигации.

Назначение новых страниц меню навигации¶

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

Чтобы отключить автоматическое добавление новых страниц в меню навигации,

1. Щелкните значок () рядом с нужным Меню навигации (например, Новое меню ), затем Изменить .

2. Щелкните значок ().

3. Снимите флажок.

4. Нажмите Сохранить , когда закончите.

После отключения вам не будет предлагаться добавить страницу в меню навигации.

Отметка меню навигации¶

Вы можете пометить меню навигации следующими способами:

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

1. Щелкните значок () рядом с нужным меню навигации (например, Новое меню )

2. Щелкните нужную навигацию (например, Основная навигация ).

Тип меню навигации отображается в поле Помечено как .Дополнительные сведения о каждом типе см. В разделе «Настройка меню навигации».

Удаление меню навигации¶

1. Щелкните значок () рядом с нужным меню навигации (например, Новое меню ), затем Удалить .

2. Нажмите ОК в подтверждении.

Меню навигации было удалено.

.