Si desea crear un megamenú de Elementor en WordPress, el módulo Megamenú de ElementsKit puede facilitar y agilizar el proceso. Lea esta documentación para aprender a crear un megamenú en WordPress con ElementsKit en unos pocos y sencillos pasos.

Descripción general #

ElementsKit es el complemento todo en uno que le brinda la mejor manera posible de crear sitios web de WordPress con una amplia gama de widgets, módulos y plantillas prediseñadas altamente personalizables.

Eso incluye el Módulo Mega Menú de ElementsKit Un megamenú es una característica poderosa de WordPress que te permite crear un menú expandible basado en categorías con diseños flexibles. Los megamenús de Elementor son fáciles de usar y pueden ser una excelente manera de mostrar el menú del sitio web de manera organizada.

Mira nuestra guía en vídeo:

O siga las instrucciones paso a paso sobre cómo crear un mega menú en Elementor:

Requisito previo: #

• Complemento de creación de páginas Elementor
• ElementosKit Pro

Cómo crear un megamenú en WordPress Elementor #

En primer lugar, antes Creando un Mega Menú Elementor en WordPress Asegúrese de habilitar ElementsKit Megamenú módulo de ElementosKit > Módulo en su panel de WordPress.

Paso #1: Configurar menú #

A crear un mega menú de WordPress en tu sitio web,

• Navegar a Apariencia > Menús desde el panel de WordPress.
• Haga clic en Crear un nuevo menú.

• Entrar a Nombre del menú.
• Clickea en el Crear menú botón.

Ahora usted puede añadir elementos al mega menú. Para eso,

• Expandir Enlaces personalizados en "Agregar elemento de menú" en la columna de la derecha.
• Entrar a URL y Texto del enlace.
• Haga clic en Añadir al menú.

Luego agregue otros elementos del menú de la misma manera.

Después de eso, marque la casilla de verificación "Habilite este menú para el contenido del Megamenú”. Cuando el mega menú esté habilitado, harás clic en icono de configuración del mega menú cuando pasas el cursor sobre los elementos del menú.

Paso #2: Personalizar el contenido del megamenú de Elementor #

Cuando haces clic en el ícono de configuración del mega menú, se abrirá una ventana emergente. En la ventana emergente,

• Botón de alternancia para habilitar Mega Menú.
• Clickea en el Ahorrar botón.
• Después de eso, haga clic en EDITAR CONTENIDO DEL MEGAMENÚ botón. Te llevará al botón del editor de Elementor.

• Haga clic en el Icono de biblioteca de plantillas de ElementsKit

• Ir a Secciones=> Haga clic en el Categoría=> Seleccionar Megamenú de la lista.

• Insertar cualquier Elementor Megamenú Contenido.

• Verás que se mostrará el elemento insertado.

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 el espacio entre columnas en el 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.

Sección de estiramiento #

Pulse este botón para girar el mega menú al ancho completo, que se extiende de derecha a izquierda del ancho de la pantalla.

Seleccionar etiqueta HTML #

• Selecciona tu Etiqueta HTML de Desplegable.

Si quieres verlo en acción, mira este vídeo y hazlo tú mismo en pocos minutos.

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 Subtitular.
• Capaz de Mostrar etiqueta.
• Agregar o editar Etiqueta.
• Personalizar Color de fondo, tipografía, relleno, alineación, radio.
• Una vez hecho esto, haga clic en actualizar y cierre la ventana.

Paso #3: Personalizar icono #

• Ahora ve a Pestaña de iconos=> Elija cualquier color del Paleta de color.

• Seleccionar Icono desde el Biblioteca de iconos.

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: Configuración #

Ancho predeterminado #

• Seleccione el ancho del mega menú: Por defecto.
• Seleccionar posición del mega menú: Por defecto.
• Ahorrar 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. Veamos cómo agregarlo.

• Navegar a ElementsKit→ Pie de página de encabezado→ y haga clic Agregar nuevo.
• Se abrirá un cuadro emergente con opciones.

• En el cuadro emergente escriba un Título, Selecciona el Tipo→ Encabezamiento.
• Selecciona el Condiciones→ Todo el sitio.
• Alternar el Activación opción y haga clic en Editar con Elementor.

• Selecciona tu Estructura del área seleccionada.

• Ahora buscar Menú de navegación=> Arrastra el Menú de navegación Ekit y Gota en el área seleccionada.

** Nota: asegúrese de arrastrar el menú de navegación de ElementsKit; de lo contrario, el Megmenu creado no aparecerá.

• Ahora ve 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 ve a tu sitio y podrás ver que el Mega menú de Elementor seleccionado se muestra como corresponde.