Widget de menú gratuito de Elementor Nav: no se necesita Elementor Pro

Nav Menu es un widget de complementos maestros gratuito que coloca cualquier menú de WordPress en un encabezado, pie de página o página de Elementor y le permite diseñarlo desde el panel. Elija un diseño horizontal o vertical para cada dispositivo, diseñe los elementos principales, menús desplegables y submenús en sus estados normal, flotante y activo, y combínelo con la extensión gratuita Mega Menu para paneles de varias columnas. En los teléfonos se colapsa en una palanca de hamburguesa de forma predeterminada. Master Addons Pro agrega el diseño de hamburguesa para cualquier ancho, con menús emergentes y fuera de lienzo.

Opciones de diseño del menú de navegación en Elementor

Diseños horizontales, verticales y de hamburguesas

Establezca el diseño por separado para escritorio, tableta y teléfono. Horizontal se adapta a una barra superior. Vertical viene en cuatro tipos: Normal con menús desplegables laterales, Alternar, Acordeón y Lateral, que fija el menú al borde de la página. Los teléfonos usan el interruptor de hamburguesa de forma predeterminada. Con Pro puedes elegir la hamburguesa para cualquier ancho y abrir el menú como un menú desplegable predeterminado, una ventana emergente o un panel fuera de lienzo.

  • Diseños establecidos por dispositivo, incluidos los puntos de interrupción adicionales de Elementor.
  • Menús verticales como Normal, Alternar, Acordeón o Lateral.
  • Menús de hamburguesas emergentes y Offcanvas con Master Addons Pro.
  • Funciona con lo gratuito Megamenú ampliación para paneles multicolumnas.

Estilo cada nivel de menú y estado

La pestaña Estilo tiene secciones separadas para el elemento del menú principal, el menú desplegable, el elemento del menú desplegable, el submenú desplegable y el elemento del submenú desplegable. Cada uno obtiene colores y fondos para los estados Normal, Flotar y Activo, además de relleno, bordes y divisores, por lo que el enlace a la página actual puede verse diferente del resto.

  • Estados normal, flotante y activo para elementos principales y elementos desplegables.
  • Estilo separado para el panel desplegable, sus elementos y submenús más profundos.
  • Divisores entre artículos, con tipo, tamaño y color.
Configuración del estilo del menú de navegación para elementos del menú y menús desplegables
Menú de navegación configuración de icono indicador y palanca de hamburguesa

Iconos de indicadores y de palanca de hamburguesa

Diseñe el interruptor de la hamburguesa como un ícono, texto o ambos, con una vista predeterminada, apilada o enmarcada y una forma cuadrada o circular. Puede mostrar un ícono mientras el menú está cerrado y otro mientras está abierto. Los íconos indicadores marcan los elementos que tienen menús desplegables y submenús: elija sus propios íconos, muéstrelos u ocultelos y establezca su tamaño, color, posición y rotación.

  • Alternar hamburguesa como icono, texto o ambos.
  • Diferentes iconos para el menú cerrado y abierto.
  • Iconos de indicadores de submenú y desplegables personalizados con rotación.

Espaciado desplegable y diseños por dispositivo

Establezca el ancho desplegable y su espacio desde la parte superior del menú, los espacios entre los elementos y el relleno dentro de cada enlace. La duración de la transición controla la rapidez con la que cambian los colores flotantes y los menús desplegables. Debido a que el diseño se establece por dispositivo, usted decide dónde cambia el menú de una barra horizontal a una lista vertical, o a la hamburguesa con Pro.

  • Ancho desplegable y espacio desde arriba.
  • Espacios entre elementos y acolchado de enlaces para tocar fácilmente.
  • Duración de la transición para cambios de desplazamiento y descenso.
Espaciado desplegable del menú de navegación y configuración de diseño responsivo

Widgets del menú Elementor Pro frente al menú Nav de complementos maestros

El complemento gratuito de Elementor no tiene widget para colocar y diseñar un menú de WordPress. Sus widgets Menú y Menú WordPress vienen con Elementor Pro. Así es como se comparan.

Elementor ProMenú de navegación de complementos maestros
PrecioLicencia Elementor ProGratis, con tipos de hamburguesas Pro
DiseñosHorizontal, vertical, desplegableHorizontal, vertical (4 tipos), hamburguesa
Menú móvilAlternar debajo de un punto de interrupción que elijaHamburguesa en teléfonos de forma predeterminada; Ventana emergente y Offcanvas con Pro
Diseño por dispositivoConfiguración de un punto de interrupciónEstablecido para cada dispositivo
Animaciones de punteros flotantesSíNo
MegamenúWidget de menú con contenido desplegableExtensión gratuita del Mega Menú

Si ya paga por Elementor Pro, sus widgets de menú funcionan. Sin él, Nav Menu y el Megamenú la extensión le brinda un menú de encabezado con estilo de forma gratuita.

Visor de plantillas
Facebook
Gorjeo
WhatsApp
Copiar enlace
Compra ahora
Mega Menú y Navbar de Carbón
Mega Menú y Navbar de Carbón
Variaciones del menú desplegable
Variaciones del menú desplegable
Menú de navegación vertical
Menú de navegación vertical
Menú de navegación - con barra superior
Menú de navegación - con barra superior
Variaciones del menú de hamburguesas
Variaciones del menú de hamburguesas

Cómo agregar un menú de navegación en Elementor

El widget utiliza menús que crea en WordPress, así que comience allí.

  1. Crea tu menú en Apariencia > Menús.
  2. En Elementor, arrastre el widget del menú Nav de complementos maestros a su encabezado, pie de página o página.
  3. Elija el menú en Seleccionar menú y elija un diseño para escritorio.
  4. Cambie a la vista de tableta y teléfono para verificar el diseño de cada dispositivo. Los teléfonos tienen la función de hamburguesa de forma predeterminada.
  5. Diseñe los elementos del menú, los menús desplegables y alterne la pestaña Estilo, luego publique.

Para obtener un tutorial completo del encabezado, lea cómo crear un menú de navegación en Elementor sin Pro. Para un encabezado para todo el sitio, utilice el archivo gratuito Creador de temas.

Preguntas frecuentes sobre el menú Nav

Conozca las consultas más solicitadas que tienen los usuarios sobre el menú de navegación y encuentre respuestas en un solo lugar.
¿en qué se diferencia esto de otros widgets del menú de navegación?

Los propios widgets de menú de Elementor necesitan Elementor Pro. El menú de navegación de complementos maestros es gratuito y agrega diseños por dispositivo, cuatro tipos de menú verticales, estilo separado para cada nivel y estado del menú, íconos de indicadores personalizados y un interruptor de hamburguesa con estilo. También funciona con la extensión gratuita Mega Menu.

Sí. Active la extensión Mega Menu, cree el contenido del panel para un elemento del menú desde la pantalla Menús de WordPress y luego seleccione ese menú en el widget Nav Menu. El widget muestra los mega paneles del menú en el extremo frontal.

No. Abra la pestaña Estilo, elija una parte del menú, como Elemento del menú principal, y cambie entre las pestañas Normal, Flotar y Activo para establecer los colores para cada estado.

¿cuál es el mejor caso de uso para el tipo de menú "Offcanvas" o "Popup"?

Ambos son tipos de hamburguesas profesionales. Offcanvas desliza el menú desde la izquierda o la derecha, lo que se adapta a teléfonos y diseños mínimos. La ventana emergente abre el menú sobre la página, lo que funciona bien para la navegación por sitios completos en sitios de cartera o agencias. En la versión gratuita, la hamburguesa abre el menú en su lugar debajo del interruptor.

Sí, puedes colocar el widget en cualquier lugar donde se ejecute Elementor. Para reemplazar completamente el encabezado de su tema, cree una plantilla de encabezado con el archivo gratuito Creador de temas de complementos maestros y agrégale el widget del menú de navegación.

Sí. Se pueden configurar el diseño, la alineación y muchas configuraciones de estilo por dispositivo. Por ejemplo, mantenga una barra horizontal en el escritorio, use un acordeón vertical en las tabletas y la palanca de hamburguesa en los teléfonos.

Widgets y extensiones de Elementor de tendencia

Cree sitios web sofisticados en menos tiempo.

Master Addons Extensión Glassmorphism para Elementor: tarjetas de vidrio esmerilado con el control Blur Value configurado en 20px

Vidriomorfismo

Inicio Extensión de Glassmorphism Elementor gratuita: Efecto del vidrio esmerilado en un solo cambio El Glassmorphism es el esmerilado...
Ver detalles
Extensión Master Addons Container Extras para Elementor: contenedor con un límite de ancho máximo de 1400px, con controles de ancho máximo, alto máximo, ancho mínimo y alto mínimo

Extras de contenedores

Inicio Elementor Container Controles de ancho y alto máximo Container Extras es un maestro gratuito...
Ver detalles
Extensión de patrones de complementos maestros para Elementor: héroe con el estilo Purple Gradient Grid Left, tres estilos de patrones más y el panel Habilitar patrón

Patrones

Inicio 70+ Patrones de fondo de Elementor gratuitos Patrones es una extensión de complementos maestros gratuita que agrega...
Ver detalles
Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]

Duplicador de publicaciones/páginas

Inicio Duplicar páginas y publicaciones de Elementor en un clic Publicación/Duplicador de páginas es un maestro gratuito...
Ver detalles
Extensión de la barra de progreso de lectura de complementos maestros para Elementor: barra azul llena al 42% en la parte superior de una página de política de privacidad, con configuraciones de habilitar, colocar, altura y llenar color

Barra de progreso de lectura

Inicio Agregue una barra de progreso de lectura en WordPress (Elementor) La barra de progreso de lectura es gratuita...
Ver detalles