5. После нажатия на Создать новое меню , существующее меню будет удалено со страницы, а на его место будет добавлен новый пустой Блок навигации .
6. Новое меню будет автоматически называться Navigation или Header navigation . Вы можете изменить это имя позже в разделе Advanced настроек блока навигации .
7. Щелкните + средство вставки блоков , чтобы начать добавлять новые пункты меню в блок навигации .

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

Чтобы создать меню с помощью WP Admin, перейдите к Внешний вид → Меню на панели инструментов.

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

После того, как вы создадите свое первое меню, вы заметите, что появились две новые опции:

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

Видеоруководство

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

1. Перейти к Внешний вид → Настройка .
2. Нажмите на Меню (см. справа)

3. Вы увидите, что по умолчанию для вас было создано меню, обычно называемое чем-то вроде Primary или Main Menu . Перейдите к следующему руководству, чтобы начать добавлять ссылки в это меню.

   Если вы еще не видите здесь меню, нажмите кнопку Создать новое меню .

4. Дайте меню имя, например, «Основное меню». Имя не показывается публично.
5. В разделе Расположение меню установите хотя бы один флажок. Ваше меню появится в выбранном вами месте. (Места, которые вы видите здесь, могут различаться в зависимости от вашей темы.)
6. Нажмите Далее , чтобы начать добавлять элементы в новое меню.

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

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

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

Далее: Добавить ссылки в меню.

12 Важные советы по дизайну меню навигации

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

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

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

Получите содержимое, доставленное прямо в ваш почтовый ящик

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, на веб-сайте Benefit рядом со ссылками используются стрелки направления, которые превращаются в раскрывающиеся меню:

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

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

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

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

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

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

Большинство веб-сайтов, как правило, выбирают гамбургер-меню для мобильных устройств:

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

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

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

Чтобы привлечь больше органического трафика на свой веб-сайт, вы можете оптимизировать заголовки навигации с помощью популярных ключевых слов. Google Analytics и Google Keyword Planner — отличные инструменты, позволяющие определить, какие слова и фразы ищут пользователи:

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

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

Эти меню выглядят стильно и современно. Кроме того, это отличный способ сэкономить место:

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

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

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

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

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

Теперь, когда вы знаете, как создать идеальное меню для своего сайта, давайте рассмотрим несколько примеров.

Mostly Serious имеет четкий значок гамбургера, чтобы освободить место для забавной анимации:

При нажатии на значок открывается вертикальное боковое меню, в котором отображаются только основные заголовки:

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

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

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

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

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

This is Amber имеет причудливое всплывающее меню вне холста в виде вкладок, которые раскрываются при нажатии. Затем выбранная страница скользит, заменяя существующую страницу, которую вы просматриваете:

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

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

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

French but Nice — веб-сайт-портфолио, использующий привлекательное вертикальное боковое меню, в котором проекты упорядочены в хронологическом порядке:

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