Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En este artículo, exploraremos el plugin WP Mega Menu que te permite crear menús de navegación ricos en contenido en tu sitio WordPress. Vamos a revisar los diferentes aspectos de este plugin y también, como demostración, vamos a construir un ejemplo del mundo real.
Cómo crear un menú sticky o "pegajoso" en WordPress
Cómo crear un menú desplegable en WordPress
UberMenu y otros 7 otros mejores plugins de mega menú
Mejores prácticas para las barras de navegación en WordPress
¿Por qué usar un mega menú?
La navegación de un sitio es uno de los aspectos más importantes que debes abordar durante el desarrollo de tu sitio web. Según sea el tipo de tu sitio web, existen un montón de distintas opciones disponibles que podrías elegir. La navegación puede variar desde un sencillo menú de barra simplificado hasta un menú desplegable formado por varias columnas que podría contener mucha información en el propio menú. Hoy, vamos a hablar de uno de estos tipos de menú que es una opción muy popular hoy en día: un mega menú. Lo discutiremos en el contexto de WordPress.
Como propietario de un sitio o experimentado desarrollador de WordPress, ya sabrás que proporciona una gran cantidad de plugins para casi todas las características que uno pueda pensar, y podría resultar difícil elegir cuál usar. Y cuando se trata de crear menús de navegación, encontrarás un montón de plugins en la tienda de plugins de WordPress. Entre ellos, he elegido uno de los mejores de esta categoría: WP Mega Menu.
El plugin WP Mega Menu te permite crear menús de navegación enriquecidos que podrían contener desde enlaces simples a imágenes, videos y widgets. A lo largo de este tutorial, vamos a ir a través de los diferentes aspectos de este plugin.
Para este artículo, he utilizado WordPress 5.1. Para instalar el plugin WP Mega Menu, debes seguir el proceso de instalación de plugins estándar en WordPress.
En las próximas secciones, exploraremos los ajustes básicos del plugin WP Mega Menu junto con el proceso de configuración. Construiremos un ejemplo del mundo real a modo de demostración. Mientras tanto, también veremos algunos importantes ajustes de este plugin que te permiten crear diferentes tipos de menús.
¿Qué es el plugin WP Mega Menu?
El plugin gratuito WP Mega Menu te permite crear menús de navegación ricos en contenido en tu sitio de WordPress. Es un plugin muy fácil de usar que proporciona una interfaz de arrastrar y soltar en el back-end para crear rápidamente menús de navegación.
Además, proporciona gran cantidad de opciones de personalización para aplicar estilos a los menús de forma diferente, y por lo tanto, puedes personalizar el aspecto de tus menús desde el propio back-end. Y no, ¡no necesitas ser un experto en CSS!
Echemos un vistazo rápido a las características que proporciona:
- panel de construcción de menús de arrastrar y soltar
- soporte para widgets
- soporta diferentes temas y apariencias para su interfaz
- soporte para menús responsivos y preparados para dispositivos móviles
- iconos para redes sociales, Dashicons y Font Awesome
- exportación e importación de temas
- y mucho más
Como se puede ver, el plugin WP Mega Menu proporciona una gran cantidad de útiles características que podrías utilizar para construir hermosos y atractivos menús de navegación de varias columnas en tu sitio de WordPress. Y con soporte de widgets incorporados, te permite incluir probablemente cualquier cosa en el propio menú desplegable que se te pueda ocurrir. Si estás creando un sitio de portal y quieres construir un menú de navegación desplegable rico en contenido, ¡este es un plugin imprescindible!
En la siguiente sección, explicaremos algunos ajustes básicos de este plugin que es importante que entiendas si deseas utilizar este plugin de manera eficaz.
Exploración de la configuración del plugin
Después de instalar el plugin WP Mega Menu, deberías ver los enlaces relacionados con el plugin en la barra lateral izquierda. En esta sección, revisaremos brevemente cada sección.
Ajustes globales
En esta sección, puedes configurar los ajustes que se aplican globalmente a todos los menús que se crean con este plugin. Entre los diferentes ajustes, te permite configurar ciertos comportamientos de JavaScript y configuraciones CSS globales.
Temas del menú
Esta sección te permite configurar ajustes específicos del tema. El tema predeterminado viene integrado en el plugin, y en general podrías vivir con eso, ya que ya viene útiles con ajustes. Aparte de eso, podrías crear tus propios temas o duplicar temas existentes. Si deseas crear varios temas, podrías aplicar diferentes estilos a distintos menús en tu sitio.
Con cada nuevo tema, podrás controlar diferentes aspectos de tus menús, como el color de fondo, la configuración de fuentes, el espaciado, los efectos del menú y mucho más. De hecho, esta es la sección que más utilizarás al configurar tus menús.
Además, también puedes exportar temas creados en tu sitio e importarlos a otros sitios. Esto es realmente útil, ya que significa que no tienes que crear temas de nuevo si quieres copiar temas de tus otros sitios.
En la siguiente sección, crearemos un ejemplo de un mega menú del mundo real.
Construir un mega menú para tu sitio de WordPress
En esta sección, crearemos un ejemplo del mundo real para demostrar cómo usar este plugin para crear un mega menú en tu sitio WordPress. En nuestro ejemplo, vamos a crear un mega menú desplegable de tres columnas, y cada columna colocaremos un tipo diferente de contenido.
Antes de continuar, asegúrate de haber instalado este plugin en tu sitio WordPress si deseas seguir este tutorial.
Crear el menú y los elementos de menú
En primer lugar, tenemos que crear un menú estándar y añadir en él elementos de menú. Y sólo después de eso, podremos proceder con la configuración del mega menú. Accede al vínculo Apariencias > Menú desde la barra lateral del escritorio para crear un nuevo menú. Sigue el proceso estándar para crear un nuevo menú y añadir un par de elementos en él.
En mi caso, lo llamaré Demo Mega Menu. También he añadido un par de enlaces personalizados como se muestra en la siguiente captura de pantalla. Además, tienes que asignar a este menú recién creado una Ubicación de visualización para indicar donde se mostrará el menú. Seleccionemos el Menú superior en el campo Ubicación de visualización. Debería tener un aspecto similar a esto.
Es importante tener en cuenta que dado que existe un bloque Mega Menu Settings (ajustes de mega menú) en el lado izquierdo tal y como se muestra en la anterior captura de pantalla. Desde este panel puedes seleccionar el tema que deseas utilizar y después hacer clic en el botón Guardar para guardarlo. Yo he seleccionado el tema classic-blue en mi caso.
Configurar los enlaces del menú
Ahora, es el momento de configurar los ajustes del mega menú para los enlaces de menú. En nuestro caso, crearemos un mega menú para el enlace Home, pero por supuesto, podrías seguir adelante y repetir el mismo proceso para crear también mega menús para los restantes enlaces.
Si pasas el cursor por el enlace Home, deberías poder ver el enlace WP Mega Menu tal y como se muestra en la siguiente captura de pantalla.
Haz clic en ese enlace, y se abrirá una ventana emergente que te permite configurar los ajustes del mega menú para el enlace Home.
Activa la opción Mega Menu y te mostrará una gran cantidad de opciones de configuración. Al hacer clic en el botón Add Row (añadir fila), podrás seleccionar el diseño que desees utilizar para crear el mega menú tal y como se muestra en la siguiente captura de pantalla.
En mi caso, he seleccionado el diseño de tres columnas como se muestra en la captura de pantalla anterior. Y eso te presentará la siguiente interfaz de usuario que usaremos para añadir diferentes tipos de contenido.
En el lado izquierdo, puedes ver que hay una sección de widgets que enumera los diferentes tipos de widgets que puedes usar. Puedes arrastrar el widget que quieras usar y soltarlo en las columnas que hemos creado.
Para mi mega menú, yo he utilizado tres widgets, Categories (categorías), Archive (archivo) y Text (Texto).
Por supuesto, tu puede seleccionar widgets distintos según sean tus necesidades. Después de seleccionar los widgets, configura cada uno de ellos como desees y guárdalo todo una vez hayas terminado con los ajustes.
Ahora, vamos a visitar el front-end para ver cómo se ve.
Como puedes ver, el plugin WP Mega Menu ha convertido un menú simple en un mega menú desplegable. Y muestra todo lo que hemos configurado desde el back-end.
De esta manera, puedes activar la configuración del mega menú para todos y cada uno de los enlaces del menú. Con la compatibilidad con widgets, podrás mostrar casi cualquier tipo de contenido en el propio menú desplegable. Sigue adelante y experimenta las diferentes opciones y si tienes cualquier duda cuéntamelo.
Así es como puedes crear impresionantes mega menús para tu sitio usando este plugin gratuito.
El siguiente paso: Mega menús más avanzados
Lo que hemos discutido hoy es una versión gratuita del plugin WP Mega Menu. Aunque, estoy de acuerdo en que ya proporciona un montón de útiles características en la versión gratuita, pero si realmente te ha gustado lo que has visto hasta ahora, te recomendaría que mires su contraparte de pago: WP Mega Menu Pro. Viene con gran cantidad de profesionales temas incorporados que pueden conseguir que consigas el menú que deseas de inmediato. Dado su bajo coste, realmente vale la pena darle una oportunidad.
Y ya que estás aquí, ¡echa un vistazo a algunos de nuestros otros artículos sobre los menús de WordPress!
Cómo crear un menú sticky o "pegajoso" en WordPress
Cómo crear un menú desplegable en WordPress
UberMenu y otros 7 otros mejores plugins de mega menú
Mejores prácticas para las barras de navegación en WordPress
Conclusión
Hoy, hemos visto cómo puedes crear increíbles mega menús usando el plugin WP Mega Menu en WordPress. Me encantaría saber de ti y, si te apetece, comparte con nosotros tus experiencias sobre otros plugins de menú que hayas utilizado en tu sitio web.
¡Siéntete libre y comparte tu opinión y comentarios en el feed de aquí abajo!
By
