Explicación de WoodMart Responsive Mobile Menu & Header Navigation

Si utiliza Temas WoodMartLa presentación de los menús y las cabeceras en los móviles puede configurarse por separado. Esto es fundamental para mejorar la eficacia de la navegación y la experiencia de acceso móvil. Aquí tienes una explicación detallada de cómo configurar cada paso para que tu menú móvil sea claro y atractivo.

I. Crear un menú exclusivo para móviles

En primer lugar, vaya a la pantalla de gestión de menús en el backend de WordPress.

• Haga clic en [Apariencia > Menú] en la barra de menú de la izquierda.
• Haga clic en "Crear nuevo menú" en la parte superior de la página.

• Nombre este menú, por ejemplo, "Menú móvil".

• En la parte izquierda, seleccione el contenido que desea incluir en el menú, como páginas, categorías, enlaces a productos, etc., y haga clic en "Añadir al menú".

• Arrastre los elementos del menú para ordenarlos, establezca la estructura padre/hijo

• Guardar menú

Tenga en cuenta que este menú no está vinculado por defecto a la etiquetamóvilque también debe asignarse manualmente.

II. Posiciones vinculantes del menú móvil

• Vaya a [Apariencia > Configuración del tema > Encabezado > Menú móvil

• Seleccione en la lista desplegable el "Menú móvil" que acaba de crear.
• Guardar ajustes

Así, cuando pulses el icono de la hamburguesa en tu teléfono, verás lo que acabas de configurar.

Utilizar Header Builder para configurar una estructura de cabecera móvil

WoodMart proporciona un Constructor de Encabezados visual que se puede utilizar individualmente para elCabecera de diseño móvilEstructura.

• Vaya a [WoodMart > Header Builder] en el backend.

• Módulos de arrastrar y soltar para construir su cabecera móvil, generalmente recomendados:
  • Logotipo a la izquierda.
  • Deje el centro vacío o añada un icono de búsqueda
  • El lado derecho contiene los iconos de menú ycarro

• Hay tres iconos de dispositivos en la parte superior de la página: ordenador de sobremesa, tableta y teléfono móvil. Haga clic en el icono "móvil" para cambiar a la vista móvil.

• Al hacer clic en cada módulo, puede establecer las condiciones de visualización, como si está activado en móviles, si están activados los efectos adhesivos, etc.

• Haga clic en "Guardar" y actualice el sitio web para ver el resultado.

IV. Personalizar el estilo de expansión del menú

WoodMart admite la optimización de los estilos de expansión del menú móvil, como la dirección de expansión, los estilos de los iconos, las animaciones, etc.

• Vaya a [WoodMart > Constructor de cabeceras].
• editar un módulo

• Puede activar o desactivar el icono del carrito de la compra, la búsquedaicono (informática)Conmutaciones, anotaciones en cuenta, etc.

• Defina el tipo de letra, el color de fondo, el estado hover y otros estilos de los elementos del menú en la página de estilos.
• Si necesita añadir el menúicono (informática)Puede añadir clases CSS a cada elemento del menú y luego escribir un pequeño estilo para que coincida con los iconos de visualización.

V. Hacer que el menú aparezca sólo en dispositivos móviles

WoodMart determinará automáticamente el ancho del dispositivo para habilitar el menú móvil. Sin embargo, también puedes establecer manualmente qué elementos se muestran solo en móviles:

• En el editor, puedes abrir el ajuste "Responsive" y marcar la casilla "Mobile only".

• Del mismo modo, determinados contenidos que sólo son adecuados para la visualización en el escritorio pueden configurarse para que sólo sean visibles en el escritorio.

Esto evita el apilamiento o la duplicación de elementos y mejora la claridad del acceso.

Sexto, el estilo del menú es incorrecto o la solución no es válida

Si ves que los clics del menú no funcionan, los estilos se corren u oscurecen la página, te recomendamos que pruebes lo siguiente:

• borrar la caché(Se borran la caché del tema, la caché de los plugins y la caché del navegador).
• Compruebe si hay plug-ins instalados que afecten a la estructura de los menús, como plug-ins de terceros para mejorar los menús o plug-ins multilingües.
• Compruebe si la CDN está activada e intente desactivar temporalmente la carga de estilos de prueba
• Utilice la función "Inspeccionar elemento" de su navegador para ver si hay conflictos de estilo, centrándose en lo siguiente .mobile-navy.mobile-menuy.hamburguesa-icono nombre binomial (por ejemplo, de una clase)

Juego avanzado: Uso de Elementor para personalizar el área del menú móvil

Si utiliza Elementor ProTambién puede personalizar completamente un área de menú móvil.

• Cree una plantilla Elementor con el tipo "Sección".

• Insertar imágenes, botones, componentes del menú de navegación, diseño libre

• Inserción de plantillas mediante Shortcode en bloques personalizados en Header Builder
• hacer uso dereceptivoConfiguración para ocultar la pantalla de escritorio y mostrar esta plantilla sólo en móviles

Este enfoque es adecuado para sitios con grandes requisitos de estilo, como sitios web oficiales de marca y marcas de comercio electrónico.

resúmenes

WoodMart es realmente muy flexible en términos de menús móviles y navegación, con el Header Builder incorporado, sistema de menús y con Elementor para el diseño independiente. Se recomienda configurar unMenú móvilEn lugar de "heredar el menú del escritorio", esto permite un acceso más limpio y una funcionalidad más centrada en el teléfono.

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: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres