Cómo añadir un Mega Menú a su sitio WordPress (Paso a Paso)

Los mega menús 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 su sitio sea más intuitiva y accesible.

En WPBeginner, utilizamos 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, le mostraremos cómo añadir fácilmente un mega menú a su sitio web WordPress, paso a paso.

¿Por qué añadir un Mega Menú en su sitio WordPress?

WordPress viene con un constructor de arrastrar y soltar que puedes utilizar para crear todo tipo de menús, incluidos menús desplegables, menús de cabecera y mucho más. Incluso existen plugins que permiten crear menús de navegación personalizados en temas de WordPress.

Sin embargo, si su sitio tiene mucho contenido, puede que necesite crear un mega menú. Esto le permite añadir desplegables de varias columnas a la estructura de menú estándar de WordPress.

Puede utilizar mega menús para organizar su contenido en diferentes encabezados y subencabezados, de modo que los visitantes puedan encontrar rápidamente lo que buscan. Por ejemplo, si crea un mercado en línea, puede organizar todas las categorías y subcategorías de productos en un mega menú.

Los mega menús también pueden mostrar contenido enriquecido a sus visitantes, como vídeos, texto, búsquedas y entradas recientes.

También puede añadir imágenes, que facilitan la exploración de los mega menús.

Dicho esto, veamos cómo puede añadir fácilmente un mega menú a su sitio web WordPress.

Cómo crear un mega menú para su sitio WordPress

La forma más fácil de añadir un mega menú a su sitio de WordPress es mediante el uso de Max Mega Menu. Este plugin te permite añadir contenido enriquecido a tus mega menús, incluyendo vídeos, galerías de imágenes, búsqueda y mucho más.

De este modo, podrá crear menús más atractivos y útiles.

También puede cambiar el estilo del menú añadiendo diferentes colores, cambiando el tamaño de la fuente y utilizando distintos iconos.

En primer lugar, tendrás que instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Activar Mega Menús en su sitio web WordPress

Tras la activación, vaya a la página Mega Menu ” Menu Locations desde el panel de control de WordPress para ver todas las áreas diferentes donde puede añadir un mega menú.

Es posible que vea diferentes opciones dependiendo de su tema de WordPress.

Para empezar, tendrás que activar los mega menús en todos los lugares donde quieras utilizarlos.

Para ello, basta con hacer clic para expandir una ubicación y, a continuación, marcar su casilla “Activado”.

Después, puedes cambiar el ‘Evento’ que abrirá el mega menú.

La configuración por defecto es ‘Hover intent’, lo que significa que el visitante debe pasar el ratón por encima del mega menú durante unos segundos para activarlo. Esto funciona bien para la mayoría de los sitios web de WordPress, pero también puede abrir el menú desplegable “Efecto” y elegir “Hover” o “Clic” en su lugar.

Si elige “Clic”, el visitante tendrá que hacer clic para explorar el megamenú. Esto puede ser útil si te preocupa que los visitantes activen el menú por accidente, lo que puede resultar frustrante.

Mientras tanto, “Hover” abrirá su mega menú en cuanto el visitante pase el cursor por encima. Esto puede animar a los visitantes a explorar diferentes áreas de su sitio, por lo que es posible que desee utilizar “Hover” en las páginas de destino o en la página de inicio de su sitio web.

Después de tomar esta decisión, puedes cambiar cómo se abre el menú utilizando los ajustes de “Efecto”.

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

Si no quieres utilizar ninguna animación, simplemente abre el primer desplegable y selecciona ‘Ninguna’.

Por defecto, Mega Menu no utiliza animaciones en los dispositivos móviles, ya que los teléfonos inteligentes y las tabletas suelen tener menos capacidad de procesamiento. Sin embargo, si desea crear una animación única para los visitantes móviles, puede utilizar los ajustes del área “Efecto (móvil)”.

Si quieres probar tus mega menús en el móvil, consulta nuestra guía sobre cómo ver la versión móvil de los sitios de WordPress desde un ordenador de sobremesa.

Si ha elegido “Clic” en el menú desplegable “Evento”, asegúrese de seleccionar a continuación la pestaña “Avanzado”.

Aquí, puede utilizar ‘Click Event Behavior’ para definir lo que ocurre cuando el visitante hace clic en su mega menú. Por ejemplo, el segundo clic puede cerrar el menú o abrir un nuevo enlace.

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

Cuando esté satisfecho con la configuración del plugin, haga clic en “Guardar cambios”.

Para activar mega menús para más ubicaciones, simplemente siga el mismo proceso descrito anteriormente.

Personalice el aspecto de los mega menús en su sitio web

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

Para ello, seleccione la pestaña “Temas del menú” situada a la izquierda de la pantalla.

En esta pantalla, puede cambiar la dirección de los iconos de flecha, utilizar una altura de línea diferente, añadir una sombra, etc.

Cuando estés satisfecho con tus ajustes, no olvides hacer clic en “Guardar cambios”.

Si desea eliminar estos cambios en cualquier momento, sólo tiene que marcar la casilla “Restablecer estilo del widget” y, a continuación, hacer clic en “Guardar cambios.

A continuación, puede personalizar la barra de menú, que es la barra que ven los visitantes cuando el menú está en su estado por defecto, cerrado.

Para realizar estos cambios, haz clic en la pestaña “Barra de menús” y, a continuación, utiliza la configuración para cambiar el color de fondo, el relleno, el radio del borde, etc.

Incluso puede crear un degradado de color seleccionando dos colores diferentes en la sección “Fondo del menú”.

Si se desplaza hacia abajo, puede cambiar el aspecto del menú superior.

Esta es la primera fila de artículos, que es visible cuando el mega menú está en su estado cerrado.

Puesto que son tan importantes, es posible que desee hacer que los elementos del menú de nivel superior destaquen.

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

En la sección “Estado Hover” puede resaltar el elemento de menú de nivel superior seleccionado en ese momento.

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

Esto puede ayudar al visitante a ver en qué parte del menú se encuentra, lo que lo hace especialmente útil para los sitios que necesitan tener grandes mega menús.

Si añade un estado de desplazamiento, desplácese hasta la parte inferior de la pantalla y marque la casilla “Resaltar elemento / artículo actual”.

Después, puedes cambiar el aspecto del submenú.

Es el menú que aparece bajo un padre de nivel superior, como puede ver en la siguiente imagen.

Para personalizar el submenú, haga clic en la pestaña “Mega Menús”.

Ahora puede utilizar estos ajustes para cambiar el color de fondo del submenú, aumentar el radio para crear esquinas curvas, añadir relleno, etc.

Puedes añadir contenido a tus mega menús utilizando widgets. Por ejemplo, puedes añadir 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 determinados elementos del menú.

Puede personalizar el aspecto de estos widgets desplazándose a la sección “Widgets”. Por ejemplo, puedes cambiar el color del título del widget, aumentar el tamaño de la fuente, añadir relleno y ajustar la alineación.

En esta pantalla también puede personalizar el aspecto de los elementos de menú de segundo y tercer nivel en su sitio web, blog o mercado en línea. Estos elementos son los hijos de los elementos de menú de nivel superior.

Cuando construya sus menús, es posible añadir cuatro o más niveles para crear un mega menú anidado. Si lo hace, WordPress utilizará el estilo del tercer nivel para todos los niveles siguientes.

Puede verlo en acción en la siguiente imagen. El segundo nivel tiene texto rojo, y tanto el tercero como el cuarto utilizan el mismo texto azul.

Cuando estés satisfecho con cómo se ha establecido el menú, no olvides hacer clic en “Guardar cambios”.

Cómo añadir un Mega Menú a su sitio WordPress

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

Simplemente diríjase a la página Apariencia ” Menús desde la barra lateral de administración.

Si desea convertir un menú existente en un mega menú, abra el menú desplegable “Seleccionar un menú para editar” y elíjalo de la lista. Ten en cuenta que el menú que elijas debe estar asignado a una ubicación en la que hayas activado la característica de mega menú.

Si quieres empezar desde cero, haz clic en “Crear un nuevo menú” y escribe un título para tu nuevo mega menú.

A continuación, puede seleccionar la ubicación que desea utilizar y hacer clic en “Crear menú”. Una vez más, debe tratarse de una ubicación en la que hayas activado mega menús.

Añadir contenido a su menú de WordPress

Después, añade todas las páginas, posts, productos de WooCommerce y cualquier otro contenido que quieras incluir en el mega menú.

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

A continuación, tendrá que organizar los elementos en los elementos principales y submenús que desee utilizar en el megamenú. Para crear un submenú, arrastre un elemento debajo del elemento principal y, a continuación, arrástrelo ligeramente hacia la derecha antes de soltarlo.

Para crear varios niveles, simplemente arrastre los elementos hacia la derecha para que aparezcan con sangría unos debajo de otros. Esto es similar a crear un menú desplegable en WordPress.

Activar la característica Mega Menú

Una vez hecho esto, haga clic para ampliar la “Configuración de Max Mega Menu” y marque la casilla junto a “Activar”.

En este cuadro, también puede anular los ajustes por defecto del mega menú. Esto le permite crear mega menús únicos para diferentes áreas de su sitio web WordPress, así que adelante y haga los cambios que desee.

Después, haz clic en “Guardar”.

Crear la estructura / disposición / diseño / plantilla del Mega Menú

Ahora, al pasar el cursor sobre el primer elemento / artículo de nivel superior verás un nuevo botón ‘Mega Menú’. Adelante, haz clic en el botón.

Ahora verá todos los ajustes de este elemento / artículo de nivel superior.

Por defecto, Max Mega Menu utilizará el estilo flyout, donde los submenús ‘salen volando’ desde el lateral. Para crear un mega menú en su lugar, abra el menú desplegable ‘Sub menu display mode’ y elija ‘Standard Layout’ o ‘Grid Layout.’

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

Por su parte, la disposición en cuadrícula permite organizar los elementos del submenú en columnas y filas.

Es ideal si desea mostrar mucho contenido, como todos los productos digitales de su tienda en línea, o si tiene en mente un diseño muy específico.

Tras seleccionar la estructura / disposición / diseño / cuadrícula, verá todos los submenús asignados a este padre.

Ahora, puede seguir adelante y cambiar la forma en que estos elementos están dispuestos en el mega menú.

Si utiliza la estructura / disposición / diseño / plantilla estándar, puede cambiar el número de columnas utilizando el menú desplegable de la esquina superior derecha.

Si utiliza una disposición de cuadrícula, puede añadir columnas y filas con los botones “+Columna” y “+Fila”.

Cuando esté satisfecho con la estructura / disposición / diseño / plantilla, puede arrastrar y soltar los elementos del submenú en diferentes columnas y filas.

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 imagen siguiente, ambas columnas ocupan la mitad del espacio disponible.

Para cambiar el tamaño de un elemento, basta con hacer clic en sus botones de flecha para aumentar o reducir la fracción.

Crear un mega menú compatible con dispositivos móviles (solo disposición 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 las estructuras / disposición / diseño / plantilla de cuadrícula, ya que los teléfonos inteligentes y las tabletas suelen tener pantallas más pequeñas, y el desplazamiento horizontal puede ser difícil.

Si utilizas la estructura / disposición / diseño / plantilla de cuadrícula, puedes crear mega menús diferentes para dispositivos móviles. Por ejemplo, puedes utilizar menos columnas para que los usuarios no tengan que desplazarse horizontalmente. De este modo, puedes crear un menú de WordPress adaptado a dispositivos móviles.

Puedes ocultar columnas o filas enteras con el icono “Oculto en móvil”, que parece un pequeño teléfono móvil.

Basta con activar y desactivar el conmutador para ocultar y mostrar contenidos diferentes en el escritorio y en el móvil.

Añadir contenido enriquecido con widgets Mega Menu

Una vez hecho esto, puedes empezar a añadir widgets al mega menú. Esto te permite mostrar contenido extra en el submenú, como comentarios recientes, vídeos, galerías y mucho más.

Por ejemplo, puede utilizar imágenes para promocionar una venta en su tienda en línea o destacar sus últimos productos.

Para añadir un widget, basta con hacer clic para abrir el menú desplegable “Seleccionar un widget….”.

Ahora puede elegir un widget de la ficha.

WordPress añadirá el widget a una columna o fila automáticamente, pero usted puede moverlo a una nueva ubicación usando arrastrar y soltar.

Para configurar el widget, sigue adelante y haz clic en su pequeño icono de llave inglesa.

Esto abre una ventana emergente donde puedes añadir contenido al widget y cambiar sus ajustes.

Verás diferentes opciones dependiendo del tipo de widget que estés creando. Por ejemplo, si añades un widget reproductor de música de audio al mega menú, verás ajustes en los que puedes subir una pista de audio.

Todos los widgets tienen un campo “Título” en el que puedes añadir un texto que aparecerá encima del widget.

Cuando haya terminado, haga clic en “Guardar” para guardar los cambios y, a continuación, seleccione “Cerrar”. Para añadir más widgets al mega menú, sólo tienes que seguir el mismo proceso descrito anteriormente.

Reseña / valoración de los ajustes por defecto del Mega Menú

A continuación, basta con hacer clic en la pestaña “Ajustes”.

Aquí puede utilizar casillas de verificación para ocultar o mostrar distintos contenidos en el submenú.

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

Si realiza algún cambio en los ajustes por defecto, no olvide hacer clic en “Guardar cambios”.

Añadir iconos de imagen al Mega Menú de WordPress

Los iconos de imagen ayudan a los visitantes a entender de qué trata un elemento / artículo del menú, sin ni siquiera tener que leer la etiqueta de navegación. Esto resulta especialmente útil en los menús grandes, en los que el visitante puede preferir explorar el contenido rápidamente en lugar de leer cada etiqueta de navegación.

Puede utilizar iconos para destacar el contenido más importante. Por ejemplo, puede animar a los visitantes a finalizar su compra añadiendo un icono de carrito al menú “Finalizar compra”.

Para añadir iconos de imagen a su menú de navegación, haga clic en la pestaña “Icono”.

Ahora puede elegir cualquier icono de guión de la biblioteca incorporada o utilizar su propia imagen. Si actualiza a Max Mega Menu Pro, entonces también tendrá acceso a otras fuentes de iconos, Genericons y FontAwesome.

Termine de configurar el Mega Menú en su sitio WordPress

Después de realizar todos estos ajustes, puede cerrar la ventana emergente para volver a la página principal de Apariencia ” Menús.

Ahora puede repetir este proceso para cada nivel superior.

Cuando esté satisfecho con la configuración del megamenú, haga clic en el botón Guardar menú para activarlo.

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

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.