Explication du menu mobile réactif et de la navigation dans l'en-tête de WoodMart

Si vous utilisez Thèmes WoodMartEn effet, la présentation des menus et des en-têtes sur mobile peut être réglée séparément. Cela est essentiel pour améliorer l'efficacité de la navigation et l'expérience de l'accès mobile. Voici une explication détaillée de la manière de configurer chaque étape pour que votre menu mobile soit à la fois clair et attrayant.

I. Créer un menu mobile exclusif

Tout d'abord, accédez à l'écran de gestion des menus dans le backend de WordPress.

• Cliquez sur [Apparence > Menu] dans la barre de menu gauche.
• Cliquez sur "Créer un nouveau menu" en haut de la page.

• Donnez un nom à ce menu, par exemple "Menu mobile".

• Sur le côté gauche, sélectionnez le contenu que vous souhaitez placer dans le menu, comme des pages, des catégories, des liens vers des produits, etc. et cliquez sur "Ajouter au menu".

• Faire glisser les éléments de menu pour les trier, définir la structure parent/enfant

• Sauvegarder le menu

Notez que ce menu n'est pas lié par défaut à l'optionmobilequi doit également être attribué manuellement.

II. position du menu mobile contraignant

• Allez dans [Appearance > Theme Settings > Header > Mobile Menu

• Sélectionnez le "Menu mobile" que vous venez de créer dans la liste déroulante.
• Sauvegarder les paramètres

Ainsi, lorsque vous appuyez sur l'icône du burger sur votre téléphone, vous voyez ce que vous venez de mettre en place.

Utiliser Header Builder pour mettre en place une structure d'en-tête mobile

WoodMart propose un créateur d'en-têtes visuel qui peut être utilisé individuellement pour les éléments suivantsEn-tête de conception mobileStructure.

• Allez dans [WoodMart > Header Builder] dans le backend.

• Glisser-déposer des modules pour construire votre en-tête mobile, généralement recommandé :
  • Logo à gauche.
  • Laisser le centre vide ou ajouter une icône de recherche
  • Le côté droit contient les icônes de menu etchariot

• Trois icônes d'appareil figurent en haut de la page : ordinateur de bureau, tablette et téléphone portable. Cliquez sur l'icône "mobile" pour passer à l'affichage mobile.

• En cliquant sur chaque module, vous pouvez définir les conditions d'affichage, par exemple s'il est activé sur mobile, si les effets collants sont activés, etc.

• Cliquez sur "Enregistrer" et actualisez le site web pour voir le résultat.

IV. personnaliser le style d'expansion du menu

WoodMart prend en charge l'optimisation des styles d'expansion des menus mobiles, tels que la direction de l'expansion, les styles d'icônes, les animations, etc.

• Allez dans [WoodMart > Header Builder].
• éditer un module

• Vous pouvez activer ou désactiver l'icône du panier d'achat, la rechercheicône (informatique)Commutateurs, écritures comptables, etc.

• Définir la police, la couleur d'arrière-plan, l'état de survol et d'autres styles d'éléments de menu sur la page de style
• Si vous devez ajouter le menuicône (informatique)Vous pouvez ajouter des classes CSS à chaque élément de menu, puis écrire un petit style correspondant aux icônes d'affichage.

V. Faire apparaître le menu uniquement sur les appareils mobiles

WoodMart déterminera automatiquement la largeur de l'appareil pour activer le menu mobile. Toutefois, vous pouvez également définir manuellement les éléments qui ne s'affichent que sur les téléphones mobiles :

• Dans l'éditeur, vous pouvez ouvrir les paramètres "Responsive" et cocher "Mobile only".

• De même, certains contenus qui ne conviennent qu'à l'affichage sur un ordinateur de bureau peuvent être configurés pour n'être visibles que sur cet ordinateur.

Cela permet d'éviter l'empilement ou la duplication des éléments et d'améliorer la clarté de l'accès.

Sixièmement, le style du menu est erroné ou la solution non valide

Si vous constatez que les clics sur le menu ne fonctionnent pas, que les styles se détachent ou qu'ils obscurcissent la page, nous vous recommandons d'essayer ce qui suit :

• effacer le cache(Theme Cache, Plugin Cache, Browser Cache sont tous effacés)
• Vérifier si des plug-ins affectant la structure du menu sont installés, tels que des plug-ins tiers d'amélioration du menu ou des plug-ins multilingues.
• Vérifiez si le CDN est activé et essayez de désactiver temporairement le chargement du style de test.
• Utilisez la fonction "Inspecter l'élément" de votre navigateur pour vérifier s'il y a des conflits de style, en vous concentrant sur les points suivants .mobile-navet.mobile-menuet.hamburger-icon isonomie

Jeu avancé : Utilisation d'Elementor pour personnaliser la zone de menu mobile

Si vous utilisez Elementor ProVous pouvez également personnaliser entièrement une zone de menu mobile.

• Créez un modèle Elementor de type "Section".

• Insertion d'images, de boutons, de composants de menu de navigation, mise en page libre

• Intégrer des modèles via Shortcode dans des blocs personnalisés dans Header Builder
• utiliserréactifParamètre permettant de masquer l'affichage sur le bureau et d'afficher ce modèle uniquement sur le mobile

Cette approche convient aux sites ayant des exigences élevées en matière de style, tels que les sites officiels de marque et les marques de commerce électronique.

résumés

WoodMart est en fait très flexible en termes de menus mobiles et de navigation, avec le Header Builder intégré, le système de menu et avec Elementor pour un design indépendant. Il est recommandé de créer unMenu mobileAu lieu d'"hériter du menu de l'ordinateur de bureau", cela permet un accès plus propre et des fonctionnalités plus ciblées sur le téléphone.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.