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 “Single Page” from the dropdown menu as the template type. Name it something like “Bouton de défilement vers le haut“.

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

4. Quitter la bibliothèque: Click the “X” at the top-right corner to close the template library.

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 element’s borders.

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
   • Use colors that contrast with your website’s background. For example, if your background is light, opt for a bold color like blue, orange, or green.
   • 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.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-14-19-07.mp4

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". Set the display conditions to “Toutes les pages.” This will ensure the button is displayed on every page, providing a consistent user experience.

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:
   • Choose an element near the top of the page where you want users to be directed when they click the “Scroll to Top” button. This is typically the 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 :

• Make sure the CSS ID you entered matches the one in your “Scroll to Top” button’s 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.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-16-08-50.mp4

Conclusion

Adding a “Scroll to Top” button in Elementor is a straightforward way to improve user experience on longer pages by allowing easy navigation back to the top. By creating a global button template, you ensure a consistent appearance across your entire site. The process includes designing the button, setting custom styles like rounded corners and shadow effects, and optionally adding animations like a pulse effect for added visibility.

Once the button is designed, you can fix it in place using the “Fixed” positioning and ensure it appears on all pages through display conditions. Additionally, by setting a CSS ID at the top of each page (such as “top”) and linking the button to this anchor (#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.