La résolution du problème de défilement vers l'ancre d'Elementor sur mobile est cruciale pour garantir une navigation fluide et une expérience utilisateur optimale .
Avec plus de 5 millions d'installations actives, Elementor est un outil incontournable pour la création de sites web WordPress , offrant une flexibilité de conception incroyable. Cependant, comme tout outil, il peut parfois rencontrer des problèmes ; l'un des plus courants est l'affichage incorrect du nom des ancres sur les appareils mobiles.
Mais pas de panique ! Des solutions rapides à la modification des fichiers clés, en passant par la consultation du journal et la prise de notes sur les ajustements essentiels, ce guide vous aidera à rétablir le bon fonctionnement de votre site en un rien de temps.
En bref : Solutions rapides aux problèmes de navigation mobile
- Les liens d'ancrage permettent aux utilisateurs d'accéder rapidement à des sections spécifiques, améliorant ainsi la navigation, le temps passé sur la page et l'expérience globale de navigation mobile.
- Les problèmes surviennent généralement en raison de paramètres incorrects, de conflits entre plugins ou thèmes, de problèmes de cache, de cibles manquantes ou de problèmes de configuration JavaScript et HTML.
- Les solutions simples consistent à vérifier les paramètres d'Elementor, à créer des cibles d'ancrage appropriées, à ajuster le décalage de défilement ou à tester avec un thème par défaut.
- Si les problèmes persistent, vérifiez les performances du serveur, résolvez les conflits ou utilisez des plugins de défilement dédiés pour garantir une navigation fluide sur les appareils mobiles.
Comprendre les liens d'ancrage
Les liens d'ancrage sont un outil puissant en conception web qui permet aux utilisateurs de naviguer vers des sections spécifiques d'une page web sans avoir à faire défiler la page entière.
Ils sont particulièrement utiles pour les pages longues qui obligent les utilisateurs à faire défiler un contenu important. Dans cette section, nous explorerons le concept des liens d'ancrage, leur fonctionnement et leurs avantages
Qu'est-ce qu'une ancre dans Elementor ?
Également appelé menu de navigation, le menu d'ancrage dans Elementor aide les utilisateurs à naviguer au sein d'une page ou d'un article
Dans Elementor, les ancres peuvent être comparées à la table des matières de ce blog. Puisque le blog comporte plusieurs sections, une ancre pour chaque section facilite la navigation.
Par exemple, dans cet article de blog, un utilisateur peut accéder directement à la section « Correctifs pour le problème de défilement vers l'ancre d'Elementor sur mobile » en cliquant sur le lien.
Cette fonctionnalité de « lien d'ancrage » permet aux visiteurs d'un site web de trouver rapidement l'information qu'ils recherchent, améliorant ainsi leur expérience utilisateur. De plus, elle peut contribuer à augmenter le temps passé sur la page, un facteur de référencement.
Dans Elementor, le widget d'ancre de menu vous permet d'ajouter facilement une ancre à votre page ou article. Il vous suffit d'attribuer un nom ou un identifiant unique à l'ancre et de la lier via du texte, un bouton ou un élément de menu.
Article connexe : Comment résoudre le problème de chargement du panneau de widgets dans Elementor
Avantages de l'utilisation d'une ancre Elementor
L'amélioration de l'accessibilité du site web est l'un des principaux avantages de l'utilisation d'une ancre Elementor. Par ailleurs, voici d'autres avantages de l'ancre Elementor :
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 en un seul clic, ce qui améliore l'expérience utilisateur sur mobile. L'activation du défilement fluide améliore encore cette expérience en permettant aux utilisateurs 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 .
En savoir plus sur : Les meilleures méthodes pour ajouter le sélecteur de langue Elementor à 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, le défilement vers l'ancre peut ne pas fonctionner sur mobile. Cette incompatibilité peut perturber le bon fonctionnement de cette fonctionnalité. 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 n'est pas spécifié, est absent ou vide, un problème de défilement vers le lien 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 .
Lire la suite : Les meilleurs plugins de sauvegarde WordPress
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'); }); }); });Article connexe : Résolution du problème d’animation des titres dans Elementor
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 prix de la version premium commence à 149 $ pour un seul site web.
En savoir plus sur : Les meilleurs modèles Elementor pour WordPress
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 !
Lire la suite : Test du plugin QI Addons pour Elementor
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 offre également la possibilité de cliquer ou de faire défiler pour charger le 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.
Lire la suite : Elementor bloqué sur l’écran de chargement ? Voici comment résoudre le problème
Conclusion
Corriger les erreurs de votre site web doit être une priorité absolue si vous souhaitez obtenir un bon classement dans les résultats de recherche.
Des problèmes comme le dysfonctionnement du défilement vers l'ancre dans Elementor sur mobile peuvent nuire à l'expérience utilisateur et entraîner un taux de rebond élevé. Il est donc important de corriger ce problème immédiatement pour garantir une navigation fluide.
La fonctionnalité de défilement vers l'ancre d'Elementor ne fonctionne pas sur mobile, mais ce problème peut être résolu une fois la cause identifiée. Avant de consulter la liste des causes possibles, vérifiez si cette fonctionnalité est activée dans Elementor. Ensuite, vérifiez la présence de problèmes de cache et de cibles vides.
Si aucun de ces éléments n'est à l'origine du problème de défilement vers l'ancre sur mobile, vérifiez les problèmes plus avancés tels que les problèmes JavaScript et HTML, la mauvaise santé du serveur et les conflits de thème et de plugin.
Une fois la cause ou le problème identifié, vous pouvez mettre en œuvre les solutions mentionnées ici.
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 ?
Cela se produit généralement à cause d'en-têtes fixes ou de problèmes d'espacement. Le widget d'ancrage du menu peut défiler correctement sur ordinateur, mais sur d'autres appareils, l'en-tête masque la section.
Ajustez le décalage ou l'espacement de l'ancre pour que la section apparaisse à la bonne position après avoir cliqué sur le lien du menu d'ancre.
Pourquoi l'ancre du menu fonctionne-t-elle sur ordinateur mais pas dans le menu mobile ?
Votre menu mobile peut utiliser une structure de liens ou de navigation différente. Assurez-vous que le même lien est associé aux ancres du menu sur les versions ordinateur et mobile. Testez la navigation après avoir changé d'affichage pour vérifier que la section se charge correctement.
Les en-têtes fixes peuvent-ils causer des problèmes de défilement des ancres dans Elementor ?
Oui. Les en-têtes fixes masquent souvent la section cible. Lorsque la page défile, l'ancre se déplace derrière l'en-tête, rendant le contenu invisible. Ajustez le décalage de l'en-tête ou ajoutez une marge intérieure pour que la section reste visible sur tous les appareils.
Que dois-je vérifier si le problème persiste après l'ajout d'un widget d'ancre de menu ?
Vérifiez l'identifiant de l'ancre, l'espacement et les paramètres de navigation. Assurez-vous que l'identifiant du widget d'ancre du menu correspond exactement au lien de l'ancre. Videz le cache, testez dans un autre onglet et prévisualisez sur ordinateur et mobile pour confirmer la correction.
Elementor Pro a-t-il une incidence sur le défilement des ancres sur mobile ?
Il arrive que certaines fonctionnalités d'Elementor Pro, comme les effets de mouvement, les paramètres fixes ou les en-têtes personnalisés, affectent les liens. Vérifiez les paramètres d'en-tête, le placement des liens et testez-les dans des sections telles que « Contact », « Musique » ou d'autres blocs de la page pour vous assurer que le défilement se déroule correctement.
