Comment créer des boutons de défilement vers le haut dans Elementor sans plugins et optimiser l'expérience utilisateur

Qu'est-ce que le bouton "défiler vers le haut" ?

Le bouton "retour en haut de page" est un élément d'interface utilisateur courant sur un site web ou une application. Les utilisateurs peuvent revenir rapidement au début d'une page web ou d'un contenu en cliquant simplement sur le bouton, sans avoir à faire défiler manuellement la page.

En tant que propriétaire d'un site web, vous souhaitez offrir à vos visiteurs la meilleure expérience possible. L'un des moyens d'y parvenir est d'ajouter un bouton de retour en haut de page à votre site web. Les longues pages peuvent être accablantes pour les utilisateurs, et le défilement vers le haut pour revenir peut prendre beaucoup de temps, en particulier sur les appareils mobiles. En ajoutant un bouton de retour en haut de page, vous offrez aux utilisateurs un moyen pratique et efficace de naviguer sur votre site web.

Pourquoi ai-je besoin d'un bouton "défiler vers le haut" ?

L'ajout d'un bouton de retour en haut de page améliore non seulement l'expérience de l'utilisateur, mais peut également avoir un impact sur l'engagement du site web. Les visiteurs sont plus enclins à rester sur votre site plus longtemps s'ils peuvent y naviguer facilement. Cela permet d'augmenter le nombre de pages vues, de réduire le taux de rebond et d'améliorer les conversions. L'ajout d'un bouton de retour au début est également un excellent moyen d'améliorer l'expérience utilisateur globale (UX) de votre site web. Il montre que l'on a pris le temps de réfléchir aux besoins de l'utilisateur et de lui proposer une solution pour rendre sa navigation plus agréable.

Préparer la création d'un bouton "scroll to top" dans Elementor

Avant de commencer à créer le bouton de retour en haut de page, il y a plusieurs choses à faire :

1. Un site web WordPress: :

Elementor est un plugin qui fonctionne avec WordPress, et si vous n'avez pas encore de site web, vous devrez utiliser le plugin Créer WordPressUn.

2. Installer et activer Elementor: :

Elementor est un constructeur de sites web qui crée des pages personnalisées à l'aide d'une interface "glisser-déposer", ce qui permet de créer facilement des sites web de qualité professionnelle sans aucune connaissance en matière de codage.

3. Familiarité avec Elementor: :

Si vous ne connaissez pas Elementor, il est conseillé de passer un peu de temps à explorer l'interface et à vous familiariser avec les différentes fonctionnalités.tutorielsIl peut vous aider à démarrer.

4. concept de design: :

Précisez l'aspect que vous souhaitez donner au bouton de retour en haut de page. Il existe de nombreux styles et designs différents, il est donc important d'avoir une idée claire de ce que l'on souhaite avant de commencer à créer le bouton.

Etapes pour créer un bouton "Scroll to top" dans Elementor

Étape 1 : Sélectionner les bons widgets Elementor

Le choix du bon widget est essentiel lors de la création d'un bouton de retour en haut de page dans Elementor.Elementor propose plusieurs options de widget qui peuvent être utilisées pour créer un bouton de retour en haut de page :

1. Widget bouton: Il s'agit du widget le plus couramment utilisé pour créer des boutons de retour en haut de page. Vous pouvez modifier la taille, la forme et la couleur du bouton et ajouter du texte. Le widget bouton comporte une option permettant d'activer la fonction de défilement vers le haut, qui ramène automatiquement l'utilisateur en haut de la page lorsqu'il clique sur le bouton.
2. Widget d'icônesWidget d'icônes : Ce widget est parfait pour ceux qui souhaitent un design minimaliste. En utilisant le widget d'icônes, vous pouvez choisir parmi une variété d'icônes et personnaliser leur taille, leur couleur et leur position. Cependant, ce widget ne dispose pas d'une fonction intégrée de défilement vers le haut, il faudra donc ajouter un code personnalisé pour le faire fonctionner.

Étape 2 : Conception du bouton "Défiler vers le haut

La conception du bouton est cruciale car elle détermine si le visiteur le remarquera et l'utilisera :

1. Choisir la bonne icôneUne simple flèche vers le haut est un choix courant, mais d'autres icônes peuvent être utilisées. Veillez à ce que l'icône soit suffisamment grande pour être visible, mais pas au point de prendre trop de place sur la page.
2. Choisir la bonne couleurCouleur du bouton : La couleur du bouton doit contraster avec l'arrière-plan du site web. Les couleurs vives comme le rouge ou l'orange sont de bons choix, mais on peut aussi utiliser des couleurs qui correspondent à la palette de couleurs du site web.
3. Choisir la bonne tailleLe bouton doit être suffisamment grand pour être visible, mais pas au point de prendre trop de place sur la page. Une taille d'environ 50 pixels x 50 pixels est un bon point de départ, mais elle peut être ajustée selon les besoins.
4. Conception et mise en pageLa conception et la disposition des boutons doivent correspondre à la conception générale de votre site web. Si votre site a un aspect moderne, utilisez des boutons au design épuré ; si votre site a un aspect plus traditionnel, utilisez des boutons au design plus classique.

Étape 3 : Fixer le bouton en bas

Après avoir créé le bouton Retour en haut dans Elementor, il est temps de le mettre en place sur votre site :

1. Cliquez sur l'onglet Avancé du widget.
2. Dans l'onglet Avancé, sélectionnez l'option Position et réglez-la sur Fixe.
3. Ajustez la position de l'icône à l'endroit souhaité, par exemple en bas à gauche ou à droite.

Étape 4 : Ajouter la fonction de défilement vers le haut au bouton

Maintenant que le bouton a été créé, il est temps d'y ajouter la fonction de retour en haut de page :

1. Ajoute l'ID CSS "scroll-to-top" à l'élément situé en haut de la page.
2. Ajouter les options de lien des widgets d'icônes #scroll-to-top.

Comment activer le défilement fluide dans la section "saut" ?

Pour améliorer l'expérience de l'utilisateur, il est possible d'activer le défilement fluide :

1. Ajoutez le code CSS suivant au CSS personnalisé du thème :

html {
    scroll-behavior : smooth ;
}

Cela donnera un effet de défilement plus fluide sur toutes les sections de saut.

Résumé :

Le bouton "scroll back to top" est un outil important pour améliorer l'expérience utilisateur sur votre site web. En créant ce bouton dans Elementor, les utilisateurs peuvent revenir rapidement en haut de la page, en particulier sur les pages longues ou les appareils mobiles. Cet article explique comment sélectionner le bon widget, concevoir et mettre en page le bouton dans Elementor et le fixer au bas de la page. Parallèlement, l'expérience de navigation de l'utilisateur peut être améliorée par l'ajout d'une fonction de défilement fluide.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.