Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Меню навигации — виджет Elementor Pro

Обновлено: 18.02.2018
18 комментариев
заставка виджета меню конструктора сайта элементор

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

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

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

виджет меню в конструкторе сайта

виджет меню в конструкторе сайта елементор

Настройки виджета меню

Содержание

- Макета

  • Меню - выбор меню для отображения.
  • Макет - тип меню. Доступно 3 вида меню это Горизонтальный, вертикальный и выпадающий т.е свернутый в кнопку.
  • Выровнять - выравнивание меню в любую сторону и растягивание по ширине. (Лево Центр Право Растянуть)
  • Указатель - тип указателя для активного (или под курсором) пункта меню. Доступны различные типы указателя (линия снизу пункта, сверху пункта, двойная линия, обрамление, фон, текст. ) Для каждого типа доступна анимация.
  • Индикатор подменю - вид индикатора для указателя подменю (классика, шеврон, угол, плюс)

Выпадающее меню на мобильных

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

Стили

- Главное меню

  • Цвет - цвет текста главного меню (возможность задания значения для разного состояния пункта меню)
  • Типографика - типографика текста главного меню (возможность задания значения для разного состояния пункта меню)
  • Горизонтальный отступ - отступ пунктов меню слева и справа
  • Вертикальный отступ - отступ пунктов меню сверху и снизу
  • Расстояние - расстояние между пунктами (Не путать с горизонтальным отступом. При задании расстояния между пунктами, появляется расстояние и между указателями активности)

- Выпадающее меню (ниже перечислены возможности стилизации)

  • Цвет текста, фона и типографика
  • Тип границы, толщина линии и скругление углов
  • Горизонтальный и вертикальный отступ между пунктами
  • Разделитель  (горизонтальная черта между пунктами). Возможно задать цвет, толщину и тип линии.

- Переключатель

  • Цвет - цвет переключателя (гамбургера).
  • Цвет фона - цвет фона переключателя.
  • Размер - размер гамбургера (переключателя).
  • Толщина границы - толщина границы у переключателя.
  • Скругление углов - параметры скругления углов переключателя.

 

=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

18 комментариев

  • Здравствуйте! Подскажите, а можно ли как-то перенести слова в пункте меню. У меня название каждого пункта меню состоит из 2-3 слов и никак не сократишь. Меню не вмещается в одну строку. Происходит перенос меню на вторую строку. А мне нужно перенос слов в каждом пункте организовать. Чтобы само меню получилось в одну строку. Буду очень благодарна за ответ.

    • A

      Здравствуйте. Попробуйте в названии пункта меню прописать тег < br > без пробелов

  • Добрый день, делаю меню на элементор и столкнулся с нюансом, как сделать разделительную линию между горизонтальными пунктами главного меню в шапке. Везде все посмотрел но так и не нашел.
    Пример: Главная | Контакты | Услуги | и т.д.

    • A

      День добрый. Можно через свои стили
      .elementor-nav-menu li { border-right: 2px solid #fff; }
      .elementor-nav-menu li:last-child { border-right: none; }

      • Спасибо большое, помогло). Только такой момент, когда в Custom CSS прописываю, оно дублирует стиль на все менюшки навигационные, можно как то задать только данную?

  • Добрый день. Подскажите как сделать всплывающее окно при клике на пункт меню?

    • A

      День добрый. У каждого пункта меню есть селектор class типа menu-item-118 (если посмотреть через инспектор кода в браузере). А у всплывающих окон есть возможность указать селектор для запуска окна. Вот в настройках и указываем.

  • Добрый день! Я, как и Сергей, — чайник)
    На сайте установили ElementorPro. До этого работали с другим плагином. Тема Shapely. Сейчас работает старое меню. Оно не устраивает. Надо редактировать. Пытаюсь сделать новое меню на ElementorPro. Фигня какая-то получается. Пункты меню получаются на белой подложке. Указываю фон меню. Белая подложка (фон за шрифтом) не уходит. Что делать — не понимаю. Не получается так, чтобы просто буквы на общем фоне. Как у всех цветных меню. Подскажите, где установить прозрачность. И что это вообще такое?..

    • A

      День добрый. Не подскажу вам по данной теме. Не работал я темой Shapely.
      Возможно нужно устранять проблему написанием стилей. Если проблемы именно с совместимостью, вы можете написать в офф поддержку Elementor Pro, они подскажут (пишите им с емайла который использовали при покупки Elementor Pro).

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

  • Добрый день. Сергей — «чайник»)) Решил создать сайт с «0», мучаюсь который день и не как не могу разобраться. Создав виджет навигационного меню в элементоре, не могу убрать меню вордпресса. Получается на главной странице два меню. Как решить эту проблему?

    • A

      День добрый. У вас не меню ворпресс, а меню тема Астра 🙂 Убрать его скорей всего нельзя.. точно не помню. Посмотрите в настройках темы Астра.
      Я делаю сайты на пустой теме Elementor или использую макет страницы Холст Elementor. Если делаю на теме Астра, то меню темы не трогаю.

  • Здравствуйте, подскажите пожалуйста через какой плагин можно создать всплывающее меню, при наведении на пункт меню? например как здесь https://ukrope.com/ в «catalog»

Добавить комментарий для Алексей (Отменить ответ)