Saltar al contenido
Usted está en: Portada » Cómo crear Mega Menu con Elementor 2021 Utilizando el menú de navegación!

Cómo crear Mega Menu con Elementor 2021 Utilizando el menú de navegación!

Es por eso que en esta guía, te mostraremos cómo crear mega menús con Elementor y El menú de navegación de Elementor.

¿Usas Elementor y quieres crear un megamenu a tu sitio? ¡Has venido al lugar correcto! En esta guía, le mostraremos cómo crear un megamenu con Elementor usando el Menú de Navegación. Si prefieres puedes ver este video tutorial. También puedes descargar gratis Plantillas para Elementor.

Los mega menús son muy populares hoy en día. Estos menús enriquecidos te ayudan a mejorar la navegación en tu sitio, lo que facilita a los usuarios navegar por tu contenido y encontrar lo que están buscando.

Estos menús fáciles de usar son especialmente útiles para las empresas en línea y las tiendas de comercio electrónico que tienen muchas categorías y productos.

Si ese es su caso, le recomendamos crear un megamenu a su sitio utilizando Elementor. Como tienen muchas opciones y enlaces, los mega menús parecen difíciles de crear.

Sin embargo, con Elementor, puedes agregar y administrar todo el contenido de tu mega menú en solo unos minutos. Es por eso que en esta guía, te mostraremos cómo crear mega menús con Elementor y El menú de navegación de Elementor.

¿Por qué crear un MegaMenu con Elementor?

Anteriormente hemos cubierto las necesidades de usar un mega menú para su sitio web de WordPress y sus muchas ventajas, como la comodidad, la comodidad y la navegación del sitio. Pero, ¿por qué usar Elementor en particular para agregar un mega menú?

Elementor es uno de los constructores de páginas de arrastrar y soltar más populares que existen. La cantidad de facilidad que tiene con Elementor en términos de personalización del sitio y creación de elementos es inigualable.

Además, su profundo nivel de integración con WooCommerce, Elementor, le permite crear el megamenu perfecto para su tienda. Puede integrar fácilmente páginas de WooCommerce, artículos de la tienda, páginas de carrito y mucho más suavemente para proporcionar a sus usuarios la mejor experiencia de compra.

Además, Elementor ofrece una gran cantidad de opciones para habilitar un megamenu para que pueda elegir el que mejor se adapte a sus necesidades.

Para esta guía, usaremos el menú de navegación. Por lo tanto, echemos un vistazo a los pasos básicos que debe seguir para crear un mega menú con Elementor y cómo puede habilitar el menú Nav.

Cómo crear un megamenu con Elementor usando Nav Menu

Para crear un Mega Menu con Elementor, te recomendamos que utilices Nav Menu. Es la solución Mega Menu de Elementor que está disponible de forma gratuita. Pero antes de que pueda usarlo, debe configurar un diseño de menú simple que pueda integrar con el menú de navegación.

Crear un menú

Comencemos con el proceso de creación del menú correcto para su sitio web. Primero, abra su Panel de administración de WordPress y vaya a Apariencia > Menús.

En la pantalla de creación del menú, puede personalizar el menú actual o crear uno nuevo. Vamos a crear un nuevo menú pulsando Crear un nuevo menú.

Luego, dale un nombre a tu Mega Menú y haz clic en el botón Crear Menú.

Es posible que se le pida una ubicación de menú, pero como usaremos nuestro menú Elementor Mega, no configure ninguna ubicación de menú. También puede quitar cualquier menú de las ubicaciones de menú de la ficha Ubicaciones de menú.

Ahora, para agregar páginas o publicaciones a su mega menú, simplemente seleccione las páginas o publicaciones que desea agregar a su mega menú y haga clic en Agregar al menú.

También puede agregar sus productos WooCommerce al menú, así como categorías de productos específicos, etiquetas e incluso puntos finales de WooCommerce como la página Cuenta y otros.

Por ahora, vamos a crear un mega menú de tienda simple con solo productos WooCommerce y páginas cruciales de WooCommerce.

Hemos agregado todos los elementos correctos, pero el menú aún no está listo, así que vamos a personalizarlo arrastrando y soltando algunos elementos. Vamos a agregar un elemento de menú de URL personalizado que vincula el menú Blog con las entradas de blog más populares.

Además de eso, agreguemos una lista desplegable en la página Tienda con todos los productos de la Tienda.

Sigue adelante y arrastra todos los Productos WooCommerce bajo el elemento Producto y todas las páginas del blog bajo el elemento Blog para hacer un menú desplegable eficiente. Puede elegir el orden de los blogs / productos simplemente arrastrándolos y soltándolos.

Ahora que hemos configurado nuestro menú principal, sigamos adelante y guárdelo haciendo clic en el botón Guardar menú.

Configuración del menú de navegación para Elementor

Ahora que hemos agregado el menú, es hora de comenzar a construir el menú Mega en Elementor. Para ello, vamos a crear una nueva plantilla. Vaya a su panel de administración de WordPress > Plantillas > Agregar nueva plantilla. A continuación, seleccione el Tipo de plantilla como Encabezado, asígnele un nombre y haga clic en Crear plantilla.

Luego, presione el botón Agregar nueva sección en el área Arrastrar widget aquí. Aquí, deberá seleccionar su estructura. Hay varias opciones para elegir dependiendo del menú que desea construir, pero por ahora, usaremos una estructura 1×1.

Ahora, use la barra lateral izquierda y haga clic en el icono de cuadrícula en la parte superior derecha de la barra lateral. Esto le llevará a la pantalla de selección de widgets. A continuación, utilice la barra de búsqueda para buscar el menú de navegación y arrastre este widget al área de widgets recién creada.

Ahora, bajo el diseño, tendrás que elegir qué menú usar para tu Elementor Mega Menu. Utilice la opción de menú y seleccione el menú que acaba de crear para el widget. Y eso debería configurar su menú. Sin embargo, hay mucho más que puedes hacer con Elementor y el menú de navegación.

Por lo tanto, sigamos adelante y agreguemos algunas animaciones y características más a su mega menú. Tambien puedes ver nuestra guía: Cómo crear MegaMenus avanzados con Elementor y JetMenu

Personalización de su MegaMenu con Elementor

Al hacer clic en el mega menú en Elementor le llevará instantáneamente a sus opciones de personalización en la barra lateral izquierda. Sigamos adelante y cambiemos algunas opciones.

Por un lado, puede elegir la alineación de los elementos del menú para adaptarse mejor a su sitio web. También puede agregar un puntero personalizado en el elemento de menú que se mostrará cuando los usuarios desplacen el mouse sobre los elementos de menú.

Además, hay varias opciones que puede seleccionar e incluso incluir una animación personalizada para cada puntero para agregar un poco de encanto a su mega menú Elementor.

También puede elegir diferentes iconos para los indicadores del submenú.

Video tutorial: Como Crear MegaMenu con Elementor

Ver: Los 23 mejores themes y plantillas elementor Como Crear un menú fuera del lienzo (off canvas) con Elementor

Optimizando tu Mega Menu para móviles con Elementor

Teniendo en cuenta cuántos usuarios navegan por Internet desde sus teléfonos móviles, es una buena idea personalizar opciones adicionales para optimizar su mega menú para la visualización móvil.

Esto incluye agregar un botón de hamburguesa para abrir su menú Mega, cambiar las alineaciones del menú, así como el botón de hamburguesa.

Una vez que haya terminado de personalizar su Elementor Mega Menu, haga clic en Publicar, y tendrá que proporcionar una condición de visualización. Esta opción le permite elegir dónde desea mostrar la plantilla recién creada y todos sus diseños. Dado que queremos que este mega menú aparezca en todo nuestro sitio, seleccionaremos la opción para mostrarlo en todo el sitio web.

Por lo tanto, presione Agregar condición y elija la opción Todo el sitio en Incluir. A continuación, haga clic en Guardar y cerrar, y la plantilla debe mostrarse en todo el sitio.

Por supuesto, con Elementor, puede elegir ocultar o mostrar el mega menú en páginas específicas. Todo lo que necesita hacer es agregar la condición para excluir o incluir las páginas.

Por ejemplo, para agregar más opciones, haga clic en el botón Guardar opciones junto al botón Publicar y presione Condiciones de visualización. Puede agregar otra condición para excluir el menú en otra página específica y la plantilla se ocultará en consecuencia.

Eso es solo la punta del iceberg. Hay muchas otras cosas que puedes hacer con Elementor para mejorar tu mega menú. Así que ahora, sigue adelante y juega con tu mega menú para aprovecharlo al máximo en tu sitio.

Palabras finales

Con todo, los mega menús son excelentes herramientas para mejorar la navegación en su sitio web. Le permiten mostrar muchas categorías y productos de una manera organizada para ayudar a los usuarios a navegar por su contenido.

Para agregar un mega menú a su sitio, puede usar un complemento o seguir nuestra guía y crear un Mega menú con Elementor. Si decide crearlo usted mismo, la opción de menú nav mega incorporada de Elementor es sin duda la mejor para ayudarlo a hacer el trabajo de manera eficiente.

El plugin es simple, no toma mucho tiempo para configurar y personalizar, y es muy fácil de usar.

Por lo tanto, para resumir el proceso, vamos a anotar las cosas que debe hacer para configurar su mega menú Elementor:

    Crea y personaliza tu menú de WordPress

    Crea una plantilla de encabezado y agrega tu widget de mega menú a ella

    Personaliza tu widget de mega menú

    Agregar condiciones de presentación a la plantilla de encabezado y publicarla

Y eso debería configurar su mega menú. Nav Menu no es la única opción para su widget de mega menú. Hay otros plugins de menú / widgets que podrían adaptarse mejor a sus necesidades. Si bien nav menu es simple, mínimo y muy fácil de usar, carece de características más avanzadas.

Si está comenzando con mega menús, Nav Menu es una excelente opción. Sin embargo, si quieres funcionalidades más avanzadas, te recomendamos QuadMenu. Agrega todas las características que obtienes con Nav Menu con aún más opciones de personalización.

Todo, desde opciones específicas relacionadas con dispositivos móviles hasta personalización a todo color y fondo y elementos e iconos adicionales para agregar a su sitio web. Del mismo modo, otros plugins como Clever Mega menu ofrecen aún más opciones para incluir artículos de la tienda y hacer que su sitio web sea más acompañante.

5/5 - (8 votos)

Deja una respuesta

error: Content is protected !!