Меню навигации Elementor — создайте потрясающее меню для вашего веб-сайта WordPress

Вы ищете способ создать потрясающее меню, которое поможет улучшить UI/UX вашего сайта? Если да, то вы находитесь в правильном месте. Здесь мы собрали подробное руководство, которое поможет вам.

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

Оглавление:

• Зачем вам нужно собственное навигационное меню?
• Создайте базовое меню WordPress с помощью Elementor
• 1. Создайте простое меню для вашего сайта WordPress.
• 2. Выбирайте и настраивайте элементы меню навигации.
• 3. Создайте подменю — пункты родительского и дочернего меню (необязательно).
• 4. Управляйте расположением меню и публикуйте его.
• Как создать меню навигации с помощью виджета Elementor pro nav
• Ключевые особенности виджета Elementor Nav Menu
• Создайте меню с помощью виджета nav-menu pro.
• Мобильное адаптивное меню
• Подведение итогов

Зачем вам нужно собственное навигационное меню?

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

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

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

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

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

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

Благодаря виджету Elementor pro со 100% адаптивным навигационным меню вы можете создать идеальную и невероятно гибкую строку меню без использования какого-либо кода.

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

Прежде чем начать работу с виджетом Elementor Navigation, давайте рассмотрим, как создать простое меню WordPress с помощью бесплатной версии Elementor.

Создайте базовое меню WordPress с помощью Elementor

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

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

1. Создайте простое меню для вашего сайта WordPress.

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

Теперь на левой боковой панели перейдите в «Внешний вид» > «Меню» . Здесь вы найдете макет из двух столбцов: «Добавить пункты меню» слева и «Структура меню» справа.

В разделе «Структура меню» вы найдете поле для «Имя меню». Это будет название меню, которое мы сейчас будем создавать. Назовем его Меню 1.

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

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

2. Выбирайте и настраивайте элементы меню навигации.

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

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

просто выберите пункты меню, которые вы хотите добавить, используя флажок, а затем нажмите кнопку «Добавить в меню». Это заполнит ваше меню всеми выбранными вами пунктами меню.

Примечание . Обратите внимание: в каждом разделе «Добавить пункты меню» есть возможность переключения между « Самыми последними» , «Просмотреть все » и «Поиск» . Не забудьте использовать эти параметры, если предметов много.

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

3. Создайте подменю — пункты родительского и дочернего меню (необязательно).

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

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

Круто, правда?

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

4. Управляйте расположением меню и публикуйте его.

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

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

Теперь доступные местоположения меню будут зависеть от установленной вами темы. В этом amp у нас есть тема, поддерживающая 3 меню.

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

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

Как создать меню навигации с помощью виджета Elementor pro nav

Если вы хотите добавить настраиваемое навигационное меню на свой сайт WordPress, вам понадобится версия Elementor Pro. Версия Elementor Pro поставляется с виджетом навигации Elementor, а также многими другими специальными функциями, такими как более 300 шаблонов, конструктор тем, всплывающий виджет, виджеты WooCommerce и многие другие интересные функции.

Каковы конкретные ключевые особенности самого виджета Nav Menu? Вот краткое введение.

Ключевые особенности виджета Elementor Nav Menu

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

Создайте меню с помощью виджета nav-menu pro.

Вам нужно будет создать базовое меню WordPress, как мы упоминали выше, а затем настроить меню WordPress по умолчанию с помощью виджета pro-nav-menu. После того как вы создали основной список, следующим шагом будет добавление его в нужное место, т. е. в раздел заголовка.

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

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

Раздел «Макет» : у вас есть три варианта: горизонтальный, вертикальный или скрытый раскрывающийся список.

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

Раздел «Выравнивание» : этот раздел поможет вам выровнять текстовые элементы меню; в центре, справа или слева.

Раздел «Анимация» : этот раздел позволит вам добавлять анимационные эффекты под, поверх или двухстрочных эффектов анимации. Вы также можете использовать рамку, фон и тонкую текстовую анимацию.

Подчеркнутые анимации следующие:

• Fade: Анимация исчезновения предлагает анимацию исчезновения под пунктами меню.
• Слайд: анимация слайда перемещает панель под пунктами меню.
• Рост : анимация роста растет от середины к краям и создает ощущение роста.
• Вставка : анимация вставки движется снизу вверх.
• Выпадение: анимация выпадения движется сверху вниз.

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

Раздел «Указатель» : выберите тип указателя из раскрывающегося меню.

Раздел индикатора подменю : виджет Elementor содержит множество вариантов оформления подменю. Где вы можете управлять не только цветом, стилем, но и фоном меню.

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

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

Расстояние между меню предлагает множество опций, в том числе:

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

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

Как дизайнер, вы можете сколько угодно экспериментировать с этими параметрами и создавать фоны по своему вкусу.

Мобильное адаптивное меню

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

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

Короче говоря, функции мобильного меню Elementor следующие:

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

Адаптивная навигация: обеспечивает адаптивное позиционирование меню.

Подведение итогов

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

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