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

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

Recientemente, uno de nuestros lectores preguntó si es posible agregar un mega menú a su sitio de WordPress. Los mega menús le permiten agregar menús desplegables de varias columnas a su navegación con medios enriquecidos, como imágenes y videos. En este artículo, le mostraremos cómo agregar fácilmente un mega menú a su sitio de WordPress.

Por qué y quién debería agregar un mega menú en WordPress?

Los mega menús son particularmente útiles para sitios web con mucho contenido. Esto permite a los propietarios de sitios web mostrar más elementos en su menú superior.

Los sitios web populares como Reuters, Buzzfeed y Starbucks utilizan mega menús para mostrar menús de navegación interactivos y muy atractivos..

Si bien los menús de navegación de WordPress predeterminados le permiten agregar submenús desplegables e incluso agregar íconos de imagen junto a cada elemento, a veces solo necesita un mega menú.

Echemos un vistazo a cómo agregar fácilmente un mega menú a su sitio web de WordPress.

Video Tutorial

Suscribirse a WPBeginner

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Añadiendo un Mega Menú en WordPress

Lo primero que debes hacer es instalar y activar el complemento Max Mega Menu. Es el mejor plugin de WordPress de mega menú gratuito disponible en el mercado. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, el complemento agregará un nuevo elemento de menú, Mega Menú, a su menú de administración de WordPress. Haciendo clic en él te llevará a la página de configuración del complemento..

La configuración predeterminada funcionará para la mayoría de los sitios web. Sin embargo, deberá cambiar los colores del menú para que coincidan con los colores utilizados por el contenedor del menú de navegación de su tema de WordPress..

Para saber qué colores se utilizan en su tema, puede usar la herramienta Inspeccionar en su navegador.

Una vez que obtenga el código hexadecimal de color, puede pegarlo en un archivo de texto para usarlo más adelante..

A continuación, debe visitar la página de configuración del mega menú, haga clic en la pestaña 'Temas del menú' y luego haga clic en la sección 'Barra de menú'.

Aquí puede reemplazar el color de fondo utilizado por el mega menú para que coincida con el contenedor del menú de navegación de su tema.

No olvide hacer clic en el botón Guardar cambios para almacenar su configuración..

Ahora que hemos configurado los ajustes del mega menú, sigamos adelante y creemos nuestro mega menú.

Primero necesitas visitar el Apariencia »Menús página y luego agregar elementos de nivel superior a su navegación. Para obtener instrucciones detalladas, consulte nuestra guía para principiantes sobre cómo crear menús de navegación en WordPress.

A continuación, en la pantalla de menús, debe habilitar el mega menú marcando la casilla debajo de "Configuración del menú Mega máximo".

Después de eso, debe llevar el mouse a un elemento del menú y verá que aparece el botón "Mega Menú" en la pestaña de menú..

Al hacer clic en el botón aparecerá una ventana emergente. Aquí puede agregar cualquier widget de WordPress a su mega menú y seleccionar el número de columnas que desea mostrar.

También puede hacer clic en el icono de llave inglesa en un widget para editar la configuración del widget. No olvide hacer clic en el botón Guardar para almacenar la configuración de su widget.

Una vez que haya terminado, puede cerrar la ventana emergente y visitar su 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 WordPress. También puede consultar nuestra guía sobre cómo acelerar WordPress y aumentar el rendimiento para principiantes..

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..