Mobile Menu мобильное меню на сайт WordPress

Mobile Menu мобильное меню на сайт Wordpress WordPress

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

 

мобильное меню

 

Установить плагин WP Mobile Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

WP Mobile Menu

 

Далее, после активации плагина, вы попадёте на страницу “Mobile Menu Options”. Вам нужно нажать на кнопку – Allow & Continue.

 

Mobile Menu Options

 

Далее, у вас откроются основные настройки плагина.

 

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

 

Разберём настройки:

 

General Options.

– Enable Mobile Menu, можно включить или отключить мобильное меню.

– Enable Left Header Menu, включить или отключить левое меню.

– Enable Right Header Menu, включить или отключить правое меню.

– Width Trigger, укажите при каком максимальном размере будет отображаться мобильное меню.

– Hide Elements, скрыть какой-либо элемент с сайта при отображении мобильного меню. Можно указать CSS класс или ID элемента.

– Custom CSS, можно указать свои CSS стили для меню.

Save Changes, сохраните изменения.

 

Header Options.

– Site Logo, можно выбрать что будет отображаться на мобильном сайте. Логотип или Текст.

– Logo, нажмите по полю, чтобы загрузить логотип.

– Alternative Logo URL, можно указать альтернативный URL-адрес логотипа.

– Header Height, можно указать высоту меню.

– Logo Top Margin, размер отступа, от верха сайта до логотипа.

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

– Header Text Font Size, можно выбрать размер текста заголовка.

Сохраните изменения.

 

Left Menu Options.

– Left Menu, выберите меню сайта для левого меню.

– Menu Icon, можно выбрать для меню иконку или изображение.

– Menu Icon Image, нажмите по полю, чтобы загрузить иконку или изображение.

– Left Menu Panel Width, можете указать размер ширины панели левого меню.

– Icon Top Margin, верхний отступ от иконки.

– Icon Left Margin, отступ с левой стороны до иконки.

Сохраните изменения.

 

Right Menu Options. Здесь такие же настройки как и для левого меню. Здесь настройки для правого меню.

 

Color Options.

– Header Background Color, можно выбрать цвет для заголовка меню.

– Header Text Color, можно выбрать цвет для текста заголовка меню.

 

Выбор цвета для левого и правого меню (одинаковые настройки).

– Left Menu Icon Color, цвет иконки.

– Background Color, цвет фона меню.

– Text Color, цвет текста в меню.

– Background Hover Color, цвет фона при наведении.

– Hover Text Color, цвет текста при наведении.

 Submenu Background Color, цвет фона субменю или подменю (вложения).

– Submenu Text Color, цвет текста в подменю.

Сохраните изменения, нажав на кнопку – Save Changes.

 

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

 

мобильно меню

 

Меню в развёрнутом виде:

 

меню мобильный WordPress

 

Остались вопросы? Напиши комментарий! Удачи!

 

info-effect.ru
Добавить комментарий

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

  1. павел

    Здравствуйте! А как убрать с мобильной версии меню, которое идёт по умолчанию- главное?

    Ответить
    1. Admin автор

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

      Ответить
  2. Анна

    Илья, здравствуйте! Почему у меня меню в мобильной версии выводится в самом низу страницы, под футером?

    Ответить
    1. Admin автор

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

      Ответить
  3. Евгений

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

    Ответить
    1. Admin автор

      Здравствуйте! Можно стили поправить. Может помочь плагин SiteOrigin CSS. Либо вручную, скопировать CSS стили блока и изменить их, здесь показывал как. Можно плагин откатить к предыдущей версии. Есть плагин специальный WP Rollback

      Ответить
  4. Никита

    Добрый! Я в упор не понимаю, как добавить строки в это меню. У меня там только дем. страница и главная стр…Можно туда вставить другие созданные страницы?

    Ответить
    1. Admin автор

      В настройках плагина можно выбрать меню. Добавить страницы в меню: Внешний вид – Меню.

      Ответить
  5. Роман

    А есть идеи, как сделать своё меню? Я использую Menu Cart от Elementor, там удобная инфо-корзинка котоая показывает данные о товаре. Это не всунуть в меню WordPress а в настройках тем. Хочется своё моб меню сделать, возможно это можно с помощью CSS? Есть наработки или идеи куда копать?

    Ответить
    1. Admin автор

      Если вас интересуют стили, вам поможет плагин SiteOrigin CSS. Вот этот плагин ещё посмотрите, интересный, выпадающее горизонтальное меню.

      Ответить
  6. Dave

    Классная статья! Подскажите, как сделать, чтобы отображалось 2 или 3 товара в мобильном меню вместо одного? И не могу понять , как скрыть не нужные элементы через hide ? Спасибо!

    Ответить
    1. Admin автор

      Добавьте ещё товары в меню, в чём проблема? Какие именно элементы хотите скрыть? Вот здесь я показывал как скрыть любой элемент с сайта с помощью CSS.

      Ответить
  7. Dave

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

    Ответить
    1. Admin автор

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

      Ответить
  8. Сергей

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

    Ответить
  9. Сергей

    Я имел ввиду перечисления категорий с переходами на подкатегории, которые под слайдером

    Ответить
  10. Сергей

    Ссылка пропала, был сайт рбт ру

    Ответить
    1. Admin автор

      Здравствуйте. Ссылку видел, рекомендую плагин Bellows Accordion Menu

      Ответить
      1. Сергей

        Спасибо. Попробую

        Ответить