Un menú desplegable estándar muestra una lista delgada de enlaces. Un mega menú abre un amplio panel que presenta una sección completa de su sitio a la vez: columnas de enlaces agrupados, imágenes, íconos e incluso un llamado a la acción. El Megamenú extensión en Complementos maestros para Elementor adjunta uno de estos paneles a cualquier elemento del menú de WordPress y usted diseña el panel en sí en el editor Elementor normal, de modo que cualquier cosa que pueda crear en una página pueda estar disponible dentro de su navegación. Para obtener una descripción general y demostraciones rápidas, consulte megaconstructor de menús Elementor gratuito página.
Aquí está el resultado final de la demostración: productos flotantes abre un panel de tres columnas con enlaces agrupados y una imagen destacada.
Qué hace la extensión Mega Menu #
Una vez habilitado, cada elemento de su menú de WordPress obtiene una ventana emergente de configuración del Mega Menú Apariencia → Menús. Actívelo para un elemento y el menú desplegable de ese elemento se convierte en una plantilla de Elementor. La extensión maneja:
- Paneles por artículo: habilite el mega panel sólo en los elementos que lo necesiten; el resto siguen siendo enlaces ordinarios.
- Diseño de panel visual: el contenido desplegable se crea con el editor Elementor, utilizando los widgets que desee.
- Ancho del menú Mega: Ancho predeterminado, completo o personalizado con un valor de píxel exacto.
- Efect de activare: abra el panel al pasar el cursor o al hacer clic.
- Transición: elija cómo se anima el panel, desvanecerse en la demostración.
- Menu mobil: decida qué obtienen los teléfonos, incluida la visualización del contenido del generador dentro del menú de alternancia.
- Insignia e icono: coloque una insignia resaltada en la etiqueta del elemento del menú (gratis) o un ícono con su propio color (Pro).
Antes de empezar #
- WordPress con Elementor instalado y activo; la versión gratuita es suficiente.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Un menú de WordPress ya creado en Apariencia → Menús, incluso uno tosco; puedes refinarlo más tarde.
NOTA: Puedes controlar el fondo de tu mega menú desde la opción de estilo de página. Asegúrate de poner el color de fondo, la imagen o lo que prefieras en la opción de estilo de página. De forma predeterminada se establecerá un fondo blanco. Pero puedes personalizar tu fondo desde esta configuración. Echa un vistazo -ñan
Paso 1: habilite la extensión Mega Menu #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. El mega menú se encuentra en el Mostrar widgets grupo. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”. Los complementos maestros se envían con todo desactivado de forma predeterminada, por lo que su sitio solo carga lo que realmente usa. Si la nueva opción no aparece en el administrador de inmediato, actualice la página (Cmd/Ctrl + Shift + R); Los complementos de almacenamiento en caché tienden a mantenerse en el menú de administración anterior durante un minuto.
Paso 2: activa Mega Menú para tu menú #
Abierto Apariencia → Menús. Un nou Mega menú de complementos maestros el cuadro aparece encima de la lista de elementos del menú. Cambiar Habilitar megamenú active y espere la confirmación verde “Mega Menú guardado”. Cada elemento en la estructura del menú ahora tiene un color morado Maestro Mega insignia, lo que significa que puede albergar un panel.
Paso 3: habilite el panel en un elemento del menú #
Pase el cursor sobre un elemento de nivel superior, generalmente algo amplio como Productos o Servicios, y abra la configuración del Mega Menú. En las ventanas emergentes Contenido pestaña, voltear Megamenú habilitado a SÍ. El Editar contenido de Megamenu aparece el botón; abre el editor Elementor para el panel de este elemento. Golpear Guardar en la ventana emergente cuando hayas terminado.
Habilite el panel solo en elementos que realmente necesitan el espacio. Un mega menú en un único enlace de contacto hace que los visitantes trabajen más duro para un destino.
Paso 4: Diseñe el panel en Elementor #
Hacer clic Editar contenido de Megamenu y el conocido editor Elementor se abre con el panel como lienzo. La demostración crea tres columnas: dos grupos de enlaces bajo Encabezados Grabar y Analizar, además de una columna de imagen para que el panel no sea una pared de texto. Publique la plantilla cuando el diseño esté listo; un borrador de plantilla no se representará en el menú en vivo, lo que hace tropezar a la gente más que cualquier otra cosa.
Agrupe los enlaces según cómo piensan los clientes en lugar de su organigrama, y limite cada columna de cinco a siete enlaces; más allá de eso, el escaneo colapsa. Dale a una columna un trabajo más allá de los enlaces, como un producto destacado o un llamado a la acción. Y mantenga las imágenes comprimidas, porque el panel se carga en cada página del sitio, no solo en una.
Paso 5: establezca el ancho, el disparador y la transición #
De vuelta en la ventana emergente de elementos, el Ajustes tab controla cómo se comporta el panel:
- Ancho del menú Mega: El valor predeterminado coincide con el menú, el ancho completo se extiende de borde a borde, el ancho personalizado toma un valor de píxel exacto, como 800px.
- Menu mobil: lo que reciben los teléfonos; El contenido del generador muestra el mismo panel diseñado dentro del menú de alternancia móvil.
- Efect de activare: Hover abre el panel al pasar el mouse; cambie para hacer clic si prefiere aperturas deliberadas.
- Transición: la animación de entrada, Fade en la demostración.
- Mostrar etiqueta de menú / Mostrar descripción (Pro): etiqueta opcional y texto de descripción del artículo.
El Insignia la pestaña en la misma ventana emergente adjunta una insignia destacada, útil para marcar una entrada Nueva o Venta. El Icono tab, para un icono y un color de icono, necesita Master Addons Pro.
Paso 6: coloca el menú en tu encabezado #
Si su tema ya representa el menú de WordPress, el mega menú funciona de inmediato. Para un control total del encabezado, cree uno con el gratis Creador de temas de complementos maestros: cree una plantilla de encabezado, ingrese el archivo Widget de meniul Nav, y selecciona el menú que lleva tus mega paneles. La sección General del widget cubre el diseño, la alineación y el punto de interrupción donde colapsa el menú.
Consulta la vista móvil #
Cambie el editor Elementor a una vista previa móvil antes de publicarlo. El menú colapsa detrás de una palanca de hamburguesa y los enlaces se acumulan verticalmente. Compruebe aquí la altura real del panel; un panel de cuatro columnas que se ve nítido a 1440px puede convertirse en un desplazamiento interminable en un teléfono. Si dura mucho tiempo, oculte las imágenes decorativas con los controles de visibilidad responsivos de Elementor y mantenga los enlaces. Luego pruebe en un teléfono real, ya que la vista previa se aproxima al comportamiento táctil pero no lo reproduce.
El resultado en la página #
Con el ancho completo seleccionado, el panel publicado abarca toda la ventana gráfica de borde a borde; la versión en caja en la parte superior de esta página muestra el ancho predeterminado para comparar. De cualquier manera, pasar el elemento por alto abre la plantilla diseñada con la transición que eligió.
Donde un mega menú funciona bien #
- Tiendas. Categorías de productos, bestsellers y una imagen promocional en un panel debajo de Tienda.
- Agencias y empresas de servicios. Servicios agrupados por resultado con un estudio de caso destacado.
- Editores y blogs. Centros de temas con la última publicación incluida en el panel.
- Sitios SaaS. Funciones, soluciones y recursos organizados uno al lado del otro en lugar de menús desplegables anidados.
- Universidades y organizaciones. Departamentos y enlaces rápidos que de otro modo enterrarían tres niveles de profundidad.
Solución de problemas #
- El megamenú no aparece. Confirme que la extensión esté activada, que el elemento del menú tenga Megamenu habilitado configurado en SÍ y que la plantilla del panel se publique en lugar de guardarse como un borrador. Luego borre su caché.
- El panel aparece pero no tiene estilo. Por lo general, una hoja de estilo almacenada en caché. Purgue el caché de su página y cualquier CDN, luego vuelva a cargarlo.
- El panel está cortado u oculto. Un contenedor principal tiene un desbordamiento oculto o un índice z bajo. Levante el índice z del encabezado y verifique la configuración de desbordamiento del contenedor del encabezado.
- Funciona en escritorio, roto en móvil. Casi siempre el área de alternancia. Verifique la configuración móvil del widget del menú de navegación y confirme que nada se superponga al objetivo de toque.
Preguntas frecuentes #
¿cómo agrego un mega menú en Elementor sin Pro?
Habilite la extensión Mega Menu en la pestaña Extensiones de complementos maestros, active Enable Mega Menu en Apariencia → Menús, configure Megamenu habilitado en SÍ en el elemento que desee y diseñe el panel con Editar contenido de Megamenu. Elementor Pro no es necesario.
¿la extensión Mega Menu es gratuita?
Sí. El mega menú se envía con la versión gratuita de Master Addons para Elementor, en el grupo Display Widgets de la pestaña Extensiones. El página de precios cubre lo que añaden los planes Pro.
¿Puede el panel tener todo el ancho?
Sí. La pestaña Configuración de la ventana emergente del elemento ofrece Ancho predeterminado, ancho completo y ancho personalizado. El ancho personalizado toma un valor de píxel exacto, como 800px, cuando desea que el panel sea más estrecho que la página.
¿qué puedo poner dentro del panel desplegable?
Cualquier cosa que Elementor pueda crear: widgets de encabezado, listas de iconos, imágenes, botones, formularios. El panel es una plantilla normal de Elementor, por lo que todos los widgets disponibles en una página están disponibles en el menú.
¿cómo se comporta el mega menú en el móvil?
El menú colapsa detrás de una palanca de hamburguesa y los enlaces se apilan verticalmente. La configuración del menú móvil controla si los teléfonos obtienen el contenido del generador diseñado dentro de la palanca, y los controles responsivos de Elementor le permiten ocultar elementos de paneles pesados en pantallas pequeñas.
Envolviendo #
El Extensión Mega Menú convierte un menú simple de WordPress en navegación diseñada con tres movimientos: activar la extensión, habilitar el panel en un elemento y crear el menú desplegable en Elementor. El ancho, el disparador, la transición, las insignias y los íconos (con Pro) están configurados desde la ventana emergente del elemento y lo emparejan con el menú gratuito Creador de temas y Widget de meniul Nav le ofrece un encabezado personalizado completo sin Elementor Pro. El conjunto completo de Widgets y extensiones de complementos maestros está a una página de distancia.
