Cómo crear un mega menú con Elementor y ElementsKit

¿Te imaginas un sitio web grande sin un mega menú? 
¡De ninguna manera!

Las personas son cada vez más exigentes con el tiempo que pasan en línea. Un estudio reciente muestra que  94% de usuarios web Dicen que la navegación sencilla es la característica más útil de un sitio web.
Casi todos, ¿verdad?

Para aumentar la usabilidad y la capacidad de involucrar al usuario, el mega menú juega un papel vital en la mejora de las personas. Un mega menú simple pero funcional alentará a los usuarios a explorar aún más áreas de su sitio web y tomar medidas al instante.

Incluso los sitios web de comercio electrónico más importantes, como Amazon y eBay, utilizan mega menús para ayudar a los usuarios a recorrer toda la navegación de un sitio web en un solo menú. 

No solo un sitio web de comercio electrónico, sino que un mega menú también es una excelente opción para cualquier sitio web de noticias, revistas, editores de contenido, empresas y más. 

Al crear un sitio web grande con múltiples categorías y subcategorías, Megamenu es un gran menú expandible de varias columnas donde todo es visible a la vez.
¡Estoy seguro de que me vienen a la mente tantas necesidades! ¿Bien? 

No te preocupes… Aquí te ayudaré a obtener todas las respuestas a tus consultas y al final de este artículo, aprenderás cómo crear tu propio mega menú con facilidad. 

Presentamos el megagenerador de menús ElementsKit

Usando las funciones ricas Generador de megamenús ElementsKit puedes crear y personalizar cualquier tipo de Megamenú con una interfaz de contenido en vivo de Elementor. 

Obtendrá variaciones en el mega menú, como el menú de navegación y el mega menú vertical, junto con muchas opciones de personalización. 

En general, ElementsKit Elementor Mega Menu es un creador de menús repleto de funciones para su sitio profesional. 

¿Cómo crear un mega menú con Elementor? 

Elementor te ofrece muchas funcionalidades para diseñar tu mega menú, pero para obtener funcionalidades adicionales puedes utilizar un complemento de terceros.

Exacto, necesitas Kit de elementos. Aunque hay tantos complementos para crear un mega menú, ElementsKit admite diferentes tipos de mega menús, incluido el mega menú vertical, el mega menú horizontal y muchas más opciones de personalización.

Aquí te mostraremos en detalle el proceso paso a paso para crear un mega menú completamente funcional.

Lo que necesitas para crear un megamenú con Elementor

Para seguir este blog tutorial, necesitarás dos cosas–>

• Elementor
• Kit de elementos

O siga las instrucciones paso a paso:

Cerciorarse Megamenú el módulo es EN de Kit de elementos → MÓDULOS.

Paso #1: Agregar menú

• Haga clic en Crear un nuevo menú.
• Proporcionar Nombre del menú=> Verifique el Caja=> Crear menú.
• Haga clic en Enlace personalizado=> Proporcionar Enlace y Agregar elementos de menú del mismo modo.

Paso #2: Personalizar el contenido del megamenú

Marque la casilla de verificación "Habilite este menú para el contenido del Megamenú" => Haga clic en el Mega menú con icono de configuración en qué elemento del menú desea agregar el mega menú.

• Se abrirá una ventana emergente, cambie el Megamenú opción, y Ahorrar. Después de eso, haga clic ene EDITAR CONTENIDO DEL MEGAMENÚ botón.

Elegir la plantilla

• Haga clic en el kit de elementos Ícono de biblioteca de plantillas, luego navegue hasta Encabezados.
• Haga clic en Encabezamiento=> Contenido del mega menú=> Insertar cualquier Megamenú.

Control Disposición

• Editar la sección interior haciendo clic en la sección punteada.
• Cuadro de ancho de contenido: personalice el ancho de su contenido arrastrando hacia la derecha o hacia la izquierda.
• Contenido de ancho completo: Seleccionar Ancho completo.

Seleccionar Espacio de columna

• Espacio de columna=> Seleccione su espacio entre columnas de desplegable.

Elija la posición

• Altura: seleccione su altura arrastrando de izquierda a derecha.
• Alineación vertical: seleccione Alineación vertical en el menú desplegable.
• Desbordamiento: seleccione Desbordamiento predeterminado u Oculto.

Seleccionar Etiqueta HTML

• Selecciona tu Etiqueta HTML de Desplegable.

Personalizar mega menú Texto del encabezado

• Seleccionar tipo de icono.
• Habilitar para agregar icono.
• Cargar icono de encabezado.
• Agregar o editar título.
• Agregar Editar descripción.

Personalizar texto

• Agregar o editar texto.
• Agregar o editar subtítulo.
• Habilitar para mostrar etiqueta.
• Agregar o editar etiqueta.
• Personalizar color de fondo, tipografía, relleno, alineación y radio.

Paso #3: Personalizar Icono

1. Haga clic en 'Actualizar'para guardar el menú=> Cierra el editor.
2. Ahora vaya a la pestaña Icono => Elija cualquier color de la paleta de colores.
3. Seleccione Icono de la Biblioteca de iconos.
4. Ahora vaya al sitio => Apareció el icono seleccionado y el color.

Paso #4: Personalizar Insignia

• Agregar o editar texto.
• Elegir Color de la insignia.
• Elegir Color de fondo de la insignia.
• Hacer clic Ahorrar.

Paso #5: Ajustes

Ancho predeterminado

• Seleccione el ancho del mega menú: Por defecto.
• Seleccionar posición del mega menú: Por defecto.
• Guarde la ventana.
• Vista del sitio: Muestra el ancho predeterminado con la posición predeterminada.

Relativo predeterminado 

• Seleccione el ancho del mega menú: Por defecto.
• Seleccionar posición del mega menú: Relativo.
• Hacer clic Ahorrar.
• Vista del sitio: muestra el ancho predeterminado con posición relativa.

Ancho completo predeterminado

• Seleccione el ancho del mega menú: Ancho completo.
• Seleccionar posición del mega menú: Por defecto.
• Hacer clic Ahorrar.
• Vista del sitio: Muestra el ancho completo con la posición predeterminada.

Posición relativa de ancho completo

• Seleccione el ancho del mega menú: Ancho completo.
• Seleccionar posición del mega menú: Relativo.
• Hacer clic Ahorrar.
• Vista del sitio: Mostrando Ancho completo con posición relativa.

Ancho predeterminado personalizado

• Seleccione el ancho del mega menú: Ancho personalizado.
• Proporcione cualquier ancho personalizado, pero de forma predeterminada, es 750px.
• Seleccionar posición del mega menú: Por defecto.
• Hacer clic Ahorrar.
• Vista del sitio: Mostrando Ancho personalizado con posición predeterminada.

Ancho predeterminado personalizado Relativo

• Seleccione el ancho del mega menú: Ancho personalizado.
• Proporcione cualquier ancho personalizado, pero de forma predeterminada, es 750px.
• Seleccionar posición del mega menú: Relativo.
• Hacer clic Ahorrar.
• Vista del sitio: Mostrando Ancho personalizado con posición relativa.

Paso #6: Crear una plantilla de encabezado

Aquí puedes utilizar el Plantilla de encabezado de Elementor o puedes usar el Plantilla de encabezado de ElementsKit.

• Ahora buscar Menú de navegación=> Arrastra el Menú de navegación Ekit y Gota en el área seleccionada. Asegúrese de arrastrar el menú de navegación de ElementsKit; de lo contrario, el Megmenu creado no aparecerá.
• Ir a Configuración del menú=> selecciona tu creado Menú de encabezado desde el menú desplegable.
• Puede agregar cualquier tipo de widget desde aquí para personalizar su plantilla de encabezado.

Resultado final

• Una vez hecho esto, haga clic en el Actualizar botón para guardar el menú.
• Ahora vaya a su sitio y podrá ver que el Megamenú seleccionado se muestra en consecuencia.

Terminando

Finalmente, hemos llegado exitosamente al final. ¡Espero que hayamos podido ayudarte con este tutorial! Y ahora puedes crear un mega menú Elementor personalizado usando Kit de elementos!

Puedes ver todos esos pasos en un solo vídeo aquí.

Si tiene más inquietudes o ha encontrado otros problemas, ¡háganoslo saber en la sección de comentarios!