Cómo crear un mega menú con el constructor Elementor y el tema WoodMart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
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
? Declaración de reproducción
Este artículo fue escrito por: ladrones serán ratas y ratones coraje
EL FIN
Si le gusta, apóyela.
felicitaciones1232 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios