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

Cómo construir un mega menú con elementor y elementkit

¿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–>

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.

Crear mega menú usando Gutenberg

Si ha creado su sitio web en el editor de bloques de WordPress, también puede crear un mega menú de forma fácil y fluida. El complemento del editor de bloques GutenKit viene con la forma más fácil de creando 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.

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!


Comentarios

  1. Avatar de Pedro

    Hola,
    gran tutorial!
    Todavía tengo una pregunta sobre el Mega Menú:
    ¿Puedo abrir el Mega Menú haciendo clic y no colocando el cursor sobre él?
    Estaría muy feliz por una respuesta.
    Saludos,
    Pedro

    1. Avatar de Tanjana Sabrin
      Tanjana Sabrin

      Hola Pedro,

      Muchas gracias por tu apreciación. Esto significa mucho para nosotros. Actualmente, la función no está disponible. Pero definitivamente puedes solicitar una función para eso. Continuamente agregamos nuevas funciones de acuerdo con las necesidades de nuestros clientes.

      Aqui esta el link - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Simplemente comparte tu increíble idea y haz clic en el botón Enviar. 😍

      Mantente a salvo 😃

  2. Avatar de Andrés

    Hola,
    Me encanta tu creador de mega menús, pero tengo un pequeño problema.
    Uno de mis mega menús está en el extremo derecho de mi encabezado y parte del mega menú desaparece en el lado derecho.
    ¿Existe alguna opción para alinear el mega menú a la derecha, izquierda o centro?

    Gracias

    1. Avatar de Ayub Ali

      Hola andrew,

      Sin revisar su sitio no podemos decirle qué está causando exactamente este problema. Por lo tanto, proporciónenos el enlace de su sitio web en vivo o una captura de pantalla relevante para comprender el problema claramente. Pero puedes intentar cambiar la posición del megamenú a la predeterminada siguiendo esta captura de pantalla (https://d.pr/i/ccf6RC). Déjanos saber la actualización aquí o mejor si puedes abrir un ticket de soporte: https://help.wpmet.com/

  3. Avatar de Farzán

    Hola, ¡gracias por el increíble tutorial! Podría aplicar todo, solo un problema menor. En el encabezado tengo 4 páginas, una de ellas tiene un mega menú si pasas el cursor sobre ella. Sin embargo, en el encabezado no puedo hacer clic en la página principal (con el nombre: persoonlijk), solo puedo hacer clic en los elementos del mega encabezado. ¿Puedes ver lo que me falta? (El sitio aún está en desarrollo, pero puedes ver el encabezado en el https://insight.nl/home URL. Me gustaría tener la opción de poder hacer clic también en el botón PERSOONLIJK. ¿Podrías ayudarme a descubrir qué hice mal allí?
    Muchas gracias de antemano.

    1. Avatar de Ayub Ali

      Hola Farzan, como se trata de un problema técnico y es posible que necesites ayuda personalizada, te sugiero que abras un ticket de soporte desde https://help.wpmet.com/

      Como nuestro equipo de soporte es muy útil, puedo decir que harán todo lo posible para resolver su problema lo antes posible.

      Los mejores deseos.

  4. Avatar de Mani

    Muchas gracias por este gran artículo. Es muy útil. Cualquiera puede entenderlo fácilmente en lugar de mirar muchos videos en Youtube.

  5. Avatar de Melisa

    Ey,
    Gran tutorial; Lo has explicado clara y sencillamente. Crear un buen mega menú es esencial ya que ayuda a enfatizar visualmente la relación entre los elementos, ayuda a los usuarios a conocer las opciones y le ayuda a utilizar íconos e imágenes fácilmente.

  6. Avatar de David

    He seguido este tutorial exactamente y mi menú NO aparecerá.
    Cuando vayas a la página que vinculé arriba, verás un menú: ese es el menú predeterminado de WordPress. Justo debajo utilicé el widget del menú de navegación y el menú no se completará.

    ¿Alguna idea?

  7. avatar de collin

    ¡El mega menú es genial! Precisamente: quiero que se abra la página correspondiente al hacer clic en el nombre del menú y que aparezca el Mega Menú al pasar el cursor. ¿Cómo puedo hacer eso? Ahora al hacer clic solo aparece el Mega Menú Gracias por la ayuda.

  8. Avatar de Margarita
    Margarita

    ¡Gracias por este gran tutorial! ¿Es posible crear un hipervínculo entre el título y la descripción dentro del mega menú en Editar alternar? Tengo una lista de estados y ciudades en mi Mega Menú, pero tengo el problema de tener que enumerar el estado dos veces para poder crear un hipervínculo en la sección Párrafo. ¿Hay alguna manera de eliminar esta redundancia?

  9. Avatar de Margarita
    Margarita

    Olvidé agregar si era posible tener también la opción de pasar el cursor sobre el Título, permitiendo que las ciudades aparezcan y se seleccionen debajo de él. Gracias.

  10. Avatar de Sami Azam
    Sami Azam

    ¿Cómo podemos mostrar Mega Menú en íconos de hamburguesas en lugar de un elemento de menú?

    1. Avatar de Dipa Shaha
      Dipa Shaha

      Querido Sami
      Lamentablemente, la función que desea no está disponible. Sin embargo, puede solicitar esta función. El equipo de ElementsKit siempre está feliz de recibir sugerencias de funciones.
      Puede solicitar la función utilizando este enlace https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Gracias

  11. avatar de ajay

    He seguido este tutorial exactamente y mi menú NO aparecerá.
    Cuando vayas a la página que vinculé arriba, verás un menú: ese es el menú predeterminado de WordPress. Justo debajo, utilicé el widget del menú de navegación y el menú no se completará.

    Creo que hay algún error en el mega menú y ya no funciona.

    1. Avatar de Hasib

      Hola Ajay, asegúrate de haber creado un menú en el backend antes de crear un mega menú. Y después de seleccionar el menú de navegación, debe elegir qué menú desea compartir en el mega menú.

  12. avatar de jy

    Hola,

    El megamenú funciona muy bien hasta que actualicé todos los complementos, es extraño que algunos de los megamenús funcionen pero otros no y muestran "no se encontró contenido", revertí la versión de los complementos pero no puedo resolver los problemas. ¿Alguna idea de qué causa este problema?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *