Un guide complet sur l'utilisation de l'éditeur Elementor pour améliorer le menu de navigation des sites web indépendants du commerce extérieur

Lorsqu'on travaille sur un site autonome de commerce extérieur, il est souvent nécessaire d'ajouter des fonctionnalités de menu, ce qui permet de relier plus étroitement les différentes pages du site. Alors que nous pensons généralement au menu de navigation principal situé en haut de la page, certaines personnes utilisent un texte d'ancrage dans la page pour les sauts de page. Toutefois, cette approche n'est pas aussi riche visuellement et fonctionnellement qu'un menu de navigation.

Afin de fournir des options de conception plus flexibles, l'éditeur Elementor introduit une fonctionnalité très utile - "Nav Menu". Cet outil nous permet de personnaliser le menu de sous-navigation en fonction de nos besoins de conception.

1) Ajouter l'élément fonctionnel "Nav Menu" dans l'éditeur Elementor dans la section d'édition du contenu.

Pour ajouter la fonctionnalité "Nav Menu" à l'éditeur Elementor, vous pouvez suivre ces étapes simples :

1. Trouvez l'élément "Nav Menu" dans la bibliothèque d'éléments d'Elementor.
2. Utilisez le bouton gauche de la souris pour cliquer sur l'élément et maintenez-le enfoncé.
3. Faites glisser la souris jusqu'à la zone d'édition du contenu de la page. Lorsque vous voyez la ligne de bordure de la zone d'édition passer d'une ligne pointillée grise à une ligne pointillée bleue, relâchez le bouton gauche de la souris.
4. L'élément "Nav Menu" a donc été ajouté avec succès à la zone d'édition du contenu.

2) Définir la fonction principale de l'élément fonctionnel "Nav Menu" dans l'éditeur Elementor.

Il y a quelques options de configuration clés à comprendre lors de la mise en place de sous-menus dans l'éditeur Elementor :

1. Menu: :
   • C'est ici que vous choisissez la source du contenu de votre sous-menu. Tout d'abord, créez et nommez vos sous-menus dans WordPress sous Apparence > Menus. Une fois que vous avez terminé, ces menus apparaîtront dans les options de menu déroulant d'Elementor.
2. Mise en page: :
   • Vous pouvez choisir le mode de présentation du sous-menu : horizontal, vertical ou déroulant.
3. Aligner: :
   • Définit l'alignement du sous-menu, notamment à gauche, au centre, à droite ou les deux.
4. Pointeur: :
   • Il s'agit des effets qui se produisent lorsque la souris survole des éléments de menu tels que Souligné, Surligné, Double ligne, Encadré, Arrière-plan et Texte. Choisissez un effet qui correspond à votre style.
5. Animation: :
   • Effets dynamiques au passage de la souris. Ces effets dynamiques ne peuvent pas être illustrés par des captures d'écran, vous devez les essayer et les expérimenter par vous-même.
6. Indicateur de sous-menu: :
   • Ce paramètre est utilisé pour indiquer la présence d'un sous-menu, mais le changement exact peut être moins évident.
7. Point d'arrêt: :
   • Définit le point de rupture de l'affichage sur différents appareils tels que les tablettes ou les téléphones portables. Lorsque la largeur de l'écran est inférieure à cette valeur, les sous-menus horizontaux à une ligne deviennent des affichages à plusieurs lignes.
8. Largeur totale: :
   • Détermine si les sous-menus sont affichés en pleine largeur de ligne après un point d'arrêt. Normalement, il n'est pas recommandé d'afficher les sous-menus sur toute la largeur de la ligne.
9. Aligner: :
   • Réglez à nouveau l'alignement, soit à gauche (Aside), soit au centre (Center).
10. Bouton de basculement: :
    • Définir le mode d'affichage du sous-menu : aucun (None) ou menu Hamburger (Hamburger). Lorsque le menu Hamburger est sélectionné, une icône s'affiche pour faire apparaître le sous-menu lorsque l'on clique dessus.
11. Alignement par bascule: :
    • Définir la position de l'icône du bouton de basculement, soit à gauche, soit au centre, soit à droite.

3) Style de l'élément fonctionnel "Nav Menu" dans l'éditeur Elementor.

1. "Configuration du projet "Dropdown

Lorsque vous stylisez un menu déroulant (Dropdown) dans l'éditeur Elementor, vous avez affaire à plusieurs états différents et à des paramètres de style spécifiques. Simplifions et expliquons ces configurations en termes simples :

Trois paramètres d'état pour le menu principal :

1. Normal (NORMAL): L'état d'affichage par défaut du menu lorsqu'il n'y a pas d'interaction avec celui-ci.
2. État de survol (HOVER): L'état de l'affichage lorsque la souris est déplacée sur l'élément de menu.
3. État d'activité (ACTIF): L'état d'affichage de l'élément de menu lorsque l'on clique dessus.

Dans ces trois états, vous pouvez ajuster les paramètres suivants :

• Couleur du texteCouleur du texte : Change la couleur du texte de tous les éléments du menu déroulant, y compris l'icône du menu réduit.
• Couleur d'arrière-plan (Background)Couleur d'arrière-plan : définit la couleur d'arrière-plan des éléments du menu. Dans l'état "Actif", vous pouvez également spécifier la couleur d'arrière-plan du menu lorsque vous cliquez dessus.
• Typographie: Permet d'ajuster la police, la taille et les autres propriétés typographiques du texte du menu.

Le style du menu déroulant :

• Rembourrage horizontal: Définit l'espace de l'élément de menu à partir du côté gauche.
• Rembourrage vertical: Définit l'espace entre les limites supérieure et inférieure de l'élément de menu sur la ligne où il se trouve.
• L'espace entre les deux: Définit la distance entre les éléments de menu de chaque ligne.
• Rayon de la bordurePlus la valeur est élevée, plus les coins sont arrondis.

Configurations supplémentaires pour les menus déroulants :

• Type de frontière: Définit le style de la bordure extérieure pour l'ensemble du menu déroulant.
• Boîte d'ombresLe menu déroulant : Ajoutez un effet d'ombre tridimensionnel au menu déroulant pour le mettre en valeur.
• DiviseurAjouter des séparateurs entre les différents éléments du menu : Ajouter des séparateurs entre les différents éléments du menu.
• Distance: Règle la distance entre les éléments du menu.

2. "Configuration du projet "Bouton basculant

La configuration du bouton à bascule (Toggle Button) pour un menu déroulant dans l'éditeur Elementor implique quelques réglages visuels simples. Ce bouton est généralement une icône de menu hamburger (trois lignes horizontales), et vous pouvez ajuster son apparence pour mieux l'intégrer à la conception de votre site. Voici les options de configuration spécifiques :

1. Couleur: :
   • Ce paramètre modifie la couleur de l'icône du menu hamburger (trois lignes horizontales).
2. Couleur de fond: :
   • Il s'agit de la couleur d'arrière-plan de l'icône du menu Hamburger. Le choix d'une couleur peut faire ressortir davantage l'icône ou l'harmoniser avec le style général du site.
3. Taille: :
   • Redimensionnez l'icône du menu hamburger de manière à ce qu'elle s'harmonise avec la conception de votre site web et les autres éléments de l'interface utilisateur.
4. Largeur de la frontière: :
   • Définit l'épaisseur de la bordure extérieure de l'icône. Cela peut permettre à l'icône d'être plus visible ou de se fondre plus subtilement dans l'arrière-plan.
5. Rayon de la bordure: :
   • Règle le degré d'arrondi des coins des bordures de l'icône. Plus la valeur est élevée, plus les coins sont arrondis. Par exemple, si la valeur est de 50, l'icône sera complètement arrondie, ce qui donnera l'apparence d'un bouton rond.

Conclusion :

Améliorez et optimisez les menus de navigation de votre site de commerce extérieur autonome à l'aide de l'éditeur Elementor. Nous expliquons comment ajouter et configurer la fonction "Nav Menu", notamment en définissant la source, la disposition et l'alignement des sous-menus, ainsi qu'en personnalisant les styles au survol et à l'activation. En outre, nous avons également expliqué comment configurer les différents effets visuels du menu déroulant, tels que la couleur d'arrière-plan, la bordure et les effets d'animation, ainsi que comment ajuster la taille, la couleur et la forme des boutons de basculement, afin de s'assurer que le menu de navigation est non seulement entièrement fonctionnel, mais aussi visuellement cohérent avec le design et le style d'ensemble du site Web.

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.