Une galerie Divi 5 défile automatiquement, puis s’arrête dès que la souris passe dessus. Le symptôme est frustrant, surtout si le slider sert de bandeau décoratif. Dans la pratique, le “pause on hover” est souvent géré par le JavaScript de Divi, même quand aucune option n’apparaît dans l’interface.

L’objectif ici est simple : garder le défilement automatique en continu, même quand la souris survole le module.

Hypothèses

Le site utilise Divi 5 et un module Galerie en mode slider. L’auto-défilement est actif côté Divi. Aucune option “pause au survol” n’est disponible dans les réglages du module.

Constater le problème sur une galerie Divi 5

Le comportement de départ est classique : la galerie change d’image toute seule, puis dès que la souris survole l’image, la transition s’arrête. Dès que la souris sort de la zone, le défilement reprend.

Ce point est important : si le défilement automatique ne marche déjà pas sans survol, le problème n’est pas le “hover”, mais l’auto-rotation elle-même. Il faut d’abord vérifier que la galerie défile bien sans toucher la souris.

Comprendre pourquoi le slider s’arrête sans option visible

Le HTML d’une galerie Divi 5 en mode slider contient des classes typiques de modules “slider”. On voit notamment des marqueurs comme un comportement automatique et des contrôles (flèches et pagination).

Même si l’interface ne propose pas “pause au survol”, Divi peut appliquer ce comportement par défaut via son script. C’est souvent une logique de protection : éviter que le slider change pendant qu’un utilisateur essaie de cliquer.

Dans ce cas précis, la recherche dans les options du module ne donne rien. Il n’y a pas d’option à désactiver. On est donc obligé de contourner le comportement.

Les premières tentatives qui ne fonctionnent pas

L’idée la plus tentante est de “retirer” les événements JavaScript au survol. Sur le papier, cela semble logique : si le survol n’est plus détecté, la pause ne se déclenche plus.

Dans la réalité, les essais de suppression d’événements peuvent casser aussi l’auto-rotation. Divi n’utilise pas uniquement des événements de survol. Le même bloc gère souvent le timer, la transition, l’état des slides et la navigation.

Le résultat observé est net : en essayant de neutraliser ces événements, le slider peut arrêter complètement de défiler, même sans survol. C’est exactement le symptôme d’un “overkill” côté JS.

Deuxième tentative fréquente : cliquer automatiquement sur “Suivant” toutes les X secondes. Là aussi, c’est séduisant, mais fragile. Si Divi bloque le clic pendant une transition, si le bouton n’est pas prêt, ou si le module est reconstruit à chaud, l’auto-clic peut ne jamais partir.

Conclusion : on évite de se battre contre le moteur interne du slider.

La solution la plus simple : mettre un voile invisible au-dessus du module

Le contournement le plus robuste est aussi le plus basique : empêcher la souris de toucher le module.

L’idée : on place un “voile” totalement transparent au-dessus du slider. La souris ne survole plus la galerie. Divi ne reçoit donc jamais l’événement de survol. Le slider continue de défiler comme si rien ne se passait.

Cette méthode a une conséquence immédiate : toute interaction devient impossible sur la zone couverte. Plus de clic sur les flèches. Plus de clic sur la pagination. Plus de clic sur l’image.

Si votre galerie est décorative et n’a pas vocation à être cliquée, c’est exactement ce qu’il faut.

Test rapide

Avant d’aller plus loin, vérifiez le résultat attendu.

Si le voile est en place, vous devez observer ces points : le slider défile en continu, même en laissant la souris dessus. Les flèches et les contrôleurs ne répondent plus au clic. Le curseur peut rester standard, sans effet de survol.

Mise en place du voile de façon réutilisable

Le besoin évolue vite : une fois la solution trouvée, on veut pouvoir l’utiliser n’importe où, sur un slider, une image, un bloc “promo”, ou une colonne entière.

Le plus simple est de créer une classe CSS réutilisable, à ajouter dans Divi (onglet Avancé, champ “Classe CSS”).

Le principe est toujours le même : l’élément ciblé devient un conteneur “positionné”, puis un pseudo-élément recouvre toute la surface.

Exemple de logique : la classe no-interaction bloque les interactions de tout ce qui se trouve dedans.

Où appliquer la classe dans Divi

Vous pouvez l’appliquer sur un module. Dans ce cas, seul ce module devient non cliquable.

Vous pouvez aussi l’appliquer sur une colonne. Dans ce cas, tous les modules de la colonne deviennent non interactifs.

Enfin, vous pouvez l’appliquer sur une section, mais cela verrouille un gros bloc. C’est utile seulement si vous êtes certain de ne jamais vouloir cliquer dans cette zone.

Le piège à éviter

Si vous appliquez no-interaction sur un parent trop haut (par exemple une section complète), vous risquez de bloquer des éléments qui vous semblent “en dehors”, mais qui sont en réalité imbriqués dans le DOM. Il faut rester précis.

Variante : garder le défilement sans bloquer les clics

Ici, le choix a été clair : priorité au défilement continu, et tant pis pour l’interaction.

Si vous voulez absolument conserver les flèches cliquables, le voile ne doit pas recouvrir ces zones. Il faut alors une approche plus fine, avec un overlay qui couvre seulement la zone d’image, pas les contrôles. Ce point demande une structure stable (hauteur, position des flèches), et une mise en page maîtrisée.

Dans la plupart des cas, on tranche : soit la galerie est décorative, soit elle est interactive. Essayer de faire les deux sans design prévu pour, crée des effets secondaires.

Pour remettre votre site d’aplomb sans perdre de données, demandez un dépannage prioritaire: dépannage WordPress prioritaire

Deuxième souci rencontré : un hover Divi qui change le padding du bouton

Après le slider, un autre symptôme apparaît sur un module Bouton : au survol, le bouton “saute”, car Divi ajoute du padding à gauche et à droite. Visuellement, cela donne l’impression que le bouton se décale.

Le point clé : ce n’est pas un réglage dans le module. C’est un style global injecté par Divi via un preset.

Identifier la règle CSS fautive

On voit une règle qui cible l’état :hover d’un preset de bouton “default” et ajoute des paddings asymétriques. Ce type de règle vient du système de presets de Divi 5.

C’est aussi pour cela que vous ne trouvez rien dans le module, même en mode hover : la source est globale.

Corriger immédiatement, sans casser le reste

La correction la plus fiable consiste à forcer les mêmes paddings en état normal et au survol. Le bouton ne bouge plus.

Dans la pratique, c’est une surcharge CSS globale. Elle neutralise la règle Divi, sans dépendre d’une option cachée.

Supprimer “à la source” : pourquoi ce n’est pas toujours visible

Même en éditant le preset, il arrive que l’interface ne montre rien, car Divi considère ce padding comme une valeur par défaut interne. Le CSS est généré, mais l’UI n’affiche pas un champ renseigné.

Dans ce cas, deux stratégies restent réalistes : garder l’override CSS global, ou créer votre propre preset de bouton et l’utiliser à la place du preset “default”.

La première option est la plus rapide. La deuxième est la plus propre sur le long terme, mais elle demande de basculer les boutons existants.

Si vous rencontrez le même symptôme et voulez un diagnostic rapide avec plan d’action, contactez-nous: dépannage informatique et web

Troisième besoin : utiliser une icône absente du module Icon Divi

Le module Icône de Divi est pratique, mais il est limité au set d’icônes embarqué. Dès qu’une icône spécifique est nécessaire, on doit sortir du module.

Dans ce cas, le besoin est clair : afficher une icône précise (exemple : une grappe de raisin) qui n’existe pas dans Divi.

Option fiable : utiliser un SVG

La solution la plus propre est d’utiliser un SVG. On garde une icône nette, légère, redimensionnable, et cohérente visuellement.

Divi permet cela sans plugin, via un module Code. L’icône est intégrée comme un bloc SVG, puis stylée en CSS.

L’intérêt est double : vous obtenez exactement l’icône voulue, et vous pouvez l’habiller comme une icône Divi (couleur, taille, cercle de fond, hover).

Pourquoi éviter l’image PNG quand c’est possible

Un PNG fonctionne, mais il perd en qualité au redimensionnement et demande souvent plusieurs variantes pour être parfait sur mobile. Le SVG évite ces compromis.

Bon réflexe : rendre les correctifs réutilisables

Les trois problèmes ont un point commun : ils sont “globaux” dans leurs effets.

Le slider qui pause au hover n’est pas un bug d’un module isolé. C’est un comportement Divi.

Le bouton qui bouge au hover vient d’un preset global.

L’icône manquante est une limite structurelle du module.

La meilleure méthode est donc de fabriquer des briques simples et réutilisables : une classe no-interaction quand on veut bloquer la souris, un correctif CSS global pour neutraliser les paddings hover, et une bibliothèque d’icônes SVG cohérentes.

Si vous gérez plusieurs sites ou plusieurs pages, c’est ce qui vous évite de “réparer au cas par cas” et de perdre du temps.

FAQ

Pourquoi une galerie Divi 5 s’arrête au survol ?

Parce que Divi applique souvent une pause automatique au hover via son JavaScript, même si l’option n’existe pas dans l’UI.

Le voile invisible bloque tout, c’est normal ?

Oui. Le voile intercepte la souris. Cela empêche le hover, mais aussi tous les clics et survols.

Peut-on garder le défilement et conserver les flèches cliquables ?

Oui, mais il faut une variante qui ne couvre pas les flèches. Cela dépend de la mise en page exacte et demande une adaptation.

D’où vient le padding ajouté au hover sur un bouton Divi ?

D’un preset global Divi (style “default”) qui injecte du CSS au hover. Ce n’est pas un réglage local du module.

Comment ajouter une icône personnalisée si Divi ne l’a pas ?

Le plus propre est d’utiliser un SVG dans un module Code et de le styliser en CSS.