WoodMart Temas y Elementor El constructor se combina para proporcionar a los usuarios potentes funciones de dise?o de menús. Con la ayuda de estas herramientas, es fácil crear mega menús que satisfagan las necesidades de multinivel, iconos, mega menús, etc. y optimizar la estructura de navegación de su sitio web. A continuación se detallan los pasos para construir un mega menú utilizando Elementor y temas WoodMart.
![Imagen [1] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250606145302206-image.png)
Creación de menús de navegación
Basándonos en esta imagen, estos son los pasos a seguir:
- Acceso a los ajustes del menú
existe WordPress En el backend, vaya a la sección Apariencia > Menús. - Crear un nuevo menú
En la página de menús, haga clic en el botón "Crear nuevo menú" e introduzca un nombre para el menú (por ejemplo, "Menú Demo"). - A?adir elemento de menú
En el área "A?adir elemento del menú", puede seleccionar elementos como páginas, entradas, categorías, etiquetas, etc. Para a?adir un nuevo elemento de enlace, introduzca la dirección del enlace en la sección "Enlace personalizado" (por ejemplo#) y el texto del enlace (por ejemplo, "Inicio") y, a continuación, pulse el botón "A?adir al menú". - Ajustar la posición del menú
En la sección "Configuración del menú", puede seleccionar la ubicación de este menú (por ejemplo, menú principal o menú lateral móvil). - Guardar menú
Cuando haya terminado con los ajustes, pulse el botón "Guardar menú" en la esquina superior derecha de la página para guardar los cambios.
![Imagen [2] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320112050738-image.png)
Configurar menús desplegables
A?adir elemento de menú
En la sección "A?adir elemento del menú", puede seleccionar páginas, artículos, categorías, etc. y a?adirlos al menú. Por ejemplo, marque la página "Mi cuenta", la página de pago, la página del carrito de la compra, etc. y haga clic en el botón "A?adir al menú".
Crear submenús
Si desea establecer determinados elementos de menú como submenús desplegables, simplemente arrástrelos bajo el elemento de menú de destino. Por ejemplo, arrastre la página Mi cuenta bajo el elemento de menú Inicio y se convertirá en un submenú de ese elemento de menú.
Reestructuración del menú
En la sección "Estructura del menú", a la derecha, puede ver los elementos de menú a?adidos. Arrastrando los elementos de menú, puede reordenarlos o anidarlos en submenús.
![Imagen [3] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320112812111-image.png)
Supermenú de ancho completo
Seleccionar elementos de menú y a?adir bloques HTML
existe WordPress En el backend, en Apariencia > Menús, seleccione el menú que desea editar. En los ajustes del elemento de menú de la derecha, haz clic en "A?adir nuevo bloque HTML" para a?adir contenido personalizado al menú.
Configurar el dise?o de los elementos de menú
En el menú desplegable Dise?o, seleccione la opción Ancho completo. Los elementos del menú se mostrarán a todo lo ancho de la página.
![Imagen [4] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320113513326-image.png)
Nombrar bloques HTML
En el cuadro de entrada situado en la parte superior de la página para HTML Nomenclatura de bloques (por ejemplo, "Mega menú de ancho completo").
Uso del editor de Elementor
Tras asignar un nombre al bloque HTML, haga clic en "Utilizar Elementor Editar" para acceder a la interfaz del editor de Elementor.
![Imagen [5] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320113703367-image.png)
A?adir listados de menús adicionales
Arrastre el widget elementorLista de menús adicionalesy haz clic en él para hacer una copia editorial del mismo.
![Imagen [6] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320135145985-image.png)
A?adir bloques HTML personalizados para los elementos del menú
En la sección "Campos personalizados (para el tema)", seleccione la opción "Bloque HTML para el desplegable". Seleccione el HTML (por ejemplo, "Mega menú completo").
![Imagen [7] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320135538630-image.png)
Por último volver a la parte delantera para previsualizar el efecto, hacer los ajustes finales para el resultado final está fuera.
![Imagen [8] - Cómo crear un mega menú usando Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320141805537-image.png)
Preservación del dise?o
Una vez que haya terminado de dise?ar y ajustar el menú, recuerde guardar todos los cambios haciendo clic en el botón "Actualizar" situado en la esquina superior derecha de la página.
A?adir una pesta?a de supermenú
Al crear un mega menú de ancho completo, puede a?adir etiquetas a cada elemento del menú. Por ejemplo, a?ada etiquetas de "Artículos calientes", "Novedades" o "Descuentos" para destacar determinados elementos importantes del menú.
![Imagen [9] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320141732743-image.png)
Para ello Elementor La opción "Etiquetas" del editor está configurada para ayudar a los visitantes a identificar rápidamente los contenidos clave.
![Imagen [10] - Cómo crear un mega menú usando Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320141849545-image.png)
Mega menú de tama?o personalizado
Seleccione los elementos del menú y configure el dise?o
existe WordPress En la página Apariencia > Menús del backend, seleccione el elemento de menú que desea editar. En los ajustes del elemento de menú de la derecha, puedes seleccionar la opción "Dise?o" y establecerla en "Establecer tama?os".
A?adir bloques HTML personalizados
En la sección "Bloque HTML para el desplegable", haz clic en el cuadro desplegable y selecciona la opción "A?adir nuevo". Si deseas a?adir contenido personalizado o una lista de menú adicional a los elementos del menú, puedes seleccionar esta opción y crear un nuevo bloque HTML.
![Imagen [11] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320142053654-image.png)
Uso del editor de Elementor
Después de nombrar HTML Después del bloque, haz clic en el botón "Editar con Elementor" para entrar en la interfaz del editor de Elementor.
![Imagen [12] - Cómo crear un mega menú usando Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320142237131-image.png)
A?adir listas de menús y productos adicionales (cuadriculados y giratorios)
existeelementorArrastre el widgetLista de menús adicionalesy haz clic en él para hacer una copia editorial del mismo. A continuación, arrastre unProductos (cuadrícula o carrusel)En el editor de Elementor, selecciona primero el widget que quieres editar.
En el panel de configuración de la izquierda, busque la opción Dise?o Parte. En la Productos En el menú desplegable, seleccione el tipo de dise?o que desee:RejillayLista tal vez Carrusel. Aquí elegimosCarrusel.
![Imagen [13] - Cómo crear un mega menú usando Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320143127782-image.png)
En el editor de Elementor, seleccione la región o widget que desea editar.
En el panel izquierdo, haga clic en Carrusel Sección de configuración.
existe Diapositivas por visionado En el control deslizante, ajuste el número de diapositivas mostradas a la vez. Puede ajustar el número a 1 o superior según desee.
Desplazamiento por páginaCuando esta opción está activada, en cada desplazamiento se desplazará una página entera en lugar de un solo producto. Esta opción puede activarse o desactivarse según sea necesario.
Ocultar control de paginaciónSi no desea mostrar el control de paginación, puede activar esta opción para ocultar el botón de paginación.
Ocultar botones anteriores/siguientesHabilite esta opción si no desea que se muestre el botón anterior/siguiente.
![Imagen [14] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320154730105-image.png)
Otras opciones
Modo central: Puede activar esta opción si desea que la presentación de diapositivas esté centrada.
Bucle deslizante: Cuando esta opción está activada, el pase de diapositivas se repetirá y el usuario podrá deslizar infinitamente.
Reproducción automática: Puede activar esta opción si desea que el pase de diapositivas se reproduzca automáticamente.
Init carrusel en scroll: Cuando esta opción está activada, la rotación sólo se iniciará cuando el usuario se desplace por la página, lo que resulta adecuado para optimizar el rendimiento.
![Imagen [15] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320154751883-image.png)
Guardar ajustes
Una vez que haya completado todos los ajustes, haga clic en la esquina inferior derecha de la página en el botón actualización para guardar los cambios.
Ajustar el tama?o del menú desplegable
Configure la anchura y la altura del menú desplegable. En los campos "Anchura del menú desplegable" y "Altura del menú desplegable", introduzca los valores deseados para cambiar el tama?o del menú desplegable.
![Imagen [16] - Cómo crear un mega menú con Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320143704548-image.png)
Después de configurarlo, vuelve a la vista previa del front-end y ajústalo a tus necesidades, entonces podrás guardar los ajustes.
![Imagen [17] - Cómo crear un mega menú usando Elementor builder y el tema WoodMart](http://gqxi.cn/wp-content/uploads/2025/03/20250320143924648-image.png)
observaciones finales
Combinando el uso de Elementor constructores y WoodMart Theme, puede crear un supermenú que se adapte a una gran variedad de dispositivos. Este tipo de menú no solo es bonito, y rico en funciones, adecuado para mostrar más contenido y opciones de navegación, mejorando eficazmente la eficiencia de navegación del sitio.
| Contacte con nosotros | |
|---|---|
| ?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas |
Servicio de atención al cliente WeChat
|
| ① Tel: 020-2206-9892 | |
| ② QQ咨詢:1025174874 | |
| (iii) Correo electrónico: info@361sale.com | |
| ④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres | |
Enlace a este artículo:http://gqxi.cn/es/46797El artículo está protegido por derechos de autor y debe ser reproducido con atribución.



















![Emoji[chi]-Photonflux.com | Servicio profesional de reparación de WordPress, en todo el mundo, respuesta rápida](http://gqxi.cn/wp-content/themes/zibll/img/smilies/chi.gif)
[FOTO]
Sin comentarios