3 min de lecture
Une ancre Divi relie un bouton ou un lien à un endroit précis de la page. Le lien doit reprendre exactement l’identifiant de la section, et le titre doit rester visible après le défilement.
Le trajet du lien
- Bouton #devis
- Section avec ID devis
- Titre visible
Qu’est-ce qu’une ancre de lien dans Divi ?
- Une ancre est un identifiant placé sur la section à atteindre, par exemple
devis. - Le bouton vise cet identifiant avec
#devissur la même page, ou avec/contact/#devisdepuis une autre page.
Dans le constructeur, sélectionnez la section qui contient le titre à atteindre. Dans ses réglages avancés, cherchez l’attribut ID. Donnez-lui un identifiant court, par exemple devis, sans dièse ni espace. Utilisez cet identifiant une seule fois sur la page.
Avant de modifier le bouton
- L’adresse de la page qui contient la section cible.
- L’identifiant exact de la section et les éventuels doublons dans la page.
- L’emplacement du bouton, sur une seule page ou dans un modèle partagé.
Renseigner le lien vers une ancre Divi
Sur la même page, utilisez #devis comme destination. Depuis une autre page, ajoutez le fragment à l’adresse de destination, par exemple /contact/#devis. Si le bouton appartient à un en-tête global, le lien avec le chemin complet est généralement adapté lorsqu’il doit viser une page précise depuis tout le site.
Éviter que l’en-tête fixe masque une ancre Divi
Si le navigateur arrive au bon endroit mais que l’en-tête masque le titre, appliquez une marge de défilement à la cible, par exemple #devis { scroll-margin-top: 100px; }. Les 100 pixels sont un exemple. Mesurez la hauteur réelle de l’en-tête et adaptez la valeur sur téléphone si sa hauteur change.
Exemple de diagnostic
Sur une page de contact, l’URL avec le fragment #devis doit atteindre le formulaire même lorsqu’elle est ouverte dans un nouvel onglet. Si seul le clic depuis le menu mobile échoue, vérifiez que le menu se ferme et que le lien vise la même URL.
Besoin de corriger les liens de votre site Divi ?
Je peux examiner le comportement des boutons et du menu sur ordinateur et téléphone.
Diagnostiquer une ancre Divi qui ne défile pas
Ouvrez directement l’adresse qui se termine par le fragment. Si elle fonctionne, regardez la destination du bouton. Si elle échoue aussi, vérifiez l’ID sur la page publiée. Lorsque deux sections desktop et mobile portent le même ID, placez la cible sur un conteneur commun ou donnez des identifiants distincts.
Dans le Visual Builder, sélectionnez la section, puis contrôlez en public que l’ID CSS est bien présent sur l’élément rendu. Sur une mise en page responsive, une section masquée peut laisser un lien sans cible visible. Placez alors l’identifiant sur une section qui reste affichée à toutes les largeurs concernées.
Pour les liens entre pages, le guide sur le maillage interne complète les contrôles d’ancre. Comment faire un bon maillage interne WordPress ?
Tester une ancre Divi depuis deux pages
Un bouton du menu global doit amener à la section « Devis » de la page Contact. Testez-le depuis Contact puis depuis une prestation. Si le lien pointe seulement vers #devis, il cherchera une cible sur la page courante.
- Attribuez l’identifiant devis à la section, une seule fois sur la page Contact.
- Dans le menu global, utilisez /contact/#devis. Vérifiez le lien en public depuis les deux pages.
- Sur téléphone, contrôlez que le titre reste visible sous l’en-tête fixe et que le formulaire est utilisable.
Pour vérifier une ancre Divi depuis une autre page, ouvrez l’URL complète avec son fragment. Si le navigateur arrive à la bonne section mais que le titre est caché, corrigez l’espace au-dessus de la cible.
Vérifier le résultat
| Symptôme observé | Premier contrôle |
|---|---|
| Aucun déplacement | Identifiant et destination du lien |
| Le titre est caché | Hauteur de l’en-tête et marge de défilement |
| Le lien marche sur une seule page | Chemin complet et portée du lien |
- Tester depuis la page et depuis une autre page.
- Vérifier la cible sur téléphone avec le menu fermé.
- Contrôler que le titre reste lisible après le défilement.
Consulter la documentation de référence.
Questions fréquentes
Pourquoi le lien depuis une autre page ne fonctionne-t-il pas ?
Un fragment seul reste sur la page en cours. Ajoutez le chemin de la page de destination devant le fragment.
Peut-on réutiliser le même identifiant sur deux sections d’une page ?
Gardez un seul élément avec cet identifiant. Si deux variantes desktop et mobile coexistent, placez la cible sur un conteneur commun.
Comment distinguer un lien cassé d’un problème de défilement ?
Ouvrez directement l’adresse avec son fragment. Si la section est atteinte, inspectez la destination du bouton. Si le titre reste masqué, contrôlez la hauteur de l’en-tête.
Qu’est-ce qu’une ancre de lien ?
C’est une cible identifiée dans une page. Si son identifiant est devis, le lien #devis y mène depuis la même page. Depuis une autre page, ajoutez le chemin de la page cible devant #devis.
Pourquoi le titre est-il caché après le clic ?
Un en-tête fixe peut recouvrir le début de la section. Testez depuis une autre page sur téléphone et sur ordinateur, puis ajustez l’espace de défilement de la cible. À lire aussi, le menu mobile Divi.
À retenir
Sur téléphone, ouvrez l’adresse avec son fragment et vérifiez que le titre reste visible après avoir suivi l’ancre Divi.
