Tabla de contenidos
Puede crear un mega menú completo en Elementor sin comprar Elementor Pro. Un mega menú es un menú desplegable amplio de varias columnas que muestra una sección completa de su sitio a la vez: enlaces, imágenes, íconos e incluso un formulario de contacto, en lugar de una delgada lista vertical. La versión gratuita de Elementor no tiene un widget de mega menú, pero sí el gratuito Mega menú de complementos maestros agrega uno y diseña cada panel con el editor Elementor normal.
Esta guía cubre toda la compilación: habilitar la extensión, adjuntar un mega menú a un elemento del menú, diseñar el panel desplegable y hacerlo bien en el móvil, el paso que la mayoría de los tutoriales omiten.
¿necesitas Elementor Pro para un mega menú?
No. Hay tres rutas a un mega menú en Elementor, y sólo una de ellas cuesta dinero:
| Ruta | Costo | Compensación |
|---|---|---|
| Widget Elementor Pro Mega Menú | Licencia anual pagada | Requiere Pro en cada sitio que construyas |
| Css personalizado/menú codificado a mano | Gratis | Frágil, difícil de editar más tarde, sin edición visual |
| Mega menú de complementos maestros | Gratis | Agrega un complemento; paneles construidos visualmente en Elementor |
Si un mega menú es la única razón por la que estaba a punto de actualizar, la ruta gratuita hace el mismo trabajo. Master Addons también se ejecuta junto con Elementor Pro sin conflictos, por lo que no se desperdicia una licencia Pro existente. Elementor documenta su propio flujo de trabajo de mega menú Pro aquí si desea comparar los dos enfoques uno al lado del otro; requiere activar varias funciones experimentales antes de poder comenzar.
Lo que necesitas antes de comenzar
- Elementor (la versión gratuita está bien) instalado y activo
- Complementos maestros para Elementor instalado y activo
- Un menú de WordPress ya creado en Apariencia → Menús (incluso uno aproximado, puedes editarlo más tarde)
Paso 1: habilite la extensión del mega menú
Ir a Complementos maestros → Complementos y extensiones en su panel de WordPress, busque Megamenú en la lista de extensiones y alternarla. Guardar.
Los complementos maestros se envían con todo apagado de forma predeterminada, por lo que solo carga lo que usa. Por eso este paso existe. Si no ve la opción inmediatamente, actualice la página de administración (Cmd/Ctrl + Shift + R); Los complementos de almacenamiento en caché se mantienen en el menú de administración anterior durante un minuto.
Paso 2: convierta un elemento del menú en un mega menú
Abierto Apariencia → Menús y amplíe el elemento de nivel superior desde el que desea que caiga el mega panel, generalmente algo amplio como “Productos”, “Servicios” o “Compra”.
- Marque el Habilitar megamenú opción en ese elemento del menú.
- Elija el ancho del panel. El ancho completo se extiende de borde a borde, el ancho del contenedor se alinea con su contenido.
- Guarda el menú.
Habilite solo en elementos que realmente necesiten el espacio. Un mega menú en un único enlace de “Contacto” es peor que un enlace simple: hace que la gente trabaje más duro para un destino.
Paso 3: Diseñe el panel desplegable en Elementor
El contenido del panel es una plantilla de Elementor, que es lo que hace que este enfoque sea flexible: cualquier cosa que puedas construir en una página, puedes ponerla dentro del menú.
- Hacer clic Editar contenido del mega menú en el elemento del menú para abrir el editor Elementor.
- Construya un diseño de varias columnas. Tres o cuatro columnas se adaptan a la mayor navegación.
- Complete las columnas: widgets de encabezado como etiquetas de categoría, listas de íconos como grupos de enlaces, una imagen o dos para anclaje visual.
- Publica la plantilla.
Algunas cosas que hacen que los mega menús funcionen en lugar de simplemente parecer ocupados:
- Agrupe según cómo piensen los clientes, no según su organigrama. Los encabezados de las columnas deben coincidir con las palabras que usan los visitantes.
- Limítelo a aproximadamente cinco a siete enlaces por columna. Más allá de eso, el escaneo colapsa y el menú se convierte en una pared.
- Dale un trabajo a una columna. Un producto destacado, una promoción o un llamado a la acción gana su espacio más que una cuarta lista de enlaces.
- Mantenga las imágenes ligeras. Las imágenes del menú se cargan en cada página. Comprímalos y sirve WebP: un mega menú pesado arrastra todo el sitio tiempo de carga, no sólo una página.
Paso 4: agregue el menú a su encabezado
Si su tema ya representa el menú de WordPress en su encabezado, el mega menú funciona inmediatamente. No es necesario realizar más pasos.
Para tener control total sobre el encabezado en sí, cree uno con el archivo gratuito Creador de temas de complementos maestros: cree una plantilla de encabezado, ingrese el archivo Widget de meniul Nav, seleccione el menú que lleva su mega menú y configure la condición de visualización en todo su sitio. Ese emparejamiento, creador de temas gratuito más mega menú gratuito, reemplaza las dos funciones por las que la gente compra Pro con mayor frecuencia.
Paso 5: arreglar la experiencia móvil
Aquí es donde se desmoronan la mayoría de los mega menús. Un panel de cuatro columnas que se ve nítido en una pantalla de 1440px se convierte en un desplazamiento interminable en un teléfono.
- Cambie a la vista móvil en Elementor y verifique la altura real del panel. Si pasa de dos pantallas, corte el contenido para dispositivos móviles.
- Oculte imágenes decorativas en el móvil utilizando los controles de visibilidad receptivos de Elementor; Mantenga los enlaces, suelte el adorno.
- Apile columnas verticalmente y confirme que los objetivos de toque sean cómodamente grandes.
- Pruebe en un teléfono real, no solo en la vista previa del editor. La vista previa se aproxima; no reproduce el comportamiento táctil.
Si tus puntos de interrupción no se alinean con tu diseño, el gratis Extensión de puntos de interrupción personalizados te permite configurar el tuyo propio. Esto es útil cuando el punto de interrupción predeterminado de la tableta corta su menú en un ancho incómodo.
Solución de problemas
- El megamenú no aparece. Confirme que la extensión esté activada, que el elemento del menú Habilite el mega menú marcado y que la plantilla del panel se publique, no se deje como 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 detrás del contenido. Un contenedor principal tiene
overflow: hiddeno 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 alternar/hamburguesa. Verifique la configuración móvil del widget de menú y confirme que nada se superponga al objetivo de toque.
Preguntas frecuentes
¿cómo creo un mega menú en Elementor sin Pro?
Instale el complemento Master Addons gratuito para Elementor, habilite la extensión Mega Menu en Master Addons > Addons & Extensions, luego abra Appearance > Menús y marque Habilitar Mega Menu en el elemento que desee. Haga clic en Editar contenido del menú Mega para diseñar el panel desplegable en el editor Elementor normal y publicarlo.
¿cómo puedo crear un menú en Elementor gratis?
La versión gratuita de Elementor te permite crear un menú estándar de WordPress a través de Apariencia > Menús y mostrarlo con el widget gratuito Menú de navegación. Para un menú desplegable de mega estilo, Elementor gratuito por sí solo no incluye ese widget, por lo que necesitas una extensión gratuita como Master Addons Mega Menu para agregar paneles de varias columnas.
¿cómo puedo crear un mega menú en WordPress sin utilizar complementos?
Puede codificar manualmente un menú desplegable con CSS y HTML personalizados, pero es frágil. Se interrumpe con las actualizaciones de temas, necesita un desarrollador para cada cambio y no le brinda edición visual. En su lugar, la mayoría de los propietarios de sitios obtienen un resultado más rápido y mantenible a partir de un complemento gratuito como Master Addons.
¿max Mega Menu es gratuito?
Max Mega Menu tiene una versión gratuita en el repositorio de complementos de WordPress, además de un complemento Pro pago para opciones de estilo adicionales, y funciona independientemente de su creador de páginas. Master Addons Mega Menu está diseñado específicamente para Elementor, por lo que los paneles están diseñados con el mismo editor de arrastrar y soltar que ya usa para las páginas.
¿cuál es el mejor complemento de mega menú para Elementor?
Depende de lo que ya ejecutes. Si utiliza Elementor y desea que los paneles se diseñen visualmente sin aprender una nueva interfaz, Master Addons Mega Menu es una opción sólida y gratuita. Si necesita menús multinivel avanzados con condiciones dinámicas, puede valer la pena el costo de una herramienta paga. Pruebe con su propio contenido antes de comprometerse con cualquiera de los dos.
¿cómo hago que un mega menú de Elementor responda en el móvil?
Cambie a la vista móvil de Elementor y verifique la altura real del panel. Apile columnas verticalmente, oculte imágenes decorativas con los controles de visibilidad sensibles, mantenga los objetivos grandes y pruebe en un teléfono real en lugar de en la vista previa del editor. Si los puntos de interrupción predeterminados cortan el menú de manera incómoda, configure el suyo propio con la extensión Puntos de interrupción personalizados.
¿por qué no aparece mi mega menú Elementor?
Marque cuatro cosas en orden: la extensión Mega Menu está habilitada, el elemento del menú Habilite Mega Menu está marcado, la plantilla del panel se publica en lugar de guardarse como un borrador y su caché se borra. Si el panel aparece pero está recortado, el desbordamiento de un contenedor principal: oculto o un índice z bajo lo oculta.
Lectura relacionada
