Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Accueil » Divi astuces » Garder les flèches visibles dans le module galerie de Divi : Guide complet

Garder les flèches visibles dans le module galerie de Divi : Guide complet

Temps de lecture : 2 mn

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 :

  1. 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é.
  2. 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;
    }
}
Divi est régulièrement mis à jour, et certaines modifications CSS peuvent être affectées. Pensez à tester votre site après chaque mise à jour et ajustez le code si nécessaire.

Pour conclure

Garder les flèches visibles dans le module galerie de Divi est essentiel pour améliorer la navigation et l’expérience utilisateur. Grâce à du CSS personnalisé, des réglages avancés et des plugins adaptés, vous pouvez facilement rendre ces flèches permanentes. N’hésitez pas à tester plusieurs solutions pour trouver celle qui convient le mieux à votre site. Avec ces ajustements, votre galerie sera plus accessible, intuitive et esthétiquement optimisée pour vos visiteurs !

Continuer la lecture

Intégrer la balise Google analytics à son site

Google Analytics est un outil indispensable pour suivre les performances de votre site web et comprendre le comportement de vos visiteurs. Si vous utilisez WordPress et le thème Divi, vous avez de la chance, car l’intégration de Google Analytics est à la fois simple...

lire plus

Créer des effets d’apparition captivants avec Divi

Le design web joue un rôle clé dans l’expérience utilisateur en ligne, et les animations subtiles, comme les effets d’apparition, permettent d’ajouter une touche dynamique et professionnelle à un site internet. Avec le thème Divi, l’un des constructeurs de pages les...

lire plus