Cómo agregar un menú mega en tu sitio de WordPress (paso a paso)

Los mega menús te permiten mostrar una gran variedad de enlaces y categorías de contenido en un diseño estructurado y fácil de navegar.

Esto puede mejorar enormemente la experiencia de navegación de los visitantes al hacer que la navegación de tu sitio sea más intuitiva y accesible.

En WPBeginner, usamos un mega menú para mostrar nuestros enlaces más importantes en la parte superior de la página. Cuando los usuarios hacen clic en él, se abre un menú desplegable que revela enlaces clave adicionales. Esta configuración nos ha permitido crear un menú de navegación limpio y organizado, presentando una amplia gama de opciones sin que la página parezca desordenada.

En este artículo, te mostraremos cómo agregar fácilmente un mega menú a tu sitio web de WordPress, paso a paso.

¿Por qué agregar un mega menú en tu sitio de WordPress?

WordPress viene con un creador de arrastrar y soltar que puedes usar para crear todo tipo de menús, incluidos menús desplegables, menús de encabezado y más. Incluso hay complementos que te permiten crear menús de navegación personalizados en temas de WordPress.

Sin embargo, si tu sitio tiene mucho contenido, es posible que necesites crear un mega menú en su lugar. Esto te permite agregar menús desplegables multicolumna a la estructura de menú estándar de WordPress.

Puedes usar mega menús para organizar tu contenido bajo diferentes encabezados y subencabezados, para que los visitantes puedan encontrar rápidamente lo que buscan. Por ejemplo, si crea un mercado en línea, podrías organizar todas tus categorías y subcategorías de productos en un mega menú.

Los mega menús también pueden mostrar contenido enriquecido a tus visitantes, como videos, texto, búsqueda y publicaciones recientes.

También puedes agregar imágenes, lo que facilita la lectura de los mega menús.

Dicho esto, veamos cómo puedes agregar fácilmente un mega menú a tu sitio web de WordPress.

Cómo crear un mega menú para tu sitio de WordPress

La forma más fácil de agregar un mega menú a tu sitio de WordPress es usando Max Mega Menu. Este plugin te permite agregar contenido enriquecido a tus mega menús, incluyendo videos, galerías de imágenes, búsqueda y más.

De esta manera, puedes crear menús más atractivos y útiles.

También puedes cambiar el estilo del menú agregando diferentes colores, cambiando el tamaño de fuente y usando diferentes iconos.

Primero, necesitarás instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Habilitar mega menús en tu sitio web de WordPress

Después de la activación, ve a la página Mega Menu » Ubicaciones del menú desde el panel de WordPress para ver todas las diferentes áreas donde puedes agregar un mega menú.

Es posible que veas diferentes opciones dependiendo de tu tema de WordPress.

Para empezar, necesitarás habilitar los mega menús en cada ubicación donde quieras usarlos.

Para hacer esto, simplemente haz clic para expandir una ubicación y luego marca su casilla 'Habilitado'.

Después de eso, puedes cambiar el 'Evento' que activará el mega menú.

La configuración predeterminada es 'Intención de pasar el mouse', lo que significa que el visitante debe pasar el mouse sobre el mega menú durante unos segundos para activarlo. Esto funciona bien para la mayoría de los sitios web de WordPress, pero también puedes abrir el menú desplegable 'Efecto' y elegir 'Pasar el mouse' o 'Clic' en su lugar.

Si eliges ‘Click’, el visitante deberá hacer clic para explorar el mega menú. Esto puede ser útil si te preocupa que los visitantes activen el menú por accidente, lo cual puede ser frustrante.

Mientras tanto, ‘Hover’ abrirá tu mega menú tan pronto como el visitante mueva su mouse sobre él. Esto puede animar a los visitantes a explorar diferentes áreas de tu sitio, por lo que podrías querer usar ‘Hover’ en páginas de destino o la página de inicio de tu sitio web.

Después de tomar esta decisión, puedes cambiar cómo se abre el menú usando la configuración de ‘Efecto’.

Max Mega Menu tiene diferentes animaciones que puedes probar, incluyendo desvanecimiento y deslizamiento hacia arriba. También puedes cambiar la velocidad de la animación. Al probar diferentes animaciones, puedes crear un mega menú que capte la atención del visitante.

Si no quieres usar ninguna animación, simplemente abre el primer menú desplegable y selecciona ‘Ninguno’.

Por defecto, Mega Menu no utiliza animaciones en dispositivos móviles, ya que los smartphones y tablets suelen tener menos potencia de procesamiento. Sin embargo, si deseas crear una animación única para los visitantes móviles, puedes usar la configuración en el área de ‘Efecto (Móvil)’.

Si deseas probar tus mega menús en dispositivos móviles, consulta nuestra guía sobre cómo ver la versión móvil de sitios de WordPress desde un escritorio.

Si elegiste ‘Clic’ en el menú desplegable ‘Evento’, asegúrate de seleccionar la pestaña ‘Avanzado’ a continuación.

Aquí, puedes usar ‘Comportamiento del evento de clic’ para definir qué sucede cuando el visitante hace clic en tu mega menú. Por ejemplo, el segundo clic podría cerrar el menú o abrir un nuevo enlace.

Hay más configuraciones que puedes revisar, pero esto debería ser suficiente para la mayoría de los blogs y sitios web de WordPress.

Cuando estés satisfecho con la configuración del plugin, haz clic en ‘Guardar Cambios’.

Para habilitar mega menús en más ubicaciones, simplemente sigue el mismo proceso descrito anteriormente.

Personaliza cómo se ven los mega menús en tu sitio web

El siguiente paso es configurar cómo se verán los mega menús en tu sitio web.

Puedes hacer esto seleccionando la pestaña ‘Temas del Menú’ a la izquierda de la pantalla.

En esta pantalla, puedes cambiar la dirección de los íconos de flecha, usar una altura de línea diferente, agregar una sombra y más.

Cuando estés satisfecho con tu configuración, ¡no olvides hacer clic en ‘Guardar Cambios’!

Si deseas eliminar estos cambios en cualquier momento, simplemente marca la casilla ‘Restablecer estilo del widget’ y luego haz clic en ‘Guardar Cambios’.

A continuación, puedes personalizar la barra de menú, que es la barra que los visitantes ven cuando el menú está en su estado predeterminado y colapsado.

Para hacer estos cambios, haz clic en la pestaña ‘Barra de menú’ y luego usa la configuración para cambiar el color de fondo, el relleno, el radio del borde y más.

Incluso puedes crear un degradado de color seleccionando dos colores diferentes en la sección ‘Fondo del menú’.

Si te desplazas hacia abajo, puedes cambiar la apariencia del menú de nivel superior.

Esta es la primera fila de elementos, que es visible cuando el mega menú está en su estado colapsado.

Dado que son tan importantes, es posible que desees que los elementos del menú de nivel superior destaquen.

Por ejemplo, en la siguiente imagen, estamos usando un color de fondo diferente.

En la sección ‘Estado al pasar el cursor’ puedes resaltar el elemento del menú de nivel superior actualmente seleccionado.

Por ejemplo, en la siguiente imagen, estamos usando un efecto de subrayado.

Esto puede ayudar al visitante a ver dónde se encuentra en el menú, lo que lo hace particularmente útil para sitios que necesitan tener mega menús grandes.

Si agregas un estado al pasar el cursor, desplázate hasta la parte inferior de la pantalla y marca la casilla ‘Resaltar elemento actual’.

Después de eso, puedes cambiar la apariencia del submenú.

Este es el menú que aparece debajo de un elemento principal de nivel superior, como puedes ver en la siguiente imagen.

Para personalizar el submenú, haz clic en la pestaña ‘Mega Menús’.

Ahora puedes usar estas configuraciones para cambiar el color de fondo del submenú, aumentar el radio para crear esquinas redondeadas, agregar relleno y más.

Agregas contenido a tus mega menús usando widgets. Por ejemplo, podrías agregar un widget de Galería y mostrar tus productos más populares de WooCommerce, o incrustar una nube de etiquetas dentro del mega menú. Estos widgets pueden proporcionar información adicional o animar a los visitantes a hacer clic en ciertos elementos del menú.

Puedes personalizar cómo se verán estos widgets desplazándote a la sección ‘Widgets’. Por ejemplo, podrías cambiar el color del título del widget, aumentar el tamaño de la fuente, agregar relleno y ajustar la alineación.

En esta pantalla, también puedes personalizar cómo se verán los elementos del menú de segundo nivel y de tercer nivel en tu sitio web, blog o mercado en línea. Estos son los hijos de los elementos del menú de nivel superior.

Al crear tus menús, es posible agregar cuatro o incluso más niveles para crear un mega menú anidado. Si haces esto, WordPress simplemente usará el estilo de tercer nivel para todos los niveles subsiguientes.

Puedes ver esto en acción en la siguiente imagen. El segundo nivel tiene texto rojo, y tanto el tercer como el cuarto nivel usan el mismo texto azul.

Cuando estés satisfecho con la configuración del menú, no olvides hacer clic en 'Guardar Cambios'.

Cómo agregar un mega menú en tu sitio de WordPress

Una vez que hayas terminado de personalizar el mega menú, es hora de agregarlo a tu sitio web.

Simplemente dirígete a la página Apariencia » Menús desde la barra lateral del administrador.

Si deseas convertir un menú existente en un mega menú, abre el menú desplegable 'Seleccionar un menú para editar' y elígelo de la lista. Ten en cuenta que el menú que elijas debe estar asignado a una ubicación donde hayas habilitado la función de mega menú.

Si deseas empezar desde cero, haz clic en 'Crear un nuevo menú' y luego escribe un título para tu nuevo mega menú.

Luego puedes seleccionar la ubicación que deseas usar y hacer clic en 'Crear Menú'. Una vez más, esta debe ser una ubicación donde hayas habilitado los mega menús.

Agregar contenido a tu menú de WordPress

Después de eso, agrega todas las páginas, publicaciones, productos de WooCommerce y cualquier otro contenido que desees incluir en el mega menú.

Para obtener instrucciones paso a paso, consulta nuestra guía para principiantes sobre cómo agregar un menú de navegación en WordPress.

A continuación, deberás organizar tus elementos en los menús principales y submenús que deseas usar en el mega menú. Para crear un submenú, arrastra un elemento debajo del principal y luego arrástralo ligeramente hacia la derecha antes de soltarlo.

Para crear varios niveles, simplemente sigue arrastrando elementos hacia la derecha para que aparezcan con sangría uno debajo del otro. Esto es similar a crear un menú desplegable en WordPress.

Habilitar la función Mega Menú

Cuando termines, haz clic para expandir la sección 'Configuración de Max Mega Menu' y marca la casilla junto a 'Habilitar'.

En este cuadro, también puedes anular la configuración predeterminada del mega menú. Esto te permite crear mega menús únicos para diferentes áreas de tu sitio web de WordPress, así que adelante y haz los cambios que desees.

Después de eso, haz clic en 'Save'.

Crear el diseño del Mega Menú

Ahora, pasa el mouse sobre el primer elemento de nivel superior y verás un nuevo botón 'Mega Menú'. Haz clic en él.

Ahora verás todas las configuraciones para este elemento de nivel superior.

Por defecto, Max Mega Menu usará el estilo 'flyout' (desplegable), donde los submenús 'salen' desde el costado. Para crear un mega menú en su lugar, abre el menú desplegable 'Modo de visualización de submenú' y elige 'Diseño estándar' o 'Diseño de cuadrícula'.

El diseño estándar muestra todos los submenús en columnas.

Mientras tanto, el diseño de cuadrícula te permite organizar los elementos del submenú en columnas y filas.

Esto es ideal si deseas mostrar mucho contenido, como todos los productos digitales de tu tienda en línea, o si tienes un diseño muy específico en mente.

Después de seleccionar el diseño estándar o de cuadrícula, verás todos los submenús asignados a este elemento principal.

Ahora, puedes proceder a cambiar cómo se organizan estos elementos en el mega menú.

Si estás utilizando el diseño estándar, puedes cambiar el número de columnas usando el menú desplegable en la esquina superior derecha.

Si estás usando un diseño de cuadrícula, entonces puedes agregar columnas y filas usando los botones ‘+Columna’ y ‘+Fila’.

Cuando estés satisfecho con el diseño, puedes organizar los elementos del submenú en diferentes columnas y filas usando arrastrar y soltar.

Después de eso, es hora de cambiar cuánto espacio ocupa cada elemento en la columna. Max Mega Menu muestra el tamaño actual como una fracción del ancho total disponible.

Por ejemplo, en la siguiente imagen, ambas columnas ocupan la mitad del espacio disponible.

Para cambiar el tamaño de un elemento, simplemente haz clic en sus botones de flecha para hacer la fracción más grande o más pequeña.

Crea un menú mega adaptable a móviles (solo diseño de cuadrícula)

Por defecto, Max Mega Menu mostrará el mismo contenido en dispositivos de escritorio y móviles. Esto puede ser un problema con los diseños de cuadrícula, ya que los smartphones y tablets suelen tener pantallas más pequeñas, y desplazarse horizontalmente puede ser difícil.

Si estás utilizando el diseño de cuadrícula, entonces puedes crear menús mega diferentes para dispositivos móviles. Por ejemplo, podrías usar menos columnas para que los usuarios no tengan que desplazarse horizontalmente. De esta manera, puedes crear un menú de WordPress adaptable a móviles.

Puedes ocultar columnas o filas enteras usando el ícono 'Oculto en móvil', que parece un pequeño teléfono móvil.

Simplemente activa y desactiva el ícono para ocultar y mostrar contenido diferente en escritorio y móvil.

Agrega contenido enriquecido con widgets de menú mega

Hecho esto, puedes empezar a agregar widgets al menú mega. Esto te permite mostrar contenido adicional en el submenú, como comentarios recientes, videos, galerías y más.

Por ejemplo, podrías usar imágenes para promocionar una oferta en tu tienda en línea o destacar tus últimos productos.

Para agregar un widget, simplemente haz clic para abrir el menú desplegable 'Selecciona un widget...'.

Ahora puedes elegir un widget de la lista.

WordPress agregará el widget a una columna o fila automáticamente, pero puedes moverlo a una nueva ubicación usando arrastrar y soltar.

Para configurar el widget, haz clic en su pequeño ícono de llave inglesa.

Esto abre una ventana emergente donde puedes agregar contenido al widget y cambiar su configuración.

Verás diferentes opciones dependiendo del tipo de widget que estés creando. Por ejemplo, si agregas un widget de reproductor de música de audio al menú mega, verás configuraciones donde puedes subir una pista de audio.

Todos los widgets tienen un campo de 'Título' donde puedes agregar texto que aparecerá encima del widget.

Cuando termines, haz clic en 'Guardar' para almacenar tus cambios y luego selecciona 'Cerrar'. Para agregar más widgets al menú mega, simplemente sigue el mismo proceso descrito anteriormente.

Revisar la configuración predeterminada del menú mega

A continuación, simplemente haz clic en la pestaña 'Configuración'.

Aquí, puedes usar casillas de verificación para ocultar o mostrar diferentes contenidos en el submenú.

También puedes ocultar o mostrar el submenú en dispositivos móviles y de escritorio, y cambiar la alineación para que el submenú se abra a la izquierda o derecha del padre de nivel superior.

Si realizas algún cambio en la configuración predeterminada, ¡no olvides hacer clic en 'Guardar cambios'.

Agregar íconos de imagen al menú mega de WordPress

Los íconos de imagen ayudan a los visitantes a comprender de qué trata un elemento del menú, sin siquiera tener que leer la etiqueta de navegación. Esto es particularmente útil para menús grandes donde un visitante puede preferir escanear el contenido rápidamente en lugar de leer cada etiqueta de navegación.

Puedes usar íconos para que el contenido más importante se destaque. Por ejemplo, podrías animar a los visitantes a completar su compra agregando un ícono de carrito a la opción de menú 'Finalizar compra'.

Para agregar íconos de imagen a tu menú de navegación, haz clic en la pestaña 'Ícono'.

Ahora puedes elegir cualquier ícono de guion de la biblioteca incorporada o usar tu propia imagen. Si actualizas a Max Mega Menu Pro, también tendrás acceso a otras fuentes de íconos, Genericons y FontAwesome.

Termina de configurar el Mega Menú en tu sitio de WordPress

Después de revisar todas estas configuraciones, puedes cerrar la ventana emergente para regresar a la página principal de Apariencia » Menús.

Ahora puedes repetir este proceso para cada padre de nivel superior.

Cuando estés satisfecho con la configuración del mega menú, haz clic en el botón Guardar menú para hacerlo público.

Ahora, simplemente visita el front-end de tu sitio web para ver el mega menú en acción.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un mega menú en tu sitio de WordPress. También puedes consultar nuestra guía paso a paso sobre cómo agregar un botón en el menú de encabezado de tu WordPress y nuestro tutorial sobre cómo crear un menú de navegación flotante fijo en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.