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

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

Сначала мы покажем вам пошаговое руководство по созданию меню для вашего веб-сайта WordPress. И как только вы научитесь этому, мы расскажем, как использовать виджет Elementor Navigation Menu для настройки и расширения вашего меню 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 Nav Menu Widget.

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

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

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

Основные возможности виджета Elementor Nav-Menu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкратце, функции мобильного меню Elementor следующие:

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

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

Завершение

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

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