La réparation du problème de défilement Elementor sur mobile est cruciale pour garantir une navigation transparente et une expérience utilisateur fluide . Avec plus de 5 millions d'installations actives, Elementor est un constructeur de sites Web WordPress , offre une flexibilité de conception incroyable. Cependant, comme n'importe quel outil, il peut parfois rencontrer des problèmes, l'un des plus courants étant le nom d'ancrage qui ne fonctionne pas correctement sur les appareils mobiles.
Mais ne vous inquiétez pas! Des hacks rapides à l'ajustement des fichiers clés, de la vérification du journal et de la prise de notes de réglages essentiels, ce guide vous aidera à restaurer le bon fonctionnement de votre site en un rien de temps. Plongeons et remettons votre navigation Elementor sur la bonne voie!
En savoir plus sur : les meilleurs modèles Elementor pour WordPress
Comprendre les liens d'ancrage
Les liens d'ancrage sont un outil puissant dans la 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 longues pages qui obligent les utilisateurs à faire défiler beaucoup de contenu. Dans cette section, nous explorerons le concept de liens d'ancrage, leur fonctionnement et leurs avantages.
Qu'est-ce qu'une ancre dans Elementor?
Également connue sous le nom de menu Jump, le menu d'ancrage dans Elementor aide les utilisateurs à naviguer dans une page ou un message. L'ancre Elementor peut être comparée à la table des matières utilisées pour ce blog. Étant donné que le blog a plusieurs sections, une ancre pour chaque section facilite la navigation.
Par exemple, dans ce billet de blog, un utilisateur peut passer directement à la section «Correcteurs pour le problème de défilement Elementor sur mobile» en cliquant sur le lien.
Cette fonctionnalité de « lien d'ancrage » permet aux visiteurs du site Web de trouver rapidement les informations qu'ils recherchent, ce qui contribue à améliorer l'expérience utilisateur. De plus, cela peut contribuer à augmenter le temps de séjour, qui est l’un des facteurs de classement.
Dans Elementor, le widget d'ancrage de menu peut vous aider à ajouter une ancre à votre page ou publication. Ajoutez simplement un nom ou un identifiant unique à l'ancre et liez-le via un texte, un bouton ou un élément de menu.
Connexe : Comment réparer le panneau de widgets qui ne se charge pas 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. En plus de cela, les autres avantages de l’ancre Elementor sont :
Améliorer l'expérience utilisateur
Comme mentionné précédemment, les liens d'ancrage facilitent la recherche rapidement des informations pertinentes. Si une publication ou une page en particulier sur un site Web est longue, la fonction d'ancrage permet aux utilisateurs plus simples de le naviguer.
Ils peuvent sauter en haut ou en bas de la page / publication en cliquant sur un lien, ce qui aide à améliorer l'expérience utilisateur sur mobile. L'activation de défilement en douceur peut améliorer davantage l'expérience utilisateur en permettant aux utilisateurs de glisser vers des sections spécifiques sans mouvements brusques.
Navigation efficace sur le site Web avec un défilement fluide
De même, plutôt que de faire défiler sans fin, grâce à la fonction de lien d'ancrage, les utilisateurs peuvent accéder directement aux mêmes sections de page qu'ils souhaitent, garantissant ainsi une navigation fluide au sein d'une seule page Web. Cela rend la navigation sur les sites Web plus efficace sur mobile, ce qui permet aux utilisateurs de gagner du temps, ce qu'ils apprécieront.
Navigation rapide avec des liens d'ancrage
Une mauvaise navigation est l'une des principales raisons d'un taux de rebond élevé sur le mobile. En utilisant la fonctionnalité du lien d'ancrage Elementor, les propriétaires de sites Web peuvent augmenter le temps de séjour et les pages vues, ce qui aidera à réduire le taux de rebond.
Un taux de rebond inférieur, à son tour, peut aider à augmenter le classement de votre site sur les SERP. De plus, rendre la navigation visuellement attrayante peut encore améliorer l'expérience utilisateur et réduire les taux de rebond.
SEO amélioré
Certains des avantages de l'utilisation de liens d'ancrage sont une expérience utilisateur améliorée, une augmentation du temps de séjour et des pages vues, un taux de rebond plus faible et un classement plus élevé. Tous ces avantages amélioreront directement le référencement de votre site .
En savoir plus sur : les meilleures méthodes pour ajouter un sélecteur de langage Elementor à votre site
Raisons du problème Elementor Scroll-to-Anchor sur mobile
Avant de voir comment résoudre le problème de défilement vers l'ancre d'Elementor sur mobile, examinons les principales raisons de ce problème. En déterminant la raison, vous pouvez rapidement mettre en œuvre le correctif approprié pour résoudre ce problème.
Paramètres de l'élément
Avant de parcourir les raisons pour lesquelles la fonctionnalité 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 fonctionnalité « défilement vers l’ancre » soit désactivée ou mal configurée. Si tel est le cas, vous pouvez corriger l'erreur en activant la fonctionnalité et en la configurant à nouveau.
Conflit de thème ou de plugin
Dans la plupart des cas, si un thème ou un plugin n'est pas compatible avec Elementor, cela pourrait entraîner le problème du défilement à l'ancienne sur le mobile. L'incompatibilité pourrait interférer avec le fonctionnement fluide de cette fonctionnalité. Trop de plugins WordPress pourraient également conduire à ce problème.
Connexe : Meilleurs modèles ou thèmes de page de destination Elementor
Manque de cibles
Les liens d'ancrage ont un attribut cible qui spécifie « une action » une fois que vous avez cliqué sur le lien. texte cible ou n'est pas spécifié ou est manquant/vide, cela peut entraîner un problème de défilement vers l'ancre sur mobile.
Problèmes de JavaScript, HTML ou cache
L'incompatibilité ou les restrictions de JavaScript sur les appareils mobiles pourraient être une raison pour la fonctionnalité de défilement élémentor sans fonctionnement sur le mobile. La mise en cache est un autre problème qui pourrait empêcher les liens d'ancrage de fonctionner de manière optimale. Enfin, s'il y a un problème de configuration avec la structure HTML d'une page ou d'un message, il pourrait entraver la fonctionnalité des liens d'ancrage.
L'ajustement du comportement de défilement à l'aide de widgets spécifiques ou de CSS personnalisés peut également résoudre les problèmes liés aux liens d'ancrage, car les navigateurs modernes prennent en charge les solutions CSS natives les rendent plus accessibles et préférables aux alternatives JavaScript.
Mauvaise santé du serveur
Si vous utilisez un hébergement Web bon marché qui ne dispose pas d'une infrastructure de serveur appropriée, cela pourrait entraîner le problème du défilement vers l'ancre qui ne fonctionnerait pas sur mobile. Une santé optimale du serveur est essentielle pour que les plugins fonctionnent de manière transparente sur un site Web WordPress. L’absence de cela pourrait entraîner un conflit de plug-in et, dans ce cas, pourrait avoir un impact sur la fonctionnalité du lien d’ancrage sur mobile.
Lire la suite : Addons Qi pour Elementor - Revue du plugin
Elementor Scroll-to-Anchor Issue Not encore fixe?
Notre équipe de support WordPress peut aider à résoudre ce problème.
Corrections rapides pour le problème de défilement élémentor sur mobile
Une fois que vous connaissez la raison du problème de défilement sur mobile, vous pouvez utiliser les correctifs rapides ci-dessous pour le rectifier. Ce sont des correctifs simples qui ne nécessitent pas d'expertise technique. Cependant, si vous avez besoin d'une aide professionnelle pour les mettre en œuvre, contactez un expert WordPress .
Choisissez un thème WordPress par défaut
Le moyen le plus simple de résoudre le problème de défilement vers ancre sur mobile est de revenir à un thème WordPress par défaut . Si cette solution fonctionne, vous savez que la raison était l'incompatibilité du thème avec le plugin Elementor. Avant de revenir au thème par défaut, effectuez une sauvegarde du site Web .
Lire la suite : meilleurs plugins de sauvegarde WordPress
Créer des cibles
Si la publication ou la page n'a pas de lien cible, la fonctionnalité de défilement à l'ancienne 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:
- Configurez le thème et tapez le code suivant
.menu-item a{ Couleur : noir ; }- Ensuite, vous avez besoin du code ci-dessous pour mettre en surbrillance le lien cible
.menu-itema.mPS2id-highlight{ couleur : bleu ; }Utilisez un filtre JavaScript
Vous pouvez également ajouter un filtre JavaScript au widget d'ancrage du menu Elementor . Voici le code pour ajouter le filtre JavaScript requis.
add_action( 'wp_footer', function() { if ( ! défini( '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>
Ajuster le défilement
Un autre moyen facile de résoudre le problème de défilement élémentor sur mobile est d'ajuster le décalage de défilement lorsque le menu est en mode mobile. Vous pouvez utiliser un filtre JavaScript pour ajuster la valeur de défilement.
Empêcher le menu de fermer
Un problème courant sur mobile est le menu fermant trop rapidement après avoir appuyé sur un lien, avant la fin de l'animation de défilement. Cela interrompt le comportement de défilement de l'ancre. Pour résoudre ce problème, retardez le menu Fermer à l'aide de JavaScript ou des plugins comme le code personnalisé Elementor. Alternativement, modifiez le JavaScript pour garder le menu ouvert jusqu'à la fin du parchemin.
Voici un exemple de base en utilisant jQuery:
jQuery (document) .ready (function ($) {$ ('. elementor-nav-menu a'). cliquez (fonction (e) {e.PreventDefault (); var Target = $ (this) .attr ('href'); $ ('html, body'). Animate ({Scrolltop: $ (cible) .offset (). Scroll $ ('. Elementor-Menu-Toggle'). Trigger ('click');});
En relation : Correction du titre animé Elementor qui ne fonctionne pas
Meilleurs plugins d'ancrage et de défilement pour WordPress
Si aucun des correctifs ci-dessus, résolvez le problème de défilement élémentor sur mobile, envisagez d'utiliser un autre plugin spécifiquement pour cette fonctionnalité. Vous trouverez ci-dessous quelques plugins d'ancrage et de défilement pour WordPress, ou des liens d'ancrage / liens de saut. Ceux-ci fournissent une multitude de fonctionnalités qui peuvent aider à améliorer l'expérience utilisateur.
WordPress Infinite Scroll: Ajax Charge plus
Il s'agit d'un plugin léger avec plus de 50 000 installations actives. Il vous permet d'ajouter la fonctionnalité de défilement à l'ancienne à une seule publication, une seule page, une page de chargement paresseuse, des commentaires, etc. Il vous permet également de créer des shortcodes personnalisés pour le défilement infini. Ajax Load More Plugin est compatible avec WooCommerce et des téléchargements numériques faciles. De plus, il est compatible multisite et vous permet de personnaliser les paramètres du plugin.
Tarification : La version principale est disponible gratuitement. Le prix de la version premium commence à 149 $ pour un seul site Web.
Page défile vers l'ID
Ce plugin vous permet d'ajouter une animation de défilement en douceur aux liens d'ancrage. Il fournit des fonctionnalités avancées, telles que l'animation de défilement réglable pour les sites Web d'une seule page, les liens de retour à toit et la navigation en page. Il vous permet également de mettre en surbrillance le lien et le texte ciblés via des classes CSS prêtes à l'emploi. Les autres fonctionnalités incluent le défilement du décalage et le décalage spécifique à la liaison, entre autres.
Tarification : Le plugin Page Scroll to Id est gratuit et compatible avec WordPress version 3.3 ou supérieure.
Blocs ultimes: plugin de blocs Gutenberg
Le plugin Ultimate Blocks offre une variété de fonctionnalités pour améliorer l'expérience utilisateur. À partir des liens d'ancrage et une perspective de défilement, il génère une «table des matières» à partir des en-têtes. Il vous permet d'activer ou de désactiver la fonction «Smooth Scrolling». De plus, vous pouvez ajuster le décalage de défilement pour mobile et diviser la table des matières en colonnes.
Tarifs : Disponible gratuitement !
Haut de défilement WPFront
Il s'agit d'un autre excellent plugin WordPress Anchor to défiler avec plus de 200 000 installations actives. Il offre une gamme de personnalisation, telles que les boutons d'affichage pour un utilisateur défile d'une page ou d'animation pour les boutons de retour au sommet.
Le dessus de défilement avant WP est un plugin simple à utiliser qui vous permet de créer du texte, des images et des boutons impressionnants de police. De plus, avec ce plugin, vous pouvez créer un lien vers un élément dans la page ou un lien vers différentes pages à l'aide d'URL.
Tarification : Vous pouvez télécharger ce plugin gratuitement.
Attraper le parchemin infini
Comme son nom l'indique, ce plugin vous permet d'ajouter un rouleau infini à la page et publier. Il s'agit d'un plugin léger qui aide les utilisateurs à charger et à faire défiler le contenu automatiquement à un rythme plus rapide. Il offre également l'option entre cliquer et faire défiler pour charger du contenu, et vous pouvez ajouter une image personnalisée.
Le plugin Catch Infinite Scroll est compatible avec WordPress version 5.7 ou supérieur et a des installations actives 20K.
Prix : Disponible gratuitement sur wordpress.org. Tandis que le Catch Infinite Scroll Pro est au prix de 24,99 $ pour une licence d'un an.
En savoir plus : Elementor coincé sur l'écran de chargement? Voici comment le réparer
Conclusion
La correction des erreurs du site Web doit être une priorité absolue si vous souhaitez bénéficier d’un bon classement dans les résultats de recherche. Des problèmes tels que le défilement vers l'ancre d'Elementor ne fonctionnent pas sur mobile peuvent affecter l'expérience utilisateur et entraîner un taux de rebond élevé. En tant que tel, il est important de résoudre ce problème immédiatement pour une expérience de navigation sans tracas.
Le défilement Elementor-Roll-to-Anchor ne fonctionne pas sur le mobile, mais il peut être corrigé une fois que vous en savez la raison. Avant de parcourir la liste des raisons, vérifiez si la fonctionnalité de défilement à l'ancienne est activée dans Elementor. Ensuite, vérifiez les problèmes de mise en cache et les cibles vides.
Si aucun de ces éléments n'est à l'origine du problème de défilement vers l'ancre sur mobile, recherchez les problèmes 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 que vous avez identifié la cause ou le problème, vous pouvez mettre en œuvre les correctifs mentionnés ici.
FAQ
Comment réparer la barre de défilement horizontale sur mobile avec Elementor?
Une barre de défilement horizontale sur le mobile apparaît généralement en raison d'éléments s'étendant au-delà de la largeur de l'écran. Cela peut être causé par des images surdimensionnées, des marges excessives ou des sections mal réglées. Pour le réparer, passez en revue votre disposition et ajustez tous les éléments dépassant la fenêtre. En utilisant les paramètres réactifs d'Elementor, assurez-vous que toutes les sections s'insèrent dans la largeur de l'écran et supprimez tout espacement inutile qui pourrait pousser le contenu hors des limites.
Comment rendre Elementor Mobile réactif?
Elementor fournit des outils intégrés pour rendre les sites Web adaptés aux mobiles, mais certains ajustements peuvent encore être nécessaires. Utilisez le mode d'édition réactif pour modifier les tailles de police, les marges et le rembourrage pour différentes tailles d'écran. Les points d'arrêt personnalisés peuvent également aider à assurer une meilleure disposition sur divers appareils. Tester votre site sur plusieurs écrans mobiles aidera à résoudre tous les problèmes de réactivité et à assurer une expérience utilisateur fluide.
Pourquoi ma vidéo Elementor ne joue-t-elle pas sur mobile?
Si votre vidéo Elementor ne joue pas sur mobile, le problème pourrait être dû à des restrictions sur la lecture automatique, à un format non pris en charge ou à des paramètres de chargement paresseux. Certains navigateurs mobiles bloquent les vidéos de lecture automatique avec un son, donc muter la vidéo ou utiliser une plate-forme d'hébergement externe comme YouTube ou Vimeo peut vous aider. De plus, si le chargement paresseux est activé, essayez de le désactiver pour voir si la vidéo se charge correctement.
Comment ajouter des liens d'ancrage dans Elementor?
Les liens d'ancrage aident à créer une navigation en douceur en défilement, mais elles doivent être configurées correctement pour travailler sur mobile. Tout d'abord, placez un widget d'ancrage où vous souhaitez que les utilisateurs atterrissent, puis assurez-vous que tous les liens pointent vers le nom d'ancrage correct. Si l'ancre ne fonctionne pas, vérifiez les conflits avec des en-têtes collants ou des données en cache qui peuvent empêcher l'effet de défilement de fonctionner correctement. Les tests sur différents appareils confirmeront si l'ancrage fonctionne comme prévu.
