La fonctionnalité de défilement vers l'ancre d'Elementor fonctionne correctement sur ordinateur, mais présente des dysfonctionnements sur mobile plus fréquents que prévu. Les causes les plus courantes sont les en-têtes fixes masquant les sections cibles, les décalages de défilement incorrects, les conflits de plugins et les restrictions JavaScript sur les appareils mobiles.
Ce guide couvre toutes les raisons pour lesquelles ce problème survient et la solution exacte pour chacune d'elles, afin que vos liens d'ancrage fonctionnent correctement sur tous les appareils.
Le problème de défilement vers l'ancre sur mobile avec Elementor est généralement dû à des en-têtes fixes masquant la section cible, à des paramètres de décalage d'ancre incorrects, à des conflits de plugins ou de thèmes, à des cibles d'ancre manquantes ou à des restrictions JavaScript sur les appareils mobiles. Ajuster le décalage de défilement, corriger les identifiants d'ancre et tester avec un thème par défaut résout la plupart des problèmes.
Que sont les liens d'ancrage et pourquoi sont-ils importants ?
Les liens d'ancrage permettent aux visiteurs d'accéder directement à des sections spécifiques d'une page sans avoir à faire défiler. Sur les pages longues, ils améliorent considérablement la vitesse de navigation et l'expérience utilisateur, notamment sur mobile, où le défilement d'un contenu dense engendre davantage de difficultés.
Les moteurs de recherche analysent également la manière dont les visiteurs interagissent avec votre contenu. Un temps passé plus long sur la page et un taux de rebond plus faible, grâce à une navigation optimisée, envoient des signaux d'engagement plus forts qui favorisent le référencement naturel sur le long terme.
Qu'est-ce qu'une ancre dans Elementor ?
Le widget d'ancre de menu Elementor vous permet d'ajouter un point d'ancrage nommé à n'importe quelle section de votre page. Vous attribuez un identifiant unique à l'ancre et vous pouvez y créer un lien depuis du texte, un bouton ou un élément de menu de navigation.
Lorsqu'un visiteur clique sur le lien, la page défile directement jusqu'à la section correspondante. Sur mobile, ce comportement dépend d'une configuration de décalage correcte et de la prise en charge de JavaScript, ce qui est souvent à l'origine des problèmes.
Pourquoi les liens d'ancrage sont-ils importants pour l'UX et le SEO ?
Les liens d'ancrage améliorent la navigation, réduisent le taux de rebond et contribuent à un meilleur référencement naturel sur mobile et ordinateur. Voici leurs principaux avantages.
Améliorer l'expérience utilisateur
Comme mentionné précédemment, les liens d'ancrage facilitent la recherche rapide d'informations pertinentes. Si un article ou une page d'un site web est long(e), cette fonctionnalité simplifie la navigation des utilisateurs.
Ils peuvent accéder directement au haut ou au bas de la page/de l'article d'un simple clic, ce qui améliore l'expérience utilisateur sur mobile. L'activation du défilement fluide permet d'optimiser encore davantage cette expérience en offrant aux utilisateurs la possibilité de naviguer vers des sections spécifiques sans à-coups.
Navigation web efficace avec défilement fluide
De même, au lieu d'un défilement infini, la fonction de lien d'ancrage permet aux utilisateurs d'accéder directement aux sections de la page qui les intéressent, assurant ainsi une navigation fluide au sein d'une même page Web.
Cela rend la navigation sur les sites web mobiles plus efficace, permettant aux utilisateurs de gagner du temps, ce qu'ils apprécieront.
Navigation rapide avec liens d'ancrage
Une navigation difficile est l'une des principales causes d'un taux de rebond élevé sur mobile. En utilisant la fonctionnalité de liens d'ancrage d'Elementor, les propriétaires de sites web peuvent augmenter le temps passé sur leur site et le nombre de pages vues, réduisant ainsi le taux de rebond.
Un taux de rebond plus faible peut, à son tour, améliorer le classement de votre site dans les SERP. De plus, une navigation visuellement attrayante peut encore améliorer l'expérience utilisateur et réduire les taux de rebond.
Référencement amélioré
L'utilisation de liens d'ancrage présente plusieurs avantages : une meilleure expérience utilisateur, une augmentation du temps passé sur le site et du nombre de pages vues, une diminution du taux de rebond et un meilleur référencement. Tous ces avantages contribuent directement à améliorer le référencement naturel de votre site.
Causes du problème de défilement vers l'ancre dans Elementor sur mobile
Avant d'aborder la résolution du problème de défilement vers l'ancre dans Elementor sur mobile, examinons les principales causes de ce problème. En identifiant la cause, vous pourrez rapidement mettre en œuvre la solution adéquate.
Paramètres Elementor
Avant de parcourir les raisons pour lesquelles la fonction de défilement vers l'ancre ne fonctionne pas sur mobile, commencez par vérifier les paramètres dans Elementor.
Il se peut que la fonction « Défilement jusqu'à l'ancre » soit désactivée ou mal configurée. Dans ce cas, vous pouvez résoudre l'erreur en activant la fonction et en la reconfigurant.
Conflit de thème ou de plugin
Dans la plupart des cas, si un thème ou une extension n'est pas compatible avec Elementor, la fonction de défilement vers l'ancre risque de ne pas fonctionner sur mobile. Cette incompatibilité peut perturber le bon fonctionnement de cette fonction. Un trop grand nombre d'extensions WordPress peut également être à l'origine de ce problème.
Manque de cibles
Les liens d'ancrage possèdent un attribut « target » qui spécifie l'action déclenchée par un clic. Si cet attribut ou le texte d'ancrage est absent ou vide, un problème de défilement vers l'ancre peut survenir sur mobile.
Problèmes liés à JavaScript, HTML ou au cache
L'incompatibilité ou les restrictions de JavaScript sur les appareils mobiles peuvent être la raison pour laquelle la fonctionnalité de défilement vers l'ancre d'Elementor ne fonctionne pas sur mobile.
La mise en cache est un autre facteur susceptible d'empêcher le bon fonctionnement des liens d'ancrage. Enfin, une configuration incorrecte de la structure HTML d'une page ou d'un article peut également affecter le fonctionnement de ces liens.
L'ajustement du comportement de défilement à l'aide de widgets spécifiques ou de CSS personnalisé peut également résoudre les problèmes liés aux liens d'ancrage, car les navigateurs modernes prennent en charge les solutions CSS natives, ce qui les rend plus accessibles et préférables aux alternatives JavaScript.
Mauvais état du serveur
Si vous utilisez hébergement web bon marché sans infrastructure serveur adéquate, il se peut que le défilement jusqu'à l'ancre ne fonctionne pas sur mobile.
Un serveur en parfait état est essentiel au bon fonctionnement des extensions sur un site WordPress. Un serveur défaillant peut entraîner des conflits entre extensions et, par conséquent, affecter le fonctionnement des liens d'ancrage sur mobile.
Le problème de défilement vers l'ancre d'Elementor n'est-il pas encore résolu ?
L'équipe d'assistance WordPress peut vous aider à diagnostiquer la cause du problème et à le résoudre rapidement afin que la navigation de votre site fonctionne correctement sur tous les appareils.
Méthodes rapides pour résoudre le problème de défilement vers l'ancre dans Elementor sur mobile
Une fois la cause du problème de défilement vers l'ancre identifiée sur mobile, vous pouvez utiliser les solutions rapides ci-dessous pour le résoudre. Ces solutions sont simples et ne nécessitent aucune compétence technique.
Toutefois, si vous avez besoin d'aide professionnelle pour les mettre en œuvre, contactez un expert WordPress.
Méthode 1 : Choisir un thème WordPress par défaut
La solution la plus simple pour résoudre le problème de défilement jusqu'à l'ancre sur mobile consiste à revenir à un thème WordPress par défaut.
Si cette solution fonctionne, vous saurez que le problème venait de l'incompatibilité du thème avec l'extension Elementor. Avant de revenir au thème par défaut, effectuez une sauvegarde de votre site web.
Méthode 2 : Créer des cibles
Si la publication ou la page ne contient pas de lien cible, la fonction de défilement vers l'ancre ne fonctionnera pas correctement sur les appareils mobiles. Pour résoudre ce problème, créez des liens cibles et mettez-les en surbrillance. Voici comment procéder :
- Configurez le thème et saisissez le code suivant
.menu-item a{ Couleur : noir; }- Ensuite, vous aurez besoin du code ci-dessous pour mettre en évidence le lien cible
.menu-itema.mPS2id-highlight{ couleur: bleu; }Méthode 3 : Utiliser un filtre JavaScript
Vous pouvez également ajouter un filtre JavaScript au widget d'ancre de menu Elementor. Voici le code permettant d'ajouter le filtre JavaScript requis.
ajouter_action( 'wp_footer', function() { if ( ! defined( 'ELEMENTOR_VERSION' ) ) { return; } ?><script> jQuery( function( $ ) { $( window ).on( 'elementor/frontend/init', function() { elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) { var isMobile = $(window).width() <= 760; if (isMobile) { return scrollTop - 1000; } else { return scrollTop; } } ); } ); } ); </script>Méthode 4 : Ajuster le défilement
Une autre solution simple pour corriger le problème de défilement vers l'ancre dans Elementor sur mobile consiste à ajuster le décalage de défilement lorsque le menu est en mode mobile. Vous pouvez utiliser un filtre JavaScript pour ajuster cette valeur.
Méthode 5 : Empêcher la fermeture du menu
Sur mobile, un problème fréquent est la fermeture trop rapide du menu après avoir cliqué sur un lien, avant la fin de l'animation de défilement. Cela perturbe le défilement des ancres.
Pour résoudre ce problème, retardez la fermeture du menu à l'aide de JavaScript ou d'extensions comme Elementor Custom Code. Vous pouvez également modifier le code JavaScript pour que le menu reste ouvert jusqu'à la fin du défilement.
Voici un exemple simple utilisant jQuery :
jQuery(document).ready(function($){ $('.elementor-nav-menu a').click(function(e){ e.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: $(target).offset().top }, 600, function(){ // Fermer le menu après le défilement $('.elementor-menu-toggle').trigger('click'); }); }); });Meilleurs plugins d'ancrage et de défilement pour WordPress
Si aucune des solutions ci-dessus ne résout le problème de défilement vers l'ancre d'Elementor sur mobile, envisagez d'utiliser un autre plugin spécifiquement dédié à cette fonctionnalité.
Vous trouverez ci-dessous quelques extensions WordPress pour l'ancrage et le défilement, également appelées extensions de liens d'ancrage ou de liens de navigation. Elles offrent de nombreuses fonctionnalités permettant d'améliorer l'expérience utilisateur.
Défilement infini WordPress : Chargement Ajax Plus
Il s'agit d'une extension légère comptant plus de 50 000 installations actives. Elle permet d'ajouter la fonctionnalité de défilement vers une ancre à un article, une page, une page à chargement différé, aux commentaires, et plus encore.
Il permet également de créer des shortcodes personnalisés pour le défilement infini. L'extension Ajax Load More est compatible avec WooCommerce et Easy Digital Downloads. De plus, elle est compatible avec les sites multisites et vous permet de personnaliser ses paramètres.
Tarification : La version de base est gratuite. Le la version premium prix de commence à 149 $ pour un seul site web.
Défilez la page jusqu'à l'identifiant
Ce plugin permet d'ajouter une animation de défilement fluide aux liens d'ancrage. Il offre des fonctionnalités avancées, telles que l'animation de défilement ajustable pour les sites web monopages, les liens de retour en haut de page et la navigation interne.
Il permet également de mettre en évidence le lien et le texte ciblés grâce à des classes CSS prêtes à l'emploi. Parmi les autres fonctionnalités, citons le défilement décalé et le décalage spécifique aux liens.
Tarification: L' extension Page Scroll to Id est gratuite et compatible avec WordPress version 3.3 ou supérieure.
Ultimate Blocks : Extension Gutenberg Blocks
Le plugin Ultimate Blocks offre une gamme de fonctionnalités pour améliorer l'expérience utilisateur. Grâce aux liens d'ancrage et à une vue de défilement, il génère une table des matières à partir des titres.
Elle permet d'activer ou de désactiver le défilement fluide. De plus, vous pouvez ajuster le décalage de défilement sur mobile et diviser la table des matières en colonnes.
Tarification: Disponible gratuitement !
WPFront Défilement Haut
Il s'agit d'une autre excellente extension pour le défilement WordPress, avec plus de 200 000 installations actives. Elle offre de nombreuses options de personnalisation, comme l'affichage de boutons lors du défilement vers le bas ou une animation pour le bouton de retour en haut de page.
WP Front Scroll Top est une extension simple d'utilisation qui vous permet de créer du texte, des images et des boutons Font Awesome. De plus, grâce à cette extension, vous pouvez créer des liens vers un élément de la page ou vers d'autres pages à l'aide d'URL.
Tarification: Vous pouvez télécharger ce plugin gratuitement.
Capturez le défilement infini
Comme son nom l'indique, cette extension permet d'ajouter un défilement infini aux pages et aux articles. C'est une extension légère qui permet aux utilisateurs de charger et de faire défiler le contenu plus rapidement.
Il vous permet également de cliquer ou de faire défiler pour charger du contenu, et vous pouvez ajouter une image personnalisée.
Le plugin Catch à défilement infini est compatible avec WordPress version 5.7 ou supérieure et compte 20 000 installations actives.
Tarification : Gratuit sur WordPress.org. Catch Infinite Scroll PRO coûte quant à lui 24,99 $ pour une licence d’un an.
Conclusion : Problème de défilement vers l’ancre
Le problème de défilement vers les ancres sur mobile avec Elementor peut être résolu une fois la cause identifiée. Commencez par vérifier vos paramètres Elementor et vider le cache. Si le problème persiste, essayez avec un thème par défaut, ajoutez les ancres manquantes et ajustez le décalage de défilement sur mobile.
Pour les problèmes récurrents, un plugin de défilement dédié offre un contrôle plus précis du comportement des ancres que les fonctionnalités intégrées d'Elementor. Corrigez le problème une fois pour toutes, testez sur différents appareils, et votre navigation mobile fonctionnera de manière optimale et sans incident.
FAQ concernant le problème de défilement vers l'ancre sur Elementor sur mobile
Pourquoi le lien d'ancrage Elementor ne défile-t-il pas jusqu'à la position correcte sur mobile ?
Les en-têtes fixes sont la cause la plus fréquente. La page défile jusqu'à la position correcte, mais l'en-tête chevauche la section cible, la rendant invisible. Ajustez le décalage de défilement dans votre filtre JavaScript ou augmentez la marge supérieure de la section cible pour compenser la hauteur de l'en-tête sur mobile.
Pourquoi l'ancre de menu fonctionne-t-elle sur ordinateur mais pas sur mobile ?
Le menu mobile utilise souvent une structure de navigation différente de celle du menu sur ordinateur. Vérifiez que le même identifiant de lien d'ancrage est associé à l'élément de menu dans les deux versions (ordinateur et mobile). Testez les deux affichages après toute modification afin de vous assurer que le comportement au défilement est cohérent.
Les en-têtes fixes peuvent-ils causer des problèmes de défilement des ancres Elementor sur mobile ?
Oui. Lorsque la page défile jusqu'à la position d'ancrage, l'en-tête fixe chevauche la section cible et le contenu apparaît masqué. Ajoutez une marge intérieure supérieure à la section cible égale à la hauteur de l'en-tête ou ajustez le décalage de défilement JavaScript pour compenser l'en-tête sur mobile.
Que dois-je vérifier si le problème persiste après l'ajout d'un widget d'ancre de menu ?
Vérifiez que l'identifiant du widget d'ancrage correspond exactement à l'attribut href du lien, en respectant la casse. Videz tous les caches, y compris celui de votre navigateur, les caches des plugins et les caches du CDN. Testez sur un appareil mobile réel plutôt que sur un émulateur de navigateur, car le comportement au défilement peut différer entre les deux environnements.
Elementor Pro a-t-il une incidence sur le défilement des ancres sur mobile ?
Oui. Les fonctionnalités d'Elementor Pro, comme les effets de mouvement, les en-têtes fixes et les modèles d'en-tête personnalisés, peuvent perturber le défilement des ancres sur mobile. Vérifiez les paramètres de vos en-têtes fixes et désactivez les effets de mouvement sur mobile si le problème est apparu après l'activation des fonctionnalités d'Elementor Pro. Testez chaque fonctionnalité individuellement pour identifier celle qui est à l'origine du conflit.
