Web5X - Готовые сайты

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

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

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

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

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

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

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

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

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

Содержание

- Макета

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

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

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

Стили

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

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

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

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

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

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

 

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

Меню навигации — виджет Elementor Pro: 7 комментариев

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности