Meilleurs plugins de défilement lisse WordPress gratuits 2022
Publié: 2021-11-09
Si vous avez créé un site Web mais que le contenu du site Web est trop long et difficile à comprendre dans cette situation, vous pouvez utiliser les plugins WordPress Smooth Scroll.
Les plugins WordPress Smooth Scroll vous aideront tous à faire défiler le site Web de haut en bas de manière très fluide. Cela améliorera non seulement l'expérience utilisateur de votre site Web, mais aura également un effet majeur sur le taux de conversion. Parce que votre utilisateur sera engagé plus longtemps sur votre site Web.
Comment ajouter un effet de défilement fluide vers le haut dans WordPress à l'aide de jQuery ?
Vous demandez-vous pourquoi divers autres sites Web ont un effet de défilement fluide vers le haut de la page ? Il est idéal pour ajouter un effet supérieur de défilement fluide si vous avez une longue page.
Cela aide à améliorer l'expérience de vos utilisateurs sur votre page et, en même temps, leur permet de revenir rapidement au sommet.
Maintenant, la question est de savoir comment ajouter un défilement fluide à l'effet supérieur de votre site WordPress ? Eh bien, vous pouvez facilement le faire en utilisant jQuery. Ici, nous allons parler de la façon dont vous pouvez facilement le faire en utilisant jQuery. Continuer à lire:
Qu'est-ce que le Smooth Scroll et quand l'utiliser ?
Dans le cas où une page ou un article contient beaucoup de contenu, les utilisateurs doivent faire défiler vers le bas pour tous les lire. Lorsque les utilisateurs commencent à défiler vers le bas, vos liens de navigation commencent à monter.
Lorsque l'utilisateur a fini de lire, il doit faire défiler pour voir s'il reste quelque chose pour lui. Le défilement vers le bouton du haut permet au lecteur de fonctionner rapidement. Vous pouvez opter pour l'ajout de ce lien texte sans avoir besoin d'utiliser jQuery.
<a href="#" title="Retour en haut">^Haut</a>
Il va envoyer les lecteurs en haut de la page tout en faisant défiler vers le haut en une fraction de seconde. Il fonctionne comme un fonctionnel.
Cependant, le défilement fluide est à l'opposé de cela. Le défilement fluide aide l'utilisateur à revenir en haut de la page. Cela contribue à améliorer l'expérience des utilisateurs sur votre site.
Ajouter Smooth Scroll to Top Effect avec jQuery dans WordPress ?
Si vous souhaitez ajouter un défilement fluide à l'effet supérieur, vous pouvez utiliser jQuery. Simultanément, vous devrez ajouter du CSS avec une seule ligne pour le code HTML sur le thème de votre WordPress.
Pour commencer, vous devez d'abord ouvrir un éditeur de texte, tel que le Bloc-notes. Vous devez maintenant créer un fichier et continuer à l'enregistrer sous le nom de smoothscroll.js. Vous devez maintenant copier coller un code dans la zone du fichier :
jQuery(document).ready(fonction($){
$(fenêtre).scroll(fonction(){
si ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
}
autre {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('clic', fonction(){
$('html, body').animate({scrollTop:0}, 'rapide');
retourner faux ;
});
});
Vous devez maintenant enregistrer le fichier. Après cela, vous pouvez le télécharger dans le répertoire /js /folder du thème WordPress. Si votre thème n'a pas de répertoire /js/, vous devez commencer par en créer un.
Après cela, vous pouvez télécharger le smoothscroll.js dans ce répertoire. Ce code est appelé le script jQuery, qui va ajouter un effet de défilement fluide au bouton. Cela va essentiellement aider l'utilisateur à accéder en douceur au haut de la page.
Après cela, vous devez ajouter ce smoothscroll.js à votre zone thématique. Si vous voulez faire cela, vous devez ajouter un script dans WordPress. Voici le script ou le code que vous devez coller dans le fichier functions.php de votre thème :
wp_enqueue_script('lisser', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, true );
Ce code envoie à WordPress la commande du script. Dans le même temps, il indique également à WordPress de charger la bibliothèque jQuery car le plugin en dépend.
Lorsque vous avez terminé d'ajouter la partie jQuery, vous devez maintenant ajouter le lien réel vers le site Word Press, qui ramènera l'utilisateur dans la zone supérieure. Vous devez coller un code HTML n'importe où dans le fichier footer.php de votre thème :
<a href="#top" title="Retour en haut"></a>
Cette étape comprend l'ajout du lien vers le fichier mais il n'est lié à aucun texte. Il en est ainsi, car vous devez utiliser une icône d'image à la flèche vers le haut qui va vous permettre d'afficher un bouton de retour en haut.
Voici comment ajouter une icône 40x40px à la feuille de style de votre thème :
#lisser {
hauteur : 40px ;
largeur : 40px ;
position : fixe ;
bas : 50 px ;
droite : 100 px ;
texte-retrait :-9999px ;
affichage : aucun ;
arrière-plan : url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-durée de la transition webkit : 0,4 s ;
-moz-transition-durée : 0,4 s ; durée de transition : 0,4 s ;
}
#smoothup : survolez {
-webkit-transform : rotation (360 degrés) }
arrière-plan : url('') sans répétition ;
}
Dans le CSS mentionné ci-dessus, vous avez opté pour le givrage de la position de l'icône de l'image. Il inclut également l'utilisation d'une icône d'image comme image d'arrière-plan. Vous devez maintenant télécharger votre icône d'image à l'aide du téléchargeur de médias WordPress.
Ensuite, vous pouvez obtenir l'URL de l'image que vous devez coller comme URL d'arrière-plan. Comme vous avez ajouté une animation CSS au bouton qui continue de tourner le bouton, l'utilisateur garde le pointeur de sa souris sur le bouton.
Vous devez maintenant faire défiler jusqu'à l'effet supérieur, ce qui permettra aux utilisateurs de revenir à la zone supérieure et de trouver ce qu'ils peuvent faire d'autre sur votre site Web.
Vous pouvez également ajouter un pied de page flottant pour faciliter l'affichage du contenu de la fonctionnalité. Si vous ne souhaitez pas que vos utilisateurs fassent défiler l'article vers la zone supérieure pour partager l'article, vous pouvez utiliser le plug-in de barre de partage social flottant pour le rendre beaucoup plus facile à gérer.
Plugins de défilement fluide de 2022 - très légers et rapides
Les plugins WordPress Smooth Scroll fonctionneront sûrement beaucoup plus rapidement et efficacement sur tous les autres appareils et navigateurs sans aucune difficulté.
En outre, cela fonctionne très bien avec d'autres plugins tels que Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, les constructeurs de pages SKT, Visual Composer et Elementor, et bien d'autres.
Sites Web d'entreprise à grande échelle ou à petite échelle comme un blog, un site Web de portefeuille, un site Web de conseil, un site Web d'entreprise, un site Web lié au commerce électronique, une agence créative, un site Web immobilier, un CV personnel, un site Web de société de vente au détail, etc. l'aspect et la convivialité du site Web.
De nombreux plugins WordPress Scroll gratuits sont disponibles, mais nous avons mis en évidence la plupart des plugins de défilement lisse que tous vos visiteurs vont adorer. Veuillez vérifier ci-dessous.
1. Faites défiler la page jusqu'à l'identifiant :
Le défilement de la page vers l'identifiant est un logiciel open source entièrement caractérisé et doté de caractéristiques et de fonctionnalités bien développées. Il vous donne un effet d'animation de défilement fluide.
Le défilement de la page vers le plug-in d'identification est réglable. Avec l'aide de l'identifiant et de l'offset mentionnés, ce plugin calculera la taille de la page et la définira automatiquement.
2. Menu collant (ou n'importe quoi !) sur le défilement :
Le menu collant (ou quoi que ce soit) sur le plugin de défilement est disponible gratuitement. il vous aide à rendre un menu ou tout élément collant. Une fois que vous avez cliqué sur un élément collant, il vous fera directement défiler vers le haut de la page. Vous avez juste besoin de quelques connaissances de base en HTML / CSS pour simplement retirer le bon élément que vous souhaitez rendre collant.
3. WordPress Infinite Scroll – Ajax Charger plus :
Ajax Load more est spécialement créé pour un utilisateur de WordPress afin qu'il puisse faire défiler le site Web en douceur. Ajax load more permet de charger des messages paresseux, des messages uniques, des pages et des commentaires. Ces plugins sont surtout connus pour les plugins de commerce électronique comme WooCommerce
4. Liens de défilement faciles et fluides :
Vous pouvez créer vous-même une fonctionnalité de bas en haut. car SEasy Smooth Scroll Links est un plugin personnalisable et très léger.
Il vous suffit de choisir l'une des images pour définir les éléments de défilement. En outre, vous pouvez ajuster la position de l'élément vers la gauche, le centre et le côté droit. Ce plugin est également un logiciel open source.
5. MouseWheel Smooth Scroll :
Le plugin MouseWheel Smooth Scroll est très fluide pour faire défiler tous les liens d'ancrage. Il est généralement placé sur le côté droit qui fera défiler la page de bas en haut.
Par conséquent, ce plugin prend en charge RTL et ne crée pas d'éléments de menu inutiles dans le tableau de bord WordPress.
6. Défilement fluide par WPOS :
Comme le plugin Smooth Scroll by WPOS est léger, on peut facilement personnaliser le défilement de haut en bas sur chaque page. Vous n'avez même pas besoin d'écrire une seule ligne de code.
On peut ajuster la vitesse, le type, la hauteur, la largeur, etc. de l'animation selon ses besoins. Ce plugin fonctionne mieux avec le constructeur de pages Elementor
7. Bouton de défilement simple vers le haut :
On peut ajouter un effet de défilement fluide au lien d'ancrage mais sur la même page. Ces effets peuvent être appliqués à l'ensemble des publications et de la page ou à des publications et des pages particulières. Vous pouvez trouver ce paramètre dans les paramètres du tableau de bord>> Bouton de défilement simple vers le haut.
- Choisissez de postuler pour tous les messages et pages
- Choisissez la page d'accueil uniquement
– Choisissez uniquement les pages particulières
- Choisissez les messages particuliers uniquement
– Décidez de la vitesse de défilement
8. NS Défilement lisse vers le haut :
Le Surbma a des utilisateurs plus actifs. Comme ce plugin est également un défilement fluide. Vous pouvez obtenir l'effet sur chaque lien d'ancrage de votre site Web. Un effet de défilement fluide peut être ajouté au menu ou à n'importe quelle partie de navigation.
Vous n'avez même pas besoin de le personnaliser car aucune option n'est proposée pour ce plugin. Si vous avez des connaissances et de l'expérience sur la programmation JavaScript et WordPress, vous pouvez apporter des modifications selon vos besoins. Mais si vous n'en avez pas, je vous suggère de ne pas y toucher. car il commencera à fonctionner immédiatement après l'installation.
9. WPFront Scroll Top :
Vous pouvez facilement faire défiler de bas en haut à l'aide du plugin WPFront Scroll Top. Il est entièrement personnalisable avec différentes options au choix. Avec quelques animations, il reviendra défiler vers le haut.
Vous pouvez créer vous-même du texte, des images et des boutons. vous pouvez également filtrer les pages et les publications.
10. Attrapez le défilement infini :
Catch Infinite scroll vous aidera à augmenter l'engagement des utilisateurs sur votre site Web. La principale raison derrière cela est un défilement infini Jetpack. Une fois vos plugins installés et activés, votre client et utilisateur pourra faire défiler la page du site Web.
Ce sont tous les meilleurs plugins gratuits WordPress Smooth Scroll 2022.