Spanish 
English 
German 
Italian 
French 
Danish 
Portuguese 
Swedish 
Polish 
Korean 
Japanese 
¿Te imaginas un sitio web grande sin un menú de navegación?
¡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?
La facilidad de uso y la capacidad de atraer al usuario hacen que el megamenú sea el tipo de menú de navegación perfecto para su sitio web. Un megamenú simple pero funcional animará a los usuarios a explorar aún más áreas de su sitio web y a actuar de inmediato.
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 módulo repleto de funciones para su sitio profesional que se ubica fácilmente en el primer puesto entre los mejores. Los mejores constructores de megamenús de WordPress para Elementor.
¿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–>
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ú
En este paso, puedes Agregar elementos de mega menú desde el menú de WordPress que has creado.
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
- Haga clic en 'Actualizar' para guardar el menú > Cerrar el editor.
- Ahora vaya a la pestaña Icono > Elija cualquier color de la Paleta de colores.
- Seleccione Icono de la Biblioteca de iconos.
- 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.
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.
Con GutenKit, puede crear todo el menú en el editor y diseñar un mega menú tanto en orientación vertical como horizontal.
Todo lo que necesita es instalar el complemento GutenKit Pro y comenzar a construir su hermoso sitio en Gutenberg.
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.
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.
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!
Deja una respuesta