Cada sitio necesita un menú y el encabezado predeterminado del tema rara vez coincide con un diseño personalizado de Elementor. El gratis Widget de meniul Nav en Complementos maestros para Elementor representa cualquier menú de WordPress dentro del editor Elementor: diseños horizontales o verticales establecidos por dispositivo, submenús con estilo y un interruptor de hamburguesa que toma el control de los teléfonos.
Esta guía recorre el widget desde el primer arrastre hasta un menú con estilo con un menú desplegable que funciona en la página en vivo.
Qué hace el widget del menú de navegación #
El widget extrae un menú que creó en Apariencia, Menús y lo representa como un elemento Elementor. Usted elige el diseño y el comportamiento, diseña cada estado de los elementos, los menús desplegables y el interruptor móvil, todo desde el panel Elementor. Los elementos del menú en sí, sus etiquetas, orden y submenús permanecen administrados en WordPress, por lo que los editores de contenido nunca tocan Elementor para agregar una página al menú.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- El widget del menú de navegación habilitado en el panel de opciones de complementos maestros, en Widgets de navegación.
- Un menú creado en Apariencia, Menús en tu panel. La demostración utiliza un “menú principal” con Inicio, Precios, Equipo y Contacto, además de un submenú de Preguntas frecuentes en Contacto.
Cómo agregar el widget del menú de navegación #
En el editor Elementor, busque el Elementos panel para Menú de navegación y arrástrelo a la página, normalmente a una sección de encabezado. El widget representa su primer menú de WordPress inmediatamente.
Elija el menú y el diseño #
El General la sección controla todo el widget. Seleccione Menú enumera todos los menús desde la pantalla de Menús; elige el que se renderizará. Diseño ofertas Horizontal, Vertical y Hamburguesa (Pro), y puedes configurarlo por separado para cada dispositivo. Para menús verticales, Tipo agrega el comportamiento: Normal, Alternar, Acordeón o Lado. Aquí está el menú de demostración en diseño vertical:
Para un encabezado, Horizontal es la elección habitual. Alineación coloca los elementos a la izquierda, al centro, a la derecha o justificados. No existe una configuración de punto de interrupción única: cambie Elementor a la vista de tableta o teléfono y elija el diseño para ese dispositivo. Los teléfonos usan la palanca de hamburguesa de forma predeterminada. Vale la pena probar Vertical una vez incluso si no lo necesita; Ver ambos diseños hace que las opciones de alineación hagan clic.
Configure el menú desplegable #
El Menú desplegable la sección controla el comportamiento y el indicador del submenú:
- Indicator de jos: muestra u oculta la flecha junto a los elementos que llevan un submenú.
- Posición del indicador, espacio entre ellos, tamaño del icono: dónde se encuentra la flecha y qué tamaño tiene.
- Icon de jos: cambie el chevron predeterminado por cualquier ícono, con estados Normal y Flotar y un control Girar.
- Ancho desplegable y alineación: el tamaño del panel del submenú y la alineación del texto.
- Indicator de submenu: el icono de los menús de tercer nivel.
Configure el interruptor móvil #
Cuando un dispositivo utiliza el diseño de hamburguesa, el menú se colapsa detrás de un botón de alternancia. El Menú Hamburguesa secțiunea lo configura: Alineación, Tipo (Icono, texto o ambos), Vista (Predeterminado, apilado o enmarcado), Forma (Cuadrado o Círculo) e íconos separados para los estados Normal y Activo. Cambie el editor a la vista previa móvil y aparecerá el interruptor con el menú apilado debajo:
Estilo los elementos del menú #
En el Estilo tab, Elemento del menú principal cubre los enlaces de nivel superior. Tipografía maneja la fuente:
Debajo de él, Normal, Flotar, y Activo pestañas que lleva cada uno Color, Color de fondo del artículo, y Sombra de texto, plus spart Acolchado Horizontal y Vertical, Espacio entrey controles fronterizos. La demostración establece un color azul flotante, con una vista previa en vivo cuando el cursor cruza Precios:
Diseñe el interruptor, la lista desplegable y los elementos #
Tres secciones de Estilo más terminan el trabajo:
Hamburguesa diseña el interruptor: color, fondo, radio del borde, sombras, tamaño del ícono y relleno, con estados Normal, Flotar y Activo.
Menú desplegable diseña el panel del submenú: color de fondo, espacio desde la parte superior, borde y relleno. Submenú desplegable cubre menús más profundos.
Elemento de menú desplegable diseña los enlaces dentro del panel, con los mismos tres estados más a Divisor grupo para la línea entre elementos:
El resultado en la página #
En la página en vivo, el menú se representa en su estilo: estados de desplazamiento activados y el submenú de preguntas frecuentes que aparece en Contacto exactamente donde lo coloca la configuración desplegable.
Casos de uso comunes #
- Encabezados personalizados construido con Elementor, donde el menú temático no puede seguir el diseño.
- Páginas de aterrizaje con su propio menú delgado, separado del de todo el sitio.
- Navegación con barra lateral utilizando el diseño vertical en documentación o páginas de categorías.
- Menús móviles primero apoyándose en las opciones de icono, vista y forma del interruptor.
- Menús multinivel con menús desplegables y paneles de subniveles con estilo.
Consejos para un mejor menú de navegación #
- Primero cree el menú en WordPress. El widget representa menús de Apariencia, Menús; no los crea. Estructura allí, estilo aquí.
- Dale a Hover y Active diferentes colores. Hover responde al cursor; Active les dice a los visitantes en qué página se encuentran. El mismo color desperdicia la señal.
- Verifique cada dispositivo en un teléfono real. Un menú de cuatro elementos puede adaptarse bien a las tabletas, mientras que uno de siete elementos también puede necesitar un diseño vertical en las tabletas.
- Diseñe el fondo desplegable explícitamente. Un submenú transparente sobre el contenido de la página es la queja de menú más común que vemos; un fondo sólido del menú desplegable lo corrige con un solo clic.
Vídeotutorial #
Si desea ver el widget del menú de navegación en acción, este video recorre la configuración completa, desde la selección del menú hasta el menú desplegable diseñado en la página en vivo:
Preguntas frecuentes #
¿cuál es el widget del menú de navegación en los complementos maestros?
Es un widget Elementor que representa cualquier menú de WordPress con control de estilo total. Ofrece diseños horizontales y verticales establecidos por dispositivo, submenús con estilo con indicadores personalizados y un interruptor de hamburguesa configurable que los teléfonos usan de forma predeterminada.
¿Dónde agrego o elimino elementos del menú?
En WordPress, en Apariencia, Menús. El menú desplegable Seleccionar menú del widget enumera todos los menús que ha creado allí y representa el que elige. Los elementos, el orden y los submenús se administran en WordPress; el widget maneja el diseño y el estilo.
¿cómo hago un submenú desplegable?
Anida elementos en tu menú de WordPress arrastrándolos debajo de un padre en la pantalla Menús. El widget muestra automáticamente un indicador desplegable junto a los padres, y las secciones Menú desplegable y Lista desplegable controlan el comportamiento y el estilo del panel.
¿Cuándo aparece el menú de hamburguesas móviles?
En teléfonos de forma predeterminada. Master Addons Pro te permite elegir el diseño de Hamburger para cualquier dispositivo, con tipos Popup y Offcanvas. La sección Menú de hamburguesas diseña el interruptor, incluido el tipo de icono o texto, vistas apiladas o enmarcadas, forma cuadrada o circular e íconos normales y activos separados.
¿Puede el menú ser vertical en lugar de horizontal?
Sí. El control de diseño ofrece horizontal, vertical y hamburguesa (Pro). Vertical se adapta a barras laterales y páginas de documentación, y el control de tipo agrega comportamientos de alternancia, acordeón o lateral en la parte superior.
Envolviendo #
El widget del menú de navegación coloca el menú del sitio donde vive el resto de su diseño: elija un menú de WordPress, elija el diseño, diseñe los elementos, los menús desplegables y el móvil, cambie y publique. Se empareja naturalmente con el Contenido fuera del lienzo widget (Pro) para navegación móvil deslizable. Explore el conjunto completo de Widgets y extensiones de complementos maestros, y mira el Página del widget del menú de navegación para una comparación con los widgets del menú de Elementor Pro.
