{"id":3088,"date":"2024-10-18T16:30:09","date_gmt":"2024-10-18T08:30:09","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=3088"},"modified":"2024-10-18T16:36:55","modified_gmt":"2024-10-18T08:36:55","slug":"how-to-create-and-apply-a-scroll-to-top-button-in-elementor-without-plugins","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/comment-creer-et-appliquer-un-bouton-de-defilement-vers-le-haut-dans-elementor-sans-plugins","title":{"rendered":"Comment cr\u00e9er et appliquer un bouton \"Scroll to Top\" dans Elementor sans plugins"},"content":{"rendered":"

A \"D\u00e9filement vers le haut<\/strong>Le bouton \" est un excellent compl\u00e9ment \u00e0 toute page longue. Il offre aux utilisateurs un moyen rapide de revenir au d\u00e9but de la page, rendant la navigation plus accessible et plus conviviale. Ce guide vous aidera \u00e0 cr\u00e9er un bouton \"Scroll to Top\" dans Elementor, aucun plugin n'est n\u00e9cessaire<\/strong>et de l'appliquer \u00e0 l'ensemble de votre site web afin d'assurer la coh\u00e9rence de l'aspect et de la convivialit\u00e9.<\/p>

\"\"<\/figure>

Configurer un mod\u00e8le de bouton global dans Elementor<\/h3>

Commencez par cr\u00e9er un nouveau mod\u00e8le :<\/strong><\/h4>
  1. Dans le tableau de bord de WordPress, allez dans \"Mod\u00e8les<\/strong>\" > \"Ajouter un nouveau<\/strong>.\"<\/li><\/ol>
    \"\"<\/figure><\/div>
    1. S\u00e9lectionnez \"Page unique\"<\/strong> dans le menu d\u00e9roulant comme type de mod\u00e8le. Nommez-le quelque chose comme \"Bouton de d\u00e9filement vers le haut<\/strong>“.<\/li><\/ol>
      \"\"<\/figure>
      1. Cliquez \"Cr\u00e9er un mod\u00e8le<\/strong>\"pour ouvrir l'\u00e9diteur Elementor.<\/li><\/ol>
        \"\"<\/figure>
        1. Quitter la biblioth\u00e8que<\/strong>: Cliquez sur le bouton \"X<\/strong>\" dans le coin sup\u00e9rieur droit pour fermer la biblioth\u00e8que de mod\u00e8les.<\/li><\/ol>
          \"\"<\/figure><\/div>

          Ajoutez et personnalisez le bouton :<\/strong><\/h4>
          1. Faites glisser le bouton \"Bouton<\/strong>Le widget \" Widget \" de la barre lat\u00e9rale dans le mod\u00e8le.<\/li><\/ol>
            \"\"<\/figure>
            1. Modifiez le texte du bouton en \"D\u00e9filer vers le haut\" ou utilisez une ic\u00f4ne de fl\u00e8che vers le haut.<\/li><\/ol>
              \"\"<\/figure>
              1. Acc\u00e9dez \u00e0 la galerie d'ic\u00f4nes et s\u00e9lectionnez la fl\u00e8che vers le haut. ic\u00f4ne<\/strong>.<\/li><\/ol>
                \"\"<\/figure>
                1. S\u00e9lectionnez un autre bouton type<\/strong> pour supprimer le texte<\/strong>.<\/li><\/ol>
                  \"\"<\/figure>
                  1. Allez \u00e0 la page \"Style<\/mark><\/strong>\"et d\u00e9finissez la couleur d'arri\u00e8re-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.<\/li><\/ol>

                    Modifier le style des boutons<\/strong><\/h4>
                    1. Utilisez des coins arrondis<\/strong>
                      • Allez \u00e0 la page Style<\/strong> dans Elementor.<\/li>\n\n
                      • R\u00e9glez le Rayon de la bordure<\/strong> \u00e0 10% pour cr\u00e9er un bouton parfaitement rond.<\/li>\n\n
                      • Modifier le Rembourrage<\/strong> pour ajuster l'espacement \u00e0 l'int\u00e9rieur d'un \u00e9l\u00e9ment. Cela d\u00e9finit l'espace int\u00e9rieur entre le contenu et l'\u00e9l\u00e9ment les bordures de l'\u00e9l\u00e9ment<\/strong>.<\/li><\/ul><\/li><\/ol>
                        \"\"<\/figure>
                        1. Ajouter un effet d'ombre<\/strong>
                          • Dans le cadre de la Ombre de la bo\u00eete<\/strong> (g\u00e9n\u00e9ralement sous la rubrique Style > Bordure<\/strong>), ajoutez une ombre subtile pour cr\u00e9er de la profondeur. Utilisez des param\u00e8tres tels que :<\/li>\n\n
                          • Flou : 10px<\/li>\n\n
                          • \u00c9cartement : 0px<\/li>\n\n
                          • Couleur : choisissez un gris clair ou un noir transparent pour donner une ombre douce.<\/li><\/ul><\/li><\/ol>
                            \"\"<\/figure>
                            1. Choisissez une palette de couleurs contrast\u00e9es<\/strong>
                              • Utilisez des couleurs qui contrastent avec l'arri\u00e8re-plan de votre site web. Par exemple, si votre arri\u00e8re-plan est clair, optez pour une couleur vive comme le bleu, l'orange ou le vert.<\/li>\n\n
                              • Pour la couleur de l'ic\u00f4ne, veillez \u00e0 ce qu'elle soit blanche ou d'une autre couleur qui se d\u00e9tache de l'arri\u00e8re-plan du bouton.<\/li><\/ul><\/li><\/ol>
                                \"\"<\/figure>
                                1. Ajouter un effet de survol<\/strong>
                                  • Dans le cadre de la Survoler<\/strong> sous la rubrique Style<\/strong> tab, vous le pouvez :
                                    • Modifier le couleur de fond<\/strong> au survol du bouton en une nuance plus claire ou plus fonc\u00e9e de la couleur du bouton.<\/li>\n\n
                                    • Animation de survol<\/strong> vous permet de contr\u00f4ler la vitesse des animations et des transitions.<\/li><\/ul><\/li><\/ul><\/li><\/ol>
                                      \"\"<\/figure><\/div>
                                      1. Ajouter une animation d'impulsion (facultatif)<\/strong>
                                        • Dans le cadre de la Avanc\u00e9<\/strong> Allez dans l'onglet CSS personnalis\u00e9<\/strong> (disponible en Elementor Pro<\/strong>) et ajoutez une animation de pouls :<\/li>\n\n
                                        • Remplacer 1TP5VotreIDBouton<\/code> <\/mark>avec l'ID de votre bouton. Le bouton sera ainsi subtilement agrandi et r\u00e9tr\u00e9ci, ce qui attirera l'attention sur lui.<\/li><\/ul><\/li><\/ol>
                                          @keyframes pulse { 0% { transform : scale(1) ; } 50% { transform : scale(1.05) ; } 100% { transform : scale(1) ; } } #yourButtonID { animation : pulse 2s infinite ; }<\/code><\/code><\/pre>
                                          \"\"<\/figure><\/div>
                                          Ce code ajoute un effet d'animation puls\u00e9<\/strong> \u00e0 un bouton donn\u00e9. Le bouton s'agrandit l\u00e9g\u00e8rement et revient \u00e0 sa taille initiale en 2 secondes, en se r\u00e9p\u00e9tant continuellement. Cet effet attire l'attention sur le bouton, ce qui le rend plus perceptible pour les utilisateurs.<\/p>