Cada sitio necesita un menú y el encabezado predeterminado del tema rara vez coincide con un diseño personalizado de Elementor. El Menú de navegación widget adentro Complementos maestros para Elementor representa cualquier menú de WordPress dentro del editor Elementor: diseños horizontales, verticales o desplegables, submenús con estilo y un interruptor de hamburguesa que se hace cargo del dispositivo móvil.
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 Bajar, y Tipo agrega el comportamiento: Normal, Alternar, Acordeón, sau Lado. Aquí está el menú de demostración en diseño vertical:
Para un encabezado, Horizontal es la elección habitual. Alineación de menús coloca los elementos a la izquierda, centro, derecha o justificados, y Punto de interrupción decide cuándo el menú colapsa en el interruptor móvil, en el ancho de la tableta o del móvil. 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.
Superponer contenido establece el menú desplegable en posición absoluta para que flote sobre la página en lugar de empujarla hacia abajo, y Posición desplegable con Ancho mínimo desplegable afina dónde aterrizan los submenús.
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 #
Debajo de los elegidos Punto de interrupción, el menú se colapsa detrás de un botón de hamburguesa. El Interruptor de palanca 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:
Interruptor de palanca estiliza la hamburguesa: color, fondo, radio del borde, sombras, tamaño del ícono y relleno, con estados Normal, Flotar y Activo.
Lista desplegable diseña el panel del submenú: color de fondo, espacio desde la parte superior, borde, relleno, sombra de cuadro y un grupo de subniveles para menús más profundos.
Artículo 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í.
- Active Superponer contenido para encabezados. Sin él, un menú desplegable de apertura puede empujar el contenido de la página hacia abajo en lugar de flotar sobre él.
- 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.
- Consulta el punto de interrupción en un teléfono real. Un menú de cuatro elementos puede adaptarse bien a las tabletas; uno de siete elementos quiere alternar antes.
- 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 de la Lista 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, verticales y desplegables, submenús con estilo con indicadores personalizados y un interruptor de hamburguesa configurable que se hace cargo debajo del punto de interrupción elegido.
¿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?
Debajo del punto de interrupción, establezca en la sección General, Tableta o Ancho móvil. La sección Alternar cambiar estiliza la hamburguesa, incluido el tipo de ícono 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 desplegable. 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 para navegación móvil deslizable. Explore el conjunto completo de Widgets y extensiones de complementos maestros, y mira el página de precios por lo que añade Pro.
