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.

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.

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.

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.

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.

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.

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").

Por último volver a la parte delantera para previsualizar el efecto, hacer los ajustes finales para el resultado final está fuera.

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ú.

Para ello Elementor La opción "Etiquetas" del editor está configurada para ayudar a los visitantes a identificar rápidamente los contenidos clave.

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.

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.

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.

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.

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.

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.

Después de configurarlo, vuelve a la vista previa del front-end y ajústalo a tus necesidades, entonces podrás guardar los ajustes.

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.