Widget del menú de navegación de Elementor: No se necesita Elementor Pro
Nav Menu es un widget de complementos maestros 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 emparéjelo con la extensión 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.
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.
- Trabaja con el Megamenú ampliación para paneles multicolumnas.
Diseños de menú verticales: normal, alternancia, acordeón y lateral
Elija Vertical en Diseño y aparecerá un segundo control, Tipo. Cada tipo abre submenús de una manera diferente, y tanto el diseño como el tipo se pueden configurar por dispositivo, por lo que un menú puede permanecer normal en el escritorio y cambiar a Accordion en los teléfonos.
- normalidad abre un submenú al lado de la lista cuando el lector pasa el cursor sobre su elemento principal.
- Alternar amplía un submenú debajo de su padre al hacer clic y varios pueden permanecer abiertos a la vez.
- Acordeón también se expande al hacer clic, pero al abrir un submenú se cierra el que estaba abierto.
- Lado fija el menú al borde de la página. Sólo los elementos principales se encuentran en la barra y sus submenús se abren en un panel al lado.
Normal: el submenú se abre hacia un lado al pasar el cursor.
Alternar: el submenú se expande bajo su elemento.
Acordeón: un submenú abierto a la vez.
Lado: los elementos principales en una barra en el borde de la página, con el submenú en un panel al lado.
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.
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.
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.
| Elemento Pro | Menú de navegación de complementos maestros | |
|---|---|---|
| Precio | Licencia Elementor Pro | Incluido en complementos maestros; Tipos de hamburguesas emergentes y offcanvas con Pro |
| Diseños | Horizontal, vertical, desplegable | Horizontal, vertical (4 tipos), hamburguesa |
| Menú móvil | Alternar debajo de un punto de interrupción que elija | Hamburguesa en teléfonos de forma predeterminada; Ventana emergente y Offcanvas con Pro |
| Diseño por dispositivo | Configuración de un punto de interrupción | Establecido para cada dispositivo |
| Animaciones de punteros flotantes | Sí | prohibido |
| Megamenú | Widget de menú con contenido desplegable | Extensión 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 sin Elementor Pro.
Menú de navegación de un vistazo
Qué hace el widget, leído en Master Addons 3.2.3.
| Artículo | Widget de meniul Nav |
|---|---|
| Fuente del menú | Cualquier menú de Apariencia, Menús, elegido en Seleccionar menú |
| Diseños | Horizontal y vertical en todos los dispositivos; Hamburguesa en teléfonos por defecto |
| Tipos verticales | Normal, Alternar, Acordeón y Lateral |
| Hamburguesa en escritorio y tableta | Complementos maestros Pro |
| Tipos de hamburguesas | Predeterminado en teléfonos; Ventana emergente y fuera de lienzo con Pro |
| Submenús | Secciones de estilo separadas para el menú desplegable, sus elementos, submenús más profundos y sus elementos |
| Estados | Normal, flotante y activo para elementos principales y desplegables |
| Iconos indicadores | Iconos desplegables y de submenú que elijas, con tamaño, color, posición y rotación |
| Animaciones de punteros flotantes | No (el widget de menú de Elementor Pro los tiene) |
| Pegajoso | No hay configuración en el widget; haga que el contenedor del encabezado sea pegajoso |
| Megapaneles de menú | Extensión Mega Menú |
| Necesidades | Elementor y complementos maestros, ningún Elementor Pro |
Ejemplos de menú de navegación
Cinco demostraciones en vivo creadas con el widget. Abra uno y luego importe el diseño desde el Visor de plantillas a continuación.
- Navbar de carbón y mega menú: una barra de encabezado oscura con un mega panel de menú de varias columnas.
- Menú de navegación con barra superior: una tira de contactos encima del menú principal.
- Variaciones del menú desplegable: varios estilos desplegables en el mismo menú.
- Menú de navegación vertical: el menú como lista vertical.
- Menú lateral vertical: el tipo de lado fijado al borde de la página.
Cómo agregar un menú de navegación en Elementor
El widget utiliza menús que crea en WordPress, así que comience allí.
- Crea tu menú en Apariencia > Menús.
- En Elementor, arrastre el widget del menú Nav de complementos maestros a su encabezado, pie de página o página.
- Elija el menú en Seleccionar menú y elija un diseño para escritorio.
- 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.
- 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.
Combina bien con: Megamenú pentru panele multicolumne, Contenido fuera del lienzo (Pro) para un panel deslizable, el Creador de temas para un encabezado para todo el sitio, Condiciones de visualización (Pro) para mostrar un menú diferente a los visitantes que iniciaron sesión, y Pestañas para navegación en la página.
Preguntas frecuentes sobre el menú Nav
¿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 se ejecuta sin Elementor Pro 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 Mega Menú.
¿puedo usar este menú con la extensión 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.
¿es difícil configurar los diferentes estilos para normal, flotante y activo?
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.
¿Cómo edito el menú que se muestra en el widget?
El widget muestra un menú de WordPress, por lo que lo edita en Apariencia, Menús. Agregue, cambie el nombre o reordene elementos allí y guárdelos. El control Seleccionar menú en el widget tiene un enlace directo a esa pantalla y los cambios aparecen en Elementor después de una actualización.
¿cómo agrego un submenú?
En Apariencia, Menús, arrastre el elemento un poco hacia la derecha debajo del elemento al que pertenece, hasta que WordPress lo marque como un subelemento, luego guárdelo. El widget lo muestra como un menú desplegable. Estílelo en Estilo, Menú desplegable y Elemento del menú desplegable.
¿Recibo un menú de hamburguesas en el móvil sin Pro?
Sí. En los teléfonos, el widget cambia a la hamburguesa de forma predeterminada y el menú se abre en su lugar debajo de la palanca. Usar la hamburguesa en una computadora de escritorio o tableta, o abrirla como un panel emergente o fuera de lienzo, necesita Master Addons Pro.
¿cuál es el mejor caso de uso para el tipo de menú "Offcanvas" o "Popup"?
Ambos son tipos de hamburguesas Pro. 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. Sin Pro, la hamburguesa en los teléfonos abre el menú en su lugar debajo del interruptor.
¿funcionará este menú con el encabezado de mi tema de WordPress existente?
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.
¿Puedo tener un estilo de menú diferente en dispositivos móviles que en computadoras de escritorio?
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.
¿puedo hacer que el menú sea pegajoso?
El widget no tiene configuración fija, así que haga que el contenedor del encabezado sea fijo. Con Elementor Pro, use Avanzado, Efectos de movimiento, Pegajoso: Arriba en ese contenedor. Sin Pro, agregue selector { position: sticky; top: 0; z-index: 99; } al contenedor en la sección Master Addons Custom CSS. Nuestro guía de encabezado pegajosa cubre la configuración completa.
¿Por qué no se muestra mi menú?
Verifique cuatro cosas. El widget necesita un menú seleccionado en Seleccionar menú y el sitio necesita al menos un menú en Apariencia, Menús. Una plantilla de encabezado solo muestra dónde se aplica su condición de visualización. En los teléfonos, el menú se pliega en la hamburguesa, así que verifique que el color de alternancia se destaque del fondo del encabezado. Por último, borre su caché y cualquier configuración de retardo de JavaScript después de los cambios.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![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]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
