Comment créer et appliquer un bouton "Scroll to Top" dans Elementor sans plugins

A "Défilement vers le hautLe bouton " est un excellent complément à toute page longue. Il offre aux utilisateurs un moyen rapide de revenir au début de la page, rendant la navigation plus accessible et plus conviviale. Ce guide vous aidera à créer un bouton "Scroll to Top" dans Elementor, aucun plugin n'est nécessaireet de l'appliquer à l'ensemble de votre site web afin d'assurer la cohérence de l'aspect et de la convivialité.

Configurer un modèle de bouton global dans Elementor

Commencez par créer un nouveau modèle :

1. Dans le tableau de bord de WordPress, allez dans "Modèles" > "Ajouter un nouveau."

2. Sélectionnez "Page unique" dans le menu déroulant comme type de modèle. Nommez-le quelque chose comme "Bouton de défilement vers le haut“.

3. Cliquez "Créer un modèle"pour ouvrir l'éditeur Elementor.

4. Quitter la bibliothèque: Cliquez sur le bouton "X" dans le coin supérieur droit pour fermer la bibliothèque de modèles.

Ajoutez et personnalisez le bouton :

1. Faites glisser le bouton "BoutonLe widget " Widget " de la barre latérale dans le modèle.

2. Modifiez le texte du bouton en "Défiler vers le haut" ou utilisez une icône de flèche vers le haut.

3. Accédez à la galerie d'icônes et sélectionnez la flèche vers le haut. icône.

4. Sélectionnez un autre bouton type pour supprimer le texte.

5. Allez à la page "Style"et définissez la couleur d'arrière-plan, la police et le rayon de la bordure pour qu'elle corresponde au style de votre site. Un bouton rond d'une couleur contrastante permet de le rendre visible.

Modifier le style des boutons

1. Utilisez des coins arrondis
   • Allez à la page Style dans Elementor.
   • Réglez le Rayon de la bordure à 10% pour créer un bouton parfaitement rond.
   • Modifier le Rembourrage pour ajuster l'espacement à l'intérieur d'un élément. Cela définit l'espace intérieur entre le contenu et l'élément les bordures de l'élément.

2. Ajouter un effet d'ombre
   • Dans le cadre de la Ombre de la boîte (généralement sous la rubrique Style > Bordure), ajoutez une ombre subtile pour créer de la profondeur. Utilisez des paramètres tels que :
   • Flou : 10px
   • Écartement : 0px
   • Couleur : choisissez un gris clair ou un noir transparent pour donner une ombre douce.

3. Choisissez une palette de couleurs contrastées
   • Utilisez des couleurs qui contrastent avec l'arrière-plan de votre site web. Par exemple, si votre arrière-plan est clair, optez pour une couleur vive comme le bleu, l'orange ou le vert.
   • Pour la couleur de l'icône, veillez à ce qu'elle soit blanche ou d'une autre couleur qui se détache de l'arrière-plan du bouton.

4. Ajouter un effet de survol
   • Dans le cadre de la Survoler sous la rubrique Style tab, vous le pouvez :
     • Modifier le couleur de fond au survol du bouton en une nuance plus claire ou plus foncée de la couleur du bouton.
     • Animation de survol vous permet de contrôler la vitesse des animations et des transitions.

5. Ajouter une animation d'impulsion (facultatif)
   • Dans le cadre de la Avancé Allez dans l'onglet CSS personnalisé (disponible en Elementor Pro) et ajoutez une animation de pouls :
   • Remplacer 1TP5VotreIDBouton avec l'ID de votre bouton. Le bouton sera ainsi subtilement agrandi et rétréci, ce qui attirera l'attention sur lui.

@keyframes pulse { 0% { transform : scale(1) ; } 50% { transform : scale(1.05) ; } 100% { transform : scale(1) ; } } #yourButtonID { animation : pulse 2s infinite ; }

Ce code ajoute un effet d'animation pulsé à un bouton donné. Le bouton s'agrandit légèrement et revient à sa taille initiale en 2 secondes, en se répétant continuellement. Cet effet attire l'attention sur le bouton, ce qui le rend plus perceptible pour les utilisateurs.

Fixez le bouton en place :

1. Dans le "Avancé"sous l'onglet "Positionnement," choisir "Fixe."

2. Placez le bouton dans le coin inférieur droit avec un 20px des deux côtés afin qu'il reste en place lorsque les utilisateurs font défiler la page.

3. Cliquez "Publier“. Réglez les conditions d'affichage sur "Toutes les pages." Cela permettra d'afficher le bouton sur toutes les pages, offrant ainsi une expérience cohérente à l'utilisateur.

Ajouter une ancre en haut de la page

1. Ouvrez la page dans Elementor:
   • Allez dans votre tableau de bord WordPress, naviguez vers Pages ou Posteset sélectionnez la page que vous souhaitez modifier.
   • Cliquez sur Modifier avec Elementor pour ouvrir la page dans l'éditeur Elementor.

2. Sélectionnez l'élément supérieur:
   • Choisissez un élément situé en haut de la page vers lequel vous souhaitez que les utilisateurs soient dirigés lorsqu'ils cliquent sur le bouton "Défiler vers le haut". Il s'agit généralement de l'élément en-tête section, un titreou le première section de la page.
   • Cliquez sur l'élément pour le sélectionner.

3. Allez dans l'onglet Avancé:
   • L'élément supérieur étant sélectionné, naviguez jusqu'à l'élément Avancé dans le panneau Elementor à gauche.
4. Définir l'ID CSS:
   • Trouvez le ID CSS sous le champ Avancé tabulation.
   • Saisissez le mot sommet (ou tout autre mot simple que vous préférez, tel que commencer).

5. Sauvegarder vos modifications:
   • Une fois que vous avez défini l'ID CSS, cliquez sur Mise à jour pour enregistrer les modifications apportées à la page.

Remarque importante :

• Assurez-vous que l'identifiant CSS que vous avez saisi correspond à celui qui figure dans le champ de saisie de votre bouton "Défiler vers le haut". lien. Par exemple, si vous définissez l'ID CSS comme suit sommetle lien du bouton doit être #top.

Ajoutez une ancre pour le bouton :

1. Ouvrez n'importe quelle page dans Elementor et cliquez sur l'élément supérieur (comme un titre ou une section).
2. Définissez le lien du bouton. Dans le Lien Entrez dans le champ #top (veillez à inclure le # symbole).

3. Lisez la suite pour connaître les résultats.

Conclusion

L'ajout d'un bouton "Scroll to Top" dans Elementor est un moyen simple d'améliorer l'expérience de l'utilisateur sur les pages longues en permettant une navigation aisée vers le haut. En créant un modèle de bouton global, vous assurez une apparence cohérente sur l'ensemble de votre site. Le processus comprend la conception du bouton, la définition de styles personnalisés tels que les coins arrondis et les effets d'ombre, et l'ajout facultatif d'animations telles qu'un effet de pulsation pour une visibilité accrue.

Une fois le bouton conçu, vous pouvez le fixer à l'aide du positionnement "Fixe" et vous assurer qu'il apparaît sur toutes les pages grâce aux conditions d'affichage. En outre, en définissant une ID CSS en haut de chaque page (par exemple "top") et en liant le bouton à cette ancre (#top), les utilisateurs peuvent rapidement revenir au début de la page en cliquant sur le bouton.

Questions fréquemment posées

1. Pourquoi ajouter un bouton "Défiler vers le haut" ?

Ce bouton évite aux utilisateurs de faire défiler constamment les pages, surtout lorsqu'elles sont longues. Il permet de revenir rapidement au début de la page et facilite la navigation sur le site.

2. Puis-je ajouter d'autres effets d'animation au bouton ?

Bien sûr ! Les effets de mouvement d'Elementor vous permettent d'ajouter des animations telles que le rebond ou le glissement pour rendre le bouton plus accrocheur.

3. Existe-t-il des plugins qui peuvent faire cela ?

Oui, plusieurs plugins proposent des boutons "Scroll to Top". Mais les ajouter par le biais d'un code personnalisé permet à votre site d'être plus rapide en évitant d'avoir recours à des plugins supplémentaires.