Tutorial paso a paso: Cómo crear Mega Menús avanzados con Elementor

Los mega menús pueden hacer que sea mucho más fácil para los usuarios navegar por tu sitio con menos clics. Hoy te contaremos cómo hacer que tus menús sean más funcionales e informativos con la ayuda de Mega menús. Este tutorial te ayudará a añadir cuadrículas (grids) de productos, entradas de blog e incluso mapas y formularios de contacto al mega menú en tu sitio web de WordPress, y hacerlo usando el constructor de páginas web Elementor.

Otras herramientas útiles que puedes utilizar son los plugins JetMenu y JetElements. JetMenu es un complemento de primera clase que te permite crear un mega menú con la ayuda de Elementor page builder. Con JetMenu puedes agregar contenidos a tu menú, utilizando cualquier widget necesario, y personalizarlo según tus necesidades. El complemento JetElements te ofrece una gran variedad de módulos para crear sitios web de alta calidad.

Da los siguientes pasos simples y disfruta del resultado:

  1. Después de que instales y actives el complemento JetMenu en tu sitio web, abre el panel de control de WordPress y haz clic en la pestaña Apariencia > Menús. Puedes tanto seleccionar uno de los menús ya existentes y editarlo, como crear un nuevo menú y luego crear un mega menú para uno o varios sus elementos. El menú de configuración te permite especificar la posición del mega menú y establecer el ancho personalizado para algún elemento en particular. La pestaña Icono te deja elegir el color del icono. La pestaña Etiquetas permite dar nombre a una etiqueta, establecer el color de esta etiqueta y su color de fondo. Con la ayuda de la pestaña Varios puedes ocultar la etiqueta de navegación del elemento y aplicar el relleno personalizado a los elementos. Si estás trabajando con menús verticales, es posible que también debas configurar algo en la pestaña Vertical.
  2. En la pestaña Contenido cambia la opción Mega Submenú Habilitado a Sí. A continuación, haz clic en la opción Editar elemento del Megamenú para que se abra el editor de Elementor. Puedes usar cualquier widget para construir un mega menú. Puedes elegir entre cabeceras, sliders, layouts de cuadrículas de productos, layouts de entradas, videos, etc.
  3. Busquemos el widget de Entradas. Colócalo en el área central y comienza a trabajar en él. Ya que utilizamos el tema de WordPress Monstroid2, podemos utilizar el botón Magic button para obtener acceso a una gran colección de secciones e iconos listos para usar. Al hacer clic en Secciones > Blog podrás ver diferentes layouts de blog. Puedes elegir cualquiera de ellos y asignarlo a tu página. Si no estás utilizando el tema de WordPress Monstroid2, pero has descargado el complemento JetElements, puedes acceder a Plantillas en el menú Elementor > Bloques y elegir cualquier elemento listo para usar de la lista desplegable. Los diseños preestablecidos están disponibles para cada widget en particular allí. El layout de cuadrícula de entradas también se puede insertar en la página. Una vez hecho esto, puedes diseñar la sección de entradas (cambiar fuentes, colores, fondos) a tu gusto. Asegúrate de que esta sección tiene algún color de fondo. Si no estableces ningún fondo (el menú Estilo), será transparente. Finalmente, haz clic en Actualizar, regresa y Guarda, cierra la ventana y haz clic en Guardar menú. No dudes en comprobar el resultado después.
  4. El siguiente paso es crear una página de contacto. Para hacer esto, haz clic en Páginas para crear una nueva página. Selecciona Contacto y haz clic en Añadir al menú. Cuando se agrega la página, haz clic en el botón JetMenu y ajusta la configuración. En la pestaña Contenido cambia la opción Mega Submenú Habilitado a Sí. A continuación, haz clic en Editar el elemento del menú para acceder al editor de Elementor. Busca el módulo Mapa avanzada. Edita la configuración del módulo Mapa avanzada y especifica la ubicación, ajusta la rueda de desplazamiento y los controles de zoom, etc. La sección Estilo del mapa te permite cambiar la altura del mapa y el estilo del mapa. Añade un par de pines con la ayuda de la sección de pines.
  5. Selecciona el widget Contact Form 7 para continuar trabajando en tu formulario de contacto. Como puedes ver, tiene un diseño predeterminado. Utiliza el botón Magic button de nuevo y elige el mejor diseño para tu sitio en el menú Secciones. A continuación, haz clic en Insertar para que este diseño aparezca en tu página. Después, puedes personalizar el aspecto de tu página de contacto. Experimenta con el fondo, el relleno, las fuentes del formulario, y no te olvides hacer clic en Actualizar después de acabar con la edición. Regresa, haz clic en Guardar, cierra la ventana y haz clic en Guardar menú. Actualiza tu página de inicio y observa el resultado.
  6. Para crear una sección de colección de productos, necesitas el complemento JetWooBuilder. Si estás utilizando JetElements, tendrás acceso a los widgets de WooCommerce. Simplemente arrastra y suelta el widget en el centro y comienza la personalización. Configura la cantidad de productos por página, su orden, los títulos, etc. Haz clic en Guardar y luego en Guardar menú, abre la página de inicio y actualízala para ver los cambios.

Con los complementos JetMenu y JetElements es muy rápido y fácil incluir entradas de blog, cuadrículas de productos e incluso una página de contacto con el mapa de Google en la página de inicio de tu sitio web. Esperamos que te guste este tutorial. ¡No dudes en experimentar para construir un sitio web completamente funcional!

Fuente: "How to Create Advanced Mega Menus with Elementor Page Builder" por Natalia