Un mega menú es un punto de navegación que, al tocarlo, no despliega una lista estrecha, sino una superficie amplia con varias columnas, imágenes o avisos. En tiendas y sitios web grandes tiene sentido. En páginas de empresas pequeñas suele ser una señal de que la estructura no está bien planteada.
Por eso trato aquí las dos cosas: la implementación y, antes, la pregunta honesta de si usted necesita uno.
¿Realmente necesita uno?
Un mega menú merece la pena a partir de unas veinticinco o treinta páginas de destino que se puedan ordenar en grupos con sentido: una tienda con muchas categorías, un centro de formación con una oferta amplia de cursos, un fabricante con varias líneas de producto.
En un sitio web de ocho páginas es un fin en sí mismo. Si usa un mega menú para repartir ocho puntos por una superficie grande, no parecerá más profesional, sino indeciso.
Y si tiene la sensación de que sin un mega menú su navegación no encaja, entonces no tiene un problema de menú, sino demasiadas páginas. En ese caso el mejor camino es agrupar contenidos, no agrandar la navegación.
Implementación con Elementor
Desde hace un tiempo, Elementor Pro incluye su propio widget de mega menú. Es la vía más sencilla, porque la estructura del menú y el diseño están en un mismo sitio.
Elementor Pro: el widget de mega menú y el Theme Builder en el que lo utiliza pertenecen a la versión Pro. Ver Elementor Pro
El procedimiento:
- El menú en sí lo crea como siempre en Apariencia → Menús. La estructura —puntos principales y subpuntos— nace ahí, no en Elementor.
- En el Theme Builder abre su cabecera; cómo se crea lo explico en Theme Builder para cabecera y pie de página.
- Inserta el widget de mega menú y selecciona el menú.
- Para cada punto principal que deba recibir una superficie grande, diseña el contenido desplegable directamente en el editor: con contenedores, texto, imágenes y botones.
La zona desplegable es un área normal de Elementor. Es decir: todo lo que puede construir en otro sitio funciona también aquí. Y justo ahí está la tentación de excederse.
Una estructura que ha demostrado funcionar
Tres o cuatro columnas, cada una con un título breve y debajo entre cuatro y seis enlaces. En la última columna, algo visual: una imagen, un aviso sobre una oferta actual, un botón de contacto.
Lo que yo evito: más de cuatro columnas, más de unos ocho enlaces por columna e imágenes para cada enlace individual. Un menú que primero hay que leer ha fallado en su cometido: debe dar orientación, no transportar contenido.
La parte que más se tuerce: el móvil
Un mega menú es un fenómeno de escritorio. En la pantalla de un móvil no hay una superficie amplia que desplegar.
Asegúrese de que en móvil aparezca una lista sencilla y apilada: puntos principales pulsables y subpuntos desplegables debajo. Las imágenes y los elementos adicionales de la vista de escritorio deben ocultarse en móvil.
Compruebe tres cosas en un dispositivo real: ¿se puede alcanzar cada punto con el pulgar? ¿Se puede salir de nuevo sin recargar la página? ¿Y se puede desplazar la lista cuando es más larga que la pantalla? El último punto es el que más se pasa por alto: en un menú largo, las entradas inferiores sencillamente no son accesibles. Mi forma de proceder al respecto: Optimizar Elementor para móvil.
Usabilidad
Dos puntos que a menudo se olvidan.
Manejo por teclado. El menú tiene que poder recorrerse con la tecla de tabulación, y la zona desplegada no debe cerrarse de inmediato. Compruébelo una vez: le llevará un minuto.
Despliegue con retardo. Una zona que se abre y se cierra al menor movimiento del ratón resulta molesta. Un breve retardo de unos 150 milisegundos hace que el comportamiento sea bastante más tranquilo.
Tiempo de carga
El contenido desplegable se carga igualmente, aunque nadie lo abra, y además en todas las páginas, porque está dentro de la cabecera. Un mega menú con doce imágenes ralentiza así todo el sitio web.
Mantenga las imágenes pequeñas y úselas con moderación. Lo que eso significa para las métricas lo explico en Elementor y Core Web Vitals.
La alternativa que a menudo es mejor
En lugar de un mega menú: un menú principal ligero con cinco a siete puntos y, detrás, páginas de resumen bien construidas que lleven en profundidad.
Suele ser la mejor solución: para los visitantes, porque la orientación es más clara, y para el buscador, porque una página de resumen con texto explicativo puede posicionar, mientras que un menú no.
Si no está seguro de qué estructura encaja con su sitio web, esa es una de las preguntas que aclaro pronto en mi formación de Elementor, antes de que invierta tiempo en una navegación que no resuelve el problema real.
Etiquetas