Le thème Divi de Elegant Themes est l’un des constructeurs de pages les plus populaires sur WordPress. Son module galerie permet d’afficher des images de manière esthétique et interactive. Cependant, un problème courant rencontré par de nombreux utilisateurs est la disparition des flèches de navigation dans les galeries. Cet article explore différentes méthodes pour garder les flèches visibles en permanence dans le module galerie de Divi.
Pourquoi les flèches disparaissent-elles dans le module galerie de Divi ?
Par défaut, les flèches de navigation dans le module galerie de Divi n’apparaissent que lorsque l’utilisateur survole la galerie. Cela peut poser problème pour l’expérience utilisateur, car certaines personnes ne réalisent pas que la navigation est possible. Garder ces flèches toujours visibles améliore la convivialité et l’accessibilité du site.
Solutions pour afficher les flèches en permanence
1. Ajouter du CSS personnalisé
La méthode la plus simple pour garder les flèches visibles est d’utiliser du CSS personnalisé. Voici comment procéder :
- Accédez aux options CSS dans WordPress :
- Allez dans Apparence > Personnaliser > CSS additionnel.
- Ou dans le module galerie, allez dans Paramètres avancés > CSS personnalisé.
- Ajoutez le code suivant :
.et_pb_gallery .et-pb-arrow-prev,
.et_pb_gallery .et-pb-arrow-next {
opacity: 1 !important;
visibility: visible !important;
}
.et_pb_gallery:hover .et-pb-arrow-prev,
.et_pb_gallery:hover .et-pb-arrow-next {
opacity: 1;
}
2. Modifier les paramètres du module galerie
Bien que Divi ne propose pas d’option native pour garder les flèches visibles, vous pouvez essayer certaines astuces :
- Activez l’option pagination : Cela peut parfois influencer l’affichage des flèches.
- Testez différentes mises en page : Parfois, certaines dispositions masquent les flèches.
3. Utiliser un plugin Divi spécifique
Si vous préférez une solution sans code, il existe des plugins Divi qui améliorent la galerie et permettent de personnaliser les flèches de navigation, tels que :
- Divi Carousel Module
- Divi Supreme Pro
Ces plugins offrent des options avancées et facilitent la gestion des galeries d’images.
Amélioration de l’expérience utilisateur
Une fois les flèches rendues visibles, il est important d’optimiser leur affichage pour une meilleure expérience utilisateur :
1. Personnaliser l’apparence des flèches
Vous pouvez modifier la taille, la couleur et la position des flèches avec ce code CSS :
.et_pb_gallery .et-pb-arrow-prev,
.et_pb_gallery .et-pb-arrow-next {
font-size: 24px;
color: #ffffff;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
padding: 10px;
}
2. Tester l’affichage sur mobile
L’affichage des flèches peut varier en fonction de l’écran. Assurez-vous qu’elles restent visibles et accessibles sur smartphones et tablettes en ajoutant du CSS responsive :
@media (max-width: 768px) {
.et_pb_gallery .et-pb-arrow-prev,
.et_pb_gallery .et-pb-arrow-next {
font-size: 18px;
padding: 5px;
}
}