Cómo crear un megamenú en WordPress con Elementor

¿Te imaginas un sitio web grande sin un menú de navegación? 
¡De ninguna manera!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like Amazonas y eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu con Elementor.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

Utilizando el Generador de megamenús ElementsKit puedes crear y personalizar cualquier tipo de Megamenú con una interfaz de contenido en vivo de Elementor.

You will get variations in the mega menu such as the Nav menu y Megamenú vertical along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for 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ú

Para crear un megamenú en Elementor, debes crear un menú desde el panel de WordPress. Para ello,

• Navegar a Apariencia > Menú.
• Haga clic en Crear un nuevo menú.
• Proporcionar Nombre del menú > Verificar el Caja > Crear menú.
• Haga clic en Enlace personalizado > Proporcionar Enlace y Agregar elementos de menú del mismo modo.

Paso #2: Personaliza el contenido del megamenú

In this step, you can add mega menu items from the WordPress menu you have created.

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ú.

Diseño de controles

• 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 entre columnas

• 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 el texto del encabezado del mega menú

• 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 el icono

1. Haga clic en 'Actualizar' para guardar el menú > Cerrar 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 > Icono seleccionado y apareció el color.

Paso #4: Personalizar la insignia

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

Paso #5: Configuración

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 > Arrastre 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.

• 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.

Para obtener más detalles sobre la creación de un mega menú en WordPress, puede consultar la documentación de ElementsKit Widget Mega Menú para Elementor.

¿Que sigue?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

Crear mega menú usando Gutenberg

Si ha creado su sitio web en el editor de bloques de WordPress, también puede crear megamenu en Gutenberg sin problemas. El complemento editor de bloques GutenKit viene con la forma más sencilla de crear un mega menú de WordPress en Gutenberg.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

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!