Rendre l’image de fond cliquable dans le module de slider de posts avec Divi

Le thème Divi (lien affilié) est un excellent outil pour créer des sites web dynamiques et esthétiques. Cependant, lorsqu’il s’agit d’utiliser le module de slider de posts, un problème récurrent se pose : l’image de fond n’est pas cliquable, et seul le titre et la description mène vers l’article. Voici une solution simple en CSS pour remédier à ce problème en rendant toute la surface de la slide cliquable. Je me suis inspirée de cet article en anglais qui permet de rendre les articles du module de blog entièrement cliquables.

Problème

Par défaut, le module de slider de posts dans Divi (lien affilié) rend uniquement le titre de l’article cliquable. Cela peut entraîner une mauvaise expérience utilisateur, surtout lorsqu’on s’attend naturellement à pouvoir cliquer sur l’image pour accéder au contenu.

Solution

Pour rendre l’image de fond cliquable, nous pouvons étendre le lien du titre de manière à couvrir toute la surface du slide. Cela se fait en utilisant quelques lignes de CSS qui s’intègrent parfaitement dans Divi.

/* Merci à https://www.peeayecreative.com/make-entire-divi-blog-module-items-clickable/ pour l'idée */
/* Ajoute une position nécessaire aux posts du slider */
.et_pb_post_slider .et_pb_slides {
    position: relative;
}

/* Étend le lien du titre sur tout le post */
.et_pb_post_slider .et_pb_slides .et_pb_slide_title a:after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/* Change le curseur en pointeur au survol */
.et_pb_post_slider .et_pb_slides:hover {
    cursor: pointer;
}

Explication du code

• Positionnement : En ajoutant position: relative; aux éléments .et_pb_slides, nous nous assurons que tout positionnement absolu à l’intérieur sera ancré au conteneur du slide.
• Pseudo-élément :after : Le pseudo-élément :after est appliqué au lien du titre (.et_pb_slide_title a). Ce pseudo-élément occupe toute la largeur et hauteur de la slide, rendant ainsi toute la surface cliquable.
• Curseur en pointeur : En ajoutant cursor: pointer; au survol de .et_pb_slides, nous indiquons visuellement aux utilisateurs qu’ils peuvent cliquer n’importe où sur le slide pour accéder au post.

Comment utiliser ce code

1. Copiez le code ci-dessus.
2. Dans votre tableau de bord WordPress, allez dans Apparence > Personnaliser > CSS personnalisé et collez le code.
3. Enregistrez vos modifications et rechargez la page pour voir le résultat.

Conclusion

Avec ce simple ajout de CSS, vous améliorez l’expérience utilisateur en rendant l’image de fond du module de slider cliquable. Une solution rapide et efficace qui améliore l’interaction de vos visiteurs avec votre site !