Cómo Agregar un Mega Menú a WordPress (+5 Mejores Complementos)

Los menús juegan un papel importante en el diseño y la funcionalidad de su sitio web. Ayudan a los visitantes a navegar entre sus páginas y pueden mejorar la usabilidad general. Aún así, cuando tiene mucho contenido, descubrir cómo mostrarlo sin que se vea abarrotado o caótico puede ser un desafío.

Ahí es donde entran los mega menús. Un mega menú de WordPress puede darle a su sitio web una apariencia más profesional y ayudar a las personas a encontrar el contenido que buscan más fácilmente. Además, hay varios métodos que puede usar para agregar uno a su sitio web.

En esta publicación, explicaremos qué es un mega menú y los beneficios de usarlo en WordPress. Luego, lo guiaremos a través de sus opciones para crear uno y exploraremos cinco de las mejores opciones de complementos de mega menú.

¿Qué es un mega menú en WordPress?

Su menú de WordPress es la estructura que utiliza para organizar y mostrar las páginas de su sitio web. Por lo general, se encuentra en la parte superior del sitio, aunque también puede estar al costado o mostrarse de otra manera única.

Para acceder al sistema de menú incorporado, puede comenzar iniciando sesión en su sitio de WordPress. Luego, desde su panel de administración, vaya a Apariencia → Menús .

De forma predeterminada, WordPress usa menús estándar, que muestran una lista de páginas, a veces con menús desplegables de una columna. No hay información o contenido adicional como imágenes, descripciones, etc., es solo una serie de listas. Por lo general, es bastante simple y directo, pero lo limita cuando se trata de la cantidad de páginas, el volumen o la información que puede incluir. Aquí hay un ejemplo de WooCommerce:

Un mega menú es un tipo de menú desplegable que permite a los usuarios acceder a una gran cantidad de contenido en un solo lugar. Los mega menús se usan a menudo en sitios web de comercio electrónico y también se están volviendo cada vez más populares en otros tipos. Puede ver un ejemplo en el sitio de Nalgene, que muestra fotos de productos, controles deslizantes y otro contenido en un estilo más horizontal:

La diferencia clave es que un mega menú normalmente tiene varias columnas de contenido, mientras que un menú desplegable tradicional solo tiene una columna. Esto permite un menú mucho más robusto y completo, que puede ser especialmente útil en sitios web con mucha información.

¿Por qué usar un mega menú en WordPress?

Uno de los beneficios de usar un mega menú es que puede reducir la cantidad de clics necesarios para navegar a un contenido en particular. Esto es excelente para los visitantes que buscan algo específico en su sitio web, pero también mejora la experiencia del usuario para los visitantes primerizos al ayudarlos a explorar su sitio de manera más eficiente.

Los mega menús también se pueden usar para mejorar la apariencia de su sitio web e incluso promover contenido específico o alentar las acciones que desea que realicen los visitantes. Además, son altamente personalizables, por lo que pueden jugar con el resto de su marca para brindar una experiencia perfecta y visualmente atractiva.

Cómo crear un mega menú de WordPress

Hay un par de formas diferentes de crear un mega menú en WordPress. Una opción es hacerlo manualmente, agregando un código personalizado. La otra opción (más rápida y fácil) es usar un complemento. Echemos un vistazo a cómo agregar un mega menú a WordPress usando estos dos métodos.

Crear un mega menú manualmente (sin un complemento)

Si se siente cómodo trabajando con los archivos de su sitio, esta puede ser una buena opción para crear algo único.

Antes de hacer esto, es importante hacer una copia de seguridad de su sitio de WordPress. También puede considerar crear un sitio de prueba para crear y probar su mega menú antes de publicarlo. Esto lo ayudará a evitar cualquier problema que rompa la funcionalidad en su sitio en vivo.

Primero, vaya a Apariencia → Menús en su tablero de WordPress y asigne un nombre a su menú.

Haga clic en el botón Crear menú . Arrastre y suelte las páginas que desea incluir en el mega menú, sangrándolas como submenús cuando sea necesario.

Cuando haya terminado, puede seleccionar Guardar menú .

A continuación, navegue hasta el Administrador de archivos de su cPanel o use un cliente de Protocolo de transferencia de archivos (FTP) para conectarse a los archivos de su sitio web. Encuentre la hoja de estilo de su tema yendo a / wp-content → /themes → /your-theme-or-child-theme → /style.css . En la parte inferior, agregue la siguiente línea de código:

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

Esto hará que los elementos de su submenú aparezcan cuando alguien se desplace sobre un elemento de nivel superior. Ahora, personalizaremos el código para que sea un poco más atractivo visualmente, asegurándonos de que cada elemento de subnivel se muestre en ancho completo, con secciones de elementos que aparecen una al lado de la otra. Añade este código:

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

Luego, puede jugar con el estilo para que se vea de la manera que desea, en línea con su marca y el resto de su sitio. Por ejemplo, es posible que desee cambiar el color de fondo de su mega menú o poner en negrita ciertos elementos. También es posible que desee ajustar el espacio entre columnas o agregar elementos adicionales como fotos. Si es un desarrollador o tiene un grado de experiencia en código, puede diseñar su mega menú para que se vea como desee.

¿Quieres una guía más detallada? Tuts+ ofrece un tutorial completo.

Otra opción para crear un mega menú sin un complemento es verificar las opciones integradas de su tema. Algunos, como el tema Hestia, incluyen mega opciones de menú de forma predeterminada. Sin embargo, este no es siempre el caso.

Crear un mega menú con un complemento de WordPress

Si no se siente cómodo editando los archivos de su sitio o su tema no ofrece opciones de mega menú integradas, otro método que puede usar para crear un mega menú en WordPress es con un complemento. Hay muchas opciones disponibles, que discutiremos en la siguiente sección.

Si bien esta es una opción más segura que crear uno manualmente, aún debe hacer una copia de seguridad de su sitio de WordPress antes de realizar cualquier cambio.

Las características específicas y la funcionalidad del complemento variarán según la herramienta que decida utilizar. Pero en general, el concepto será el mismo.

Usaremos Max Mega Menu como ejemplo. Para comenzar, puede instalar y activar el complemento en su sitio web de WordPress.

A continuación, deberá habilitar la funcionalidad del mega menú navegando a Apariencia → Menús . Puede elegir la ubicación deseada para su menú, luego haga clic en el cuadro junto a Habilitar.

Guarde sus cambios cuando haya terminado. Para personalizar la apariencia y la configuración de su mega menú, puede ir a Mega Menú → Temas de menú.

Aquí encontrará una variedad de opciones para diseñar el menú. Puede modificar el tipo de menú así como la apariencia y funcionalidad del mismo.

Los cinco mejores complementos de mega menú de WordPress

Si decide que desea utilizar un complemento de WordPress de mega menú, hay muchas opciones para elegir. Mientras los investiga, es importante considerar las características específicas que está buscando, así como su presupuesto. Con eso en mente, echemos un vistazo detallado a cinco de los mejores complementos de mega menú de WordPress.

1. Max Mega Menú

Max Mega Menu es un complemento increíblemente popular que le permite agregar fácilmente menús personalizables de alta calidad a su sitio de WordPress. Incluye un generador de arrastrar y soltar que es fácil de usar. También admite múltiples mega menús para varias ubicaciones en su sitio.

Características clave de Max Mega Menú:

• Múltiples ubicaciones de menú configurables individualmente
• Un generador de diseño de cuadrícula
• Menú flotante y opciones de transición
• Un constructor de arrastrar y soltar
• Códigos cortos
• Iconos de elementos de menú
• un cuadro de búsqueda
• logotipos de menú

Pros de Max Mega Menú:

• Hay opciones gratuitas y premium disponibles.
• Es ligero, con código limpio.
• Incluye soporte para WooCommerce y Easy Digital Downloads.
• Puede colocar mega menús en múltiples ubicaciones.
• Los widgets le permiten agregar mapas, formularios de contacto y más.
• También puede crear mega menús desde cero o usar sus menús existentes.
• La navegación con el teclado mejora la accesibilidad.

Contras de Max Mega Menú:

• Las opciones de personalización avanzadas solo están disponibles con una licencia profesional.
• No hay una prueba gratuita para los planes premium.

Facilidad de uso :

Max Mega Menu es muy fácil de usar. Convierte automáticamente los menús existentes en mega menús. Tiene una interfaz fácil de usar que es fácil de navegar. Una licencia pro también incluye actualizaciones y soporte prioritario.

Precios :

Max Mega Menu ofrece una versión gratuita con opciones de personalización limitadas. Los planes Pro con funciones avanzadas comienzan en $29 por una licencia de un solo sitio. Esto también incluye un año de apoyo.

2. Menú cuádruple

QuadMenu es otro complemento de mega menú popular que es fácil de usar independientemente de su nivel de experiencia. La herramienta flexible incluye un generador intuitivo de arrastrar y soltar y una amplia variedad de opciones de estilo y personalización para crear menús y submenús para WordPress.

Características clave de QuadMenu :

• Un constructor de arrastrar y soltar
• Múltiples ubicaciones de menú
• Menús fuera del lienzo, pegajosos y verticales
• Opciones para alinear enlaces
• Menús desplegables flotantes
• Iconos de Font Awesome y Google Fonts
• Animaciones desplegables
• Una variedad de filtros
• Mostrar widgets

Ventajas de QuadMenu:

• Hay una versión gratuita y premium.
• Es adecuado para principiantes y desarrolladores.
• Admite temas secundarios.
• Hay integración de menú automática y manual.
• Es intuitivo y fácil de usar.
• Hay menús de pestañas y carrusel disponibles con la versión pro.

Contras de QuadMenu:

• Las opciones de estilo avanzadas requieren una licencia profesional.
• Hay opciones limitadas de vista previa en vivo.

Facilidad de uso :

QuadMenu es adecuado tanto para principiantes como para desarrolladores. El generador de arrastrar y soltar hace que crear y personalizar sus mega menús sea rápido y fácil.

Precios:

QuadMenu tiene una versión gratuita. Las licencias Pro están disponibles a partir de $30 para un solo sitio.

3. UberMenú

Si está buscando un creador de mega menús premium, vale la pena echarle un vistazo a UberMenu. Esta potente herramienta rica en funciones utiliza un sistema de cuadrícula sofisticado que le permite crear rápidamente un mega menú de aspecto profesional.

Características clave de UberMenu :

• Un sistema de rejilla único
• Más de 50 ajustes de estilo
• Generación dinámica de elementos
• Submenús basados ​​en publicaciones, categorías y más
• La opción de agregar pestañas dentro de los menús
• Menús táctiles
• Transiciones CSS3 desplegables
• Múltiples activadores de menú (desplazamiento, intento de desplazamiento y clic)
• Varias ubicaciones de menú
• Diseños flexibles

Ventajas de UberMenu :

• Es ampliamente utilizado y altamente calificado entre los propietarios de sitios de WordPress.
• Hay opciones para agregar HTML personalizado, códigos abreviados y widgets.
• Utiliza la interfaz nativa del Personalizador de WordPress.
• Hay temas de menú ilimitados.

Contras de UberMenu :

• Solo hay una versión premium disponible.
• Dependiendo de su tema, puede que no sea la mejor opción si no tiene habilidades de programación CSS/PHP.

Facilidad de uso :

El uso de UberMenu probablemente será muy sencillo para los usuarios experimentados de WordPress porque la interfaz se basa en el personalizador nativo. Puede ver vistas previas en tiempo real de su menú a medida que lo crea. Sin embargo, para los principiantes de WordPress, esto podría ser más difícil de navegar que una interfaz de construcción intuitiva de arrastrar y soltar.

Precios :

Una licencia de UberMenu para un solo sitio cuesta $26. Esto incluye seis meses de soporte para desarrolladores.

4. Kit de elementos

Si está familiarizado con el generador de páginas Elementor y lo usa, ElementsKit es un excelente complemento de mega menú a considerar. La herramienta incluye una amplia biblioteca de módulos personalizados, con un generador de encabezado y pie de página.

Características clave de ElementsKit :

• Una interfaz de contenido en vivo
• Una biblioteca de módulos personalizada
• Un generador de encabezado y pie de página
• Desplazamiento de paralaje
• Más de 200 plantillas de página prediseñadas
• Un widget de temporizador de cuenta regresiva
• Animaciones desplegables
• Menús fuera de lienzo, pegajosos y verticales
• Iconos de fuentes impresionantes
• temas claros y oscuros
• Dos diseños de menú móvil
• CSS personalizado

Ventajas de ElementsKit :

• Se integra completamente con el generador de páginas de Elementor.
• Incluye funcionalidad de arrastrar y soltar.
• Es principiante y fácil de usar.
• Tiene personalizaciones para iconos y colores de texto de distintivos.
• Tiene funciones integradas de WooCommerce.
• Ofrece opciones avanzadas de mega menú.

Contras de ElementsKit :

• No es ideal a menos que use el generador de páginas Elementor.
• Puede ser abrumador si solo está buscando una herramienta de creación de mega menús.

Facilidad de uso :

ElementKits es una herramienta sencilla y versátil. Si no está familiarizado con Elementor, la interfaz puede tomar un tiempo para acostumbrarse. Aunque, si ya usa el complemento del creador de páginas, es probable que se familiarice con este complemento en poco tiempo.

Precios :

ElementsKit ofrece una versión gratuita. Las licencias premium comienzan en $39 por año para un solo sitio.

5. Mega menú de WP

Si está buscando una herramienta freemium simple y directa para crear mega menús en WordPress, WP Mega Menu es otra opción sólida. Este complemento es fácil de usar y proporciona todas las características y funciones básicas necesarias para crear un mega menú de calidad para una amplia variedad de sitios. Para ser una herramienta gratuita, también viene con un impresionante conjunto de opciones de personalización y estilo.

Características clave de WP Mega Menú :

• Navegación intuitiva
• Una interfaz de arrastrar y soltar
• La opción de crear y guardar temas de menú.
• Logotipo, barra de búsqueda e imágenes de fondo
• Iconos de Google Fonts y Font Awesome
• Iconos sociales
• Etiquetado de menú

Ventajas de WP Mega Menú :

• Es completamente gratis para descargar y usar, con una actualización profesional disponible.
• Es fácil de navegar y usar.
• Tiene características que otros complementos solo incluyen en versiones premium.
• Tiene la opción de crear y guardar temas de menú para usar en varios sitios web.

Contras de WP Mega Menú :

• Carece de herramientas diseñadas para desarrolladores en comparación con otras opciones de complementos.
• No hay opciones pegajosas o fuera del lienzo con la versión gratuita.

Facilidad de uso :

WP Mega Menu es un complemento para principiantes con muchas opciones. Viene con una interfaz intuitiva que es fácil de entender y navegar.

Precios :

WP Mega Menú es gratis. Pero también ofrece planes Premium a partir de $29 por año por una sola licencia.

Comparación de los principales complementos de mega menú para WordPress

Preguntas frecuentes (FAQ) sobre mega menús

En este punto, es de esperar que tenga una sólida comprensión de cómo crear y agregar un mega menú en WordPress. Pero tomemos un momento para concluir con algunas preguntas frecuentes (FAQ).

¿Puedo agregar imágenes e íconos a un mega menú de WordPress?

Sí, puede agregar imágenes e íconos a un mega menú de WordPress. Algunos complementos vienen con soporte incorporado para esto. Alternativamente, también puede agregar imágenes e íconos editando el código de su sitio web.

¿Puedo agregar un mega menú a mi barra lateral de WordPress?

Sí, puede agregar un mega menú a su barra lateral de WordPress. Hay algunos complementos diferentes que puede usar para agregar un mega menú a su barra lateral. La mayoría de los complementos que le permiten mostrar menús como widgets también le permitirán agregarlos a su barra lateral.

Comienza a personalizar tus menús de WordPress

Los menús juegan un papel esencial en el diseño y la funcionalidad de su sitio web porque se pueden usar para mejorar la apariencia de cualquier sitio. Entonces, si tiene un gran sitio web de WordPress con mucho contenido y páginas, es posible que desee considerar agregar un mega menú.

Como discutimos en esta publicación, hay tres métodos principales que puede usar para crear un mega menú en WordPress. Una es usar las opciones de su tema para agregar un mega menú. El segundo es codificar uno manualmente. Si nada de eso es posible, o si solo desea ahorrar algo de tiempo, puede probar un complemento de mega menú como Max Mega Menu, QuadMenu o ElementsKit.

¿Quiere mejorar aún más el rendimiento de su sitio de WordPress? Además de proporcionar copias de seguridad automáticas y sencillas y otras características de seguridad de WordPress, ¡Jetpack puede ayudar a aumentar la velocidad y la experiencia del usuario de su sitio!