Le thème Divi de Elegant Themes est un outil puissant pour créer des sites web personnalisés. Cependant, les utilisateurs souhaitent souvent personnaliser certains éléments, comme les flèches du menu déroulant. Dans cet article, nous vous guiderons pour transformer ces flèches afin d’améliorer l’apparence et l’expérience utilisateur.
Pourquoi Personnaliser les Flèches du Menu ?
Les flèches par défaut dans les menus déroulants de Divi peuvent sembler basiques ou ne pas s’adapter au design global de votre site. Modifier leur style peut :
- Améliorer l’esthétique de votre site.
- Renforcer votre branding.
- Faciliter la navigation pour vos utilisateurs.
Étape 1 : Identifier la Flèche à Modifier
Avant toute chose, inspectez votre site pour localiser l’élément HTML et CSS correspondant aux flèches du menu déroulant. Voici comment procéder :
- Utilisez l’outil d’inspection de votre navigateur (clic droit > Inspecter sur Chrome).
- Localisez l’élément contenant la flèche, souvent un symbole ou un caractère Unicode.
- Notez la classe ou l’ID lié pour une personnalisation ciblée.
Étape 2 : Ajouter du Code CSS pour Modifier la Flèche
Pour personnaliser les flèches, vous devez ajouter un code CSS. Rendez-vous dans Divi > Options du Thème > Personnaliser le CSS, ou utilisez un enfant thème pour une solution plus durable.
Voici un exemple de code CSS pour remplacer la flèche par une autre icône :
.et_pb_menu li.menu-item-has-children > a:after {
content: '\f107'; /* Unicode pour une nouvelle flèche */
font-family: 'Font Awesome 5 Free'; /* Police d'icônes */
font-weight: 900; /* Style gras */
display: inline-block;
margin-left: 10px;
}Étape 3 : Remplacer les Flèches par des Images ou des SVG
Si vous préférez utiliser des images ou des SVG personnalisés à la place de simples caractères Unicode :
- Créez ou téléchargez une image ou un fichier SVG correspondant au style de votre site.
- Chargez l’image dans la bibliothèque multimédia de WordPress.
- Ajoutez cette règle CSS pour inclure l’image :
.et_pb_menu li.menu-item-has-children > a:after {
content: '';
background-image: url('votre-image-url.svg');
background-size: contain;
width: 12px; /* Ajustez selon vos besoins */
height: 12px;
display: inline-block;
}Étape 4 : Adapter le Design pour le Mobile
N’oubliez pas de tester vos modifications sur mobile. Vous pouvez ajouter des règles CSS spécifiques pour les écrans plus petits :
@media only screen and (max-width: 768px) {
.et_pb_menu li.menu-item-has-children > a:after {
content: '\f078'; /* Une autre flèche plus adaptée */
margin-left: 5px;
}
}Étape 5 : Tester et Affiner
Après avoir ajouté le code, testez votre site sur différents navigateurs et appareils pour vous assurer que :
- La nouvelle flèche est bien visible.
- Elle ne perturbe pas l’agencement du menu.
- Le comportement du menu déroulant reste fonctionnel.
Outils Supplémentaires pour Faciliter la Personnalisation
Voici quelques outils pour simplifier la personnalisation de votre site Divi :
- Font Awesome : Une bibliothèque d’icônes riche pour remplacer les flèches par des symboles élégants.
- Inspecteur de Chrome : Pour visualiser les changements CSS en direct.
- Plugins Divi : Certains plugins offrent des options avancées pour styliser les menus sans toucher au code.
Les Avantages d’une Personnalisation Réussie
Un menu déroulant bien conçu :
- Accroît l’engagement utilisateur.
- Réduit le taux de rebond en rendant la navigation intuitive.
- Reflète un design professionnel et cohérent.
Vous pouvez également intégrer votre propre image avec ce code ci dessous :
top-menu .menu-item-has-children>a:first-child:after{
content:url('URL de votre image);
margin-top :-2px;
}Conclusion
Personnaliser les flèches du menu déroulant dans Divi est une excellente façon de rendre votre site unique. Grâce aux astuces présentées dans cet article, vous pouvez ajuster les flèches à vos besoins, que vous optiez pour des icônes modernes, des images, ou un design entièrement sur-mesure.
Besoin d’un coup de main pour votre site Divi ? Partagez vos questions ou réussites dans les commentaires !
