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

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

Из этой статьи вы узнаете:

что такое липкое меню ;
как создать липкое меню в WordPress ;
лучшие практики липкого меню ;
примеры липкой навигации ; и
какие темы WordPress имеют встроенные липкие меню.

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

Что такое липкое меню?

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

Вот пример липкого меню на главной странице блога HubSpot.

Зачем внедрять липкое меню?

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

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

Как создать липкое меню заголовка в WordPress

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

Метод CSS-кода для создания меню липкого заголовка

Вы захотите вручную добавить CSS-код в свою тему WordPress. Следуйте инструкциям ниже.

Войдите в свою панель управления WordPress.
Перейдите в Внешний вид> Настроить .
Щелкните Дополнительный CSS .

Добавьте этот код CSS:

#website-navigation {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}

Замените # website-navigation классом CSS или идентификатором вашего меню навигации. (Узнайте, как найти свой класс CSS или идентификатор здесь. )
Нажмите синюю кнопку «Опубликовать».
Обновите свой сайт, чтобы увидеть липкое меню.

Метод плагина для создания меню липких заголовков

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

1 myStickymenu

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

Установите и активируйте плагин.
Зайдите в Настройки> myStickymenu .
В разделе «Прикрепленный класс» выберите «Другой класс или идентификатор».
В поле рядом с ним добавьте свой класс или идентификатор. (Узнайте, как найти свой класс CSS или идентификатор здесь. )

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

2 Прикрепленное меню (или что угодно!) В прокрутке.

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

Установите и активируйте плагин.
Выберите «Настройки»> «Прикрепленное меню» (или что-нибудь еще) .
В разделе «Основные настройки» добавьте панель навигации, которую вы хотите закрепить за меню.

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

3 Меню героя

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