{"id":5085,"date":"2024-10-30T20:03:24","date_gmt":"2024-10-30T12:03:24","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=5085"},"modified":"2024-10-30T20:04:34","modified_gmt":"2024-10-30T12:04:34","slug":"how-to-create-a-vertical-sticky-sidebar-in-elementor-for-seamless-page-navigation","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/comment-creer-une-barre-laterale-verticale-dans-elementor-pour-une-navigation-transparente-sur-la-page","title":{"rendered":"Comment cr\u00e9er une barre lat\u00e9rale verticale dans Elementor pour une navigation transparente sur la page"},"content":{"rendered":"

Une barre lat\u00e9rale verticale est un \u00e9l\u00e9ment de conception pratique plac\u00e9 sur le c\u00f4t\u00e9 de la page qui reste visible dans la fen\u00eatre de visualisation lorsque les utilisateurs font d\u00e9filer la page vers le bas. Cette barre lat\u00e9rale \u00e0 position fixe peut \u00eatre un outil efficace pour guider les visiteurs dans votre contenu en leur permettant d'acc\u00e9der rapidement \u00e0 des sections sp\u00e9cifiques de la page. Pour les sites web contenant de nombreuses informations, comme les pages de service, les portfolios ou les articles de blog, une barre lat\u00e9rale collante am\u00e9liore l'exp\u00e9rience de l'utilisateur en lui offrant un outil de navigation pratique, qui lui permet d'acc\u00e9der plus facilement aux sections souhait\u00e9es sans avoir \u00e0 faire d\u00e9filer la page de mani\u00e8re intensive.<\/p>

\"\"<\/figure><\/div>

Ce tutoriel vous guidera dans la cr\u00e9ation d'une barre lat\u00e9rale verticale collante dans Elementor avec des \u00e9l\u00e9ments de navigation, des liens d'ancrage et un style personnalis\u00e9 pour correspondre \u00e0 l'esth\u00e9tique de votre site web.<\/p>

Pr\u00e9paration<\/h2>

Avant de commencer, v\u00e9rifiez les points suivants :<\/p>

  1. Elementor Pro<\/mark> Install\u00e9 et activ\u00e9<\/strong>: L'effet collant n\u00e9cessite Elementor Pro.<\/li>\n\n
  2. Mise en page<\/strong>: Une nouvelle page ou une page existante sur laquelle vous souhaitez ajouter la barre lat\u00e9rale verticale.<\/li>\n\n
  3. Familiarit\u00e9 avec les conteneurs Elementor<\/strong>: Nous vous recommandons de travailler avec Flexbox<\/mark> Le mode conteneur permet un contr\u00f4le plus souple dans le cadre de ce tutoriel.<\/li><\/ol>

    \u00c9tape 1 : Cr\u00e9er un mod\u00e8le de page unique<\/h3>

    Nous allons commencer par cr\u00e9er un mod\u00e8le de page unique et le configurer pour accueillir le conteneur qui servira de barre lat\u00e9rale verticale collante.<\/p>

    1. Naviguez vers Mod\u00e8les<\/li><\/ol>

      Dans votre tableau de bord WordPress, allez dans Elementor > Mod\u00e8les > Ajouter un nouveau<\/strong>.<\/p>

      \"\"<\/figure><\/div>
      1. S\u00e9lectionnez le type de mod\u00e8le<\/li><\/ol>

        Dans la fen\u00eatre contextuelle, choisissez Page unique<\/strong> comme type de mod\u00e8le et donnez-lui un nom, comme \"Business Service Page Template\".<\/p>

        \"\"<\/figure><\/div>
        1. Choisissez le type de page<\/li><\/ol>

          En haut de la biblioth\u00e8que de mod\u00e8les, s\u00e9lectionnez l'option Pages<\/strong> tabulation.<\/p>

          Parcourez les mod\u00e8les disponibles pour trouver le style qui vous convient. Vous pouvez utiliser la barre de recherche pour trouver des mod\u00e8les correspondant \u00e0 des objectifs sp\u00e9cifiques, tels que \"Services\" ou \"Entreprise\". Si vous cr\u00e9ez cette barre lat\u00e9rale pour un type de page particulier, vous pouvez \u00e9galement configurer des conditions dans les param\u00e8tres d'affichage afin de limiter son apparition \u00e0 des pages sp\u00e9cifiques.<\/p>

          \"\"<\/figure><\/div>

          Vous pouvez choisir d'ins\u00e9rer un mod\u00e8le existant et, si vous devez ajouter une navigation lat\u00e9rale \u00e0 l'une de vos pages, vous pouvez modifier la page directement.<\/p>

          \u00c9tape 2 : Cr\u00e9er le conteneur dans Elementor<\/h3>

          Ce conteneur servira de base \u00e0 la barre lat\u00e9rale verticale collante.<\/p>

          1. Ajouter le conteneur<\/li><\/ol>

            Dans l'\u00e9diteur de pages, cliquez sur Ajouter un nouveau conteneur<\/strong> et faites-le glisser dans votre zone de conception. Ce conteneur servira de structure principale pour la barre lat\u00e9rale collante.<\/p>

            \"\"<\/figure><\/div>
            1. D\u00e9finir la direction du conteneur<\/li><\/ol>

              S\u00e9lectionnez le conteneur, puis r\u00e9glez sa direction sur Vertical dans le panneau de configuration situ\u00e9 \u00e0 gauche. La direction verticale permet aux \u00e9l\u00e9ments de la barre lat\u00e9rale de s'empiler de haut en bas, ce qui est essentiel pour cr\u00e9er une disposition verticale de la barre lat\u00e9rale.<\/p>

              \"\"<\/figure>
              1. D\u00e9finir la largeur du conteneur<\/li><\/ol>

                Dans le cadre de la Style<\/strong> ajustez la largeur pour qu'elle corresponde aux besoins de la barre lat\u00e9rale, par exemple 200 px ou moins, en fonction de vos pr\u00e9f\u00e9rences en mati\u00e8re de conception. En veillant \u00e0 ce qu'elle occupe le moins d'espace possible sur la page, vous contribuerez \u00e0 maintenir l'attention sur le contenu principal.<\/p>

                \"\"<\/figure><\/div>

                \u00c9tape 3 : Cr\u00e9er la barre lat\u00e9rale verticale autocollante<\/h3>
                1. Ins\u00e9rer des \u00e9l\u00e9ments de titre et de navigation<\/li><\/ol>

                  Ajouter un Rubrique<\/strong> \u00e0 l'int\u00e9rieur du conteneur avec un titre comme \"Navigation rapide\" ou \"Contenu\".<\/p>

                  \"\"<\/figure>
                  1. Ajouter des \u00e9l\u00e9ments de liste<\/li><\/ol>

                    Ins\u00e9rer un Liste des ic\u00f4nes<\/mark><\/strong> ou Bouton<\/strong> sous l'en-t\u00eate pour cr\u00e9er des \u00e9l\u00e9ments de navigation. Ici, nous utiliserons une liste d'ic\u00f4nes pour une pr\u00e9sentation simplifi\u00e9e, en laissant de l'espace entre chaque \u00e9l\u00e9ment dans la barre lat\u00e9rale.<\/p>

                    \"\"<\/figure>
                    1. Ajouter des liens de navigation<\/li><\/ol>

                      Pour votre barre de navigation lat\u00e9rale, ajoutez des \u00e9l\u00e9ments tels que :<\/p>

                      • A propos de nous<\/strong>: Ce lien permet d'acc\u00e9der \u00e0 la pr\u00e9sentation de l'entreprise.<\/li>\n\n
                      • Nos services<\/strong>: Dirige vers la section des services.<\/li>\n\n
                      • T\u00e9moignages<\/strong><\/strong>: Conduit \u00e0 la zone de retour d'information du client.<\/li>\n\n
                      • Contactez nous<\/strong>: Liens vers le formulaire de contact ou la section d'information.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Personnalisez les noms et les ic\u00f4nes en fonction de votre mise en page. Supprimez l'ic\u00f4ne ou allez dans la galerie d'ic\u00f4nes pour la s\u00e9lectionner.<\/p>

                        \"\"<\/figure><\/div>
                        1. D\u00e9finir des liens d'ancrage<\/li><\/ol>

                          Ajoutez des liens d'ancrage \u00e0 chaque \u00e9l\u00e9ment de navigation en d\u00e9finissant des points d'ancrage sur la page. Par exemple, pour une section \"\u00c0 propos de nous\", nous utiliserons 1TP5A propos de nous<\/strong>et des ancrages similaires pour les autres sections.<\/p>

                          Ajouter une ancre pour \"\u00c0 propos de nous\"<\/h5>

                          Dans Elementor, trouvez l'\u00e9l\u00e9ment Ancre de menu<\/mark><\/strong> widget. Faites-le glisser juste au-dessus du titre de la section \"\u00c0 propos de nous\" ou \u00e0 tout autre endroit appropri\u00e9. Nommez l'ancre (par exemple, \u00e0 propos de nous) dans les param\u00e8tres pour faciliter la cr\u00e9ation de liens par la suite.<\/p>

                          \"\"<\/figure>
                          \"\"<\/figure>
                          Lier l'ancre \u00e0 la navigation<\/h5>

                          Revenez \u00e0 l'\u00e9l\u00e9ment de la liste d'ic\u00f4nes \"\u00c0 propos de nous\" et cr\u00e9ez un lien en d\u00e9finissant l'URL comme #about-us. Les utilisateurs qui cliqueront sur cet \u00e9l\u00e9ment de navigation acc\u00e8deront imm\u00e9diatement \u00e0 la section.<\/p>

                          \"\"<\/figure><\/div>

                          R\u00e9p\u00e9tez cette op\u00e9ration pour les autres \u00e9l\u00e9ments du menu.<\/p>

                          1. D\u00e9finir la largeur de la barre lat\u00e9rale<\/li><\/ol>

                            Pour maintenir une mise en page coh\u00e9rente, fixez la largeur du conteneur de la liste d'ic\u00f4nes et du conteneur principal \u00e0 une valeur fixe, par exemple 200px.<\/p>

                            1. Personnaliser le style de la barre lat\u00e9rale<\/li><\/ol>

                              Vous pouvez ajuster la police, les couleurs et l'espacement dans la rubrique Style<\/mark> pour qu'il corresponde au style de votre site. Vous pouvez \u00e9galement ajouter un couleur de fond<\/mark>La barre lat\u00e9rale se distingue visuellement par des effets d'ombrage, de rembourrage et d'ombrage.<\/p>

                              \"\"<\/figure>

                              \u00c9tape 4 : Activer l'effet collant<\/h3>

                              Pour que la barre lat\u00e9rale reste fixe lorsque l'utilisateur fait d\u00e9filer la page, proc\u00e9dez comme suit :<\/p>

                              1. D\u00e9finition de l'ID CSS pour la barre de navigation et la zone de contenu<\/li><\/ol>

                                S\u00e9lectionnez le conteneur de la barre de navigation et, dans l'onglet Avanc\u00e9, ajoutez un ID CSS. menu lat\u00e9ral<\/code><\/strong>.<\/p>

                                \"\"<\/figure>
                                • Ajouter un code CSS personnalis\u00e9<\/li><\/ul>

                                  Ouvrez Custom CSS dans Elementor (un param\u00e8tre global ou un CSS personnalis\u00e9 pour le conteneur de la barre de navigation). Ajoutez le code suivant :<\/p>

                                  #sidebar-menu {\n    position : fixed ; \/* Fixe la barre lat\u00e9rale en place, de sorte qu'elle ne se d\u00e9place pas lors du d\u00e9filement *\/\n    left : 0 ; \/* Aligne la barre lat\u00e9rale sur le c\u00f4t\u00e9 gauche de la page *\/\n    top : 0 ; \/* Positionne la barre lat\u00e9rale en haut de la page *\/\n    height : 100vh ; \/* Fixe la hauteur de la barre lat\u00e9rale \u00e0 la hauteur totale de la fen\u00eatre *\/\n    width : 200px ; \/* Ajuste la largeur de la barre lat\u00e9rale selon les besoins *\/\n    z-index : 10 ; \/* Assure que la barre lat\u00e9rale reste au-dessus des autres \u00e9l\u00e9ments *\/\n    background-color : #e0f7fa ; \/* D\u00e9finit la couleur d'arri\u00e8re-plan de la barre lat\u00e9rale *\/\n    color : #FFF ; \/* D\u00e9finit la couleur du texte \u00e0 l'int\u00e9rieur de la barre lat\u00e9rale *\/\n    padding-top : 250px ; \/* Ajoute du padding en haut de la barre lat\u00e9rale *\/\n    overflow-y : auto ; \/* Permet le d\u00e9filement si le contenu de la barre lat\u00e9rale est trop long *\/\n}<\/code><\/pre>
                                  \"\"<\/figure>
                                  Explication<\/p>
                                  • position : fixe ;
                                    • Maintient la barre lat\u00e9rale dans une position fixe sur l'\u00e9cran lorsque les utilisateurs font d\u00e9filer la page. Elle restera toujours visible dans la fen\u00eatre de visualisation, quel que soit le d\u00e9filement de la page.<\/li><\/ul><\/li>\n\n
                                    • gauche : 0 ;
                                      • Alignez la barre lat\u00e9rale sur le bord gauche de la fen\u00eatre de visualisation, en la positionnant au m\u00eame niveau que le c\u00f4t\u00e9 gauche de la page.<\/li><\/ul><\/li><\/ul>
                                        • top : 0 ;
                                          • La barre lat\u00e9rale commence ainsi en haut de la fen\u00eatre, s'alignant sur le haut de la page.<\/li><\/ul><\/li><\/ul>
                                            • hauteur : 100vh ;
                                              • D\u00e9finit la hauteur de la barre lat\u00e9rale de mani\u00e8re \u00e0 ce qu'elle occupe toute la hauteur de la fen\u00eatre (100% de la hauteur de la fen\u00eatre). Cela permet de s'assurer que la barre lat\u00e9rale s'\u00e9tend du haut au bas de l'\u00e9cran.<\/li><\/ul><\/li><\/ul>
                                                • largeur : 200px ;
                                                  • Fixe la largeur de la barre lat\u00e9rale \u00e0 200px. Cette valeur peut \u00eatre ajust\u00e9e en fonction des besoins de conception.<\/li><\/ul><\/li><\/ul>
                                                    • z-index : 10 ;
                                                      • D\u00e9finit l'ordre d'empilement de la barre lat\u00e9rale. Un indice z plus \u00e9lev\u00e9 garantit que la barre lat\u00e9rale appara\u00eet au-dessus d'autres \u00e9l\u00e9ments qui pourraient se chevaucher.<\/li><\/ul><\/li><\/ul>
                                                        • couleur de fond : #e0f7fa ;
                                                          • Cette option d\u00e9finit la couleur d'arri\u00e8re-plan de la barre lat\u00e9rale. Ici, un bleu pastel clair (#e0f7fa) a \u00e9t\u00e9 choisi pour donner une impression de calme et de propret\u00e9.<\/li><\/ul><\/li><\/ul>
                                                            • couleur : #FFF ;
                                                              • D\u00e9finit la couleur du texte dans la barre lat\u00e9rale en blanc (#FFF). Cela cr\u00e9e un contraste avec l'arri\u00e8re-plan bleu pastel, am\u00e9liorant ainsi la lisibilit\u00e9.<\/li><\/ul><\/li><\/ul>
                                                                • padding-top : 250px ;
                                                                  • Ajoute un rembourrage en haut de la barre lat\u00e9rale. Cela peut \u00eatre utile si vous souhaitez que le contenu principal de la barre lat\u00e9rale (comme les liens de navigation) commence plus bas, en laissant de l'espace en haut pour les marques ou les logos.<\/li><\/ul><\/li><\/ul>
                                                                    • overflow-y : auto ;
                                                                      • Il permet le d\u00e9filement vertical \u00e0 l'int\u00e9rieur de la barre lat\u00e9rale si le contenu d\u00e9passe sa hauteur. Cela garantit que le contenu reste accessible sans affecter la pr\u00e9sentation g\u00e9n\u00e9rale de la page.<\/li><\/ul><\/li><\/ul>
                                                                        \"\"<\/figure><\/div>
                                                                        Une barre lat\u00e9rale verticale collante est un \u00e9l\u00e9ment de conception qui reste fixe sur le c\u00f4t\u00e9 d'une page Web lorsque les utilisateurs font d\u00e9filer la page, offrant une navigation rapide vers des sections sp\u00e9cifiques. Ce tutoriel vous guide dans la cr\u00e9ation d'une barre lat\u00e9rale collante dans Elementor, en utilisant des \u00e9l\u00e9ments de navigation, des liens d'ancrage et un style personnalis\u00e9 pour une exp\u00e9rience utilisateur transparente. Avec Elementor Pro install\u00e9, vous allez cr\u00e9er un mod\u00e8le de page unique, mettre en place un conteneur pour la barre lat\u00e9rale, ajouter des \u00e9l\u00e9ments de navigation et assigner des liens d'ancrage. Enfin, en ajoutant des feuilles de style CSS personnalis\u00e9es, la barre lat\u00e9rale reste fixe dans la fen\u00eatre de visualisation, ce qui am\u00e9liore l'accessibilit\u00e9 des pages \u00e0 fort contenu, telles que les sections de service ou de portefeuille.<\/p>","protected":false},"excerpt":{"rendered":"
                                                                        Une barre lat\u00e9rale verticale est un \u00e9l\u00e9ment de conception pratique positionn\u00e9 sur le c\u00f4t\u00e9 de la page qui reste visible dans la fen\u00eatre de visualisation lorsque les utilisateurs font d\u00e9filer la page...<\/p>","protected":false},"author":10,"featured_media":5113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,57],"tags":[418,419],"class_list":["post-5085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugin-usage-and-recommendation","category-plugins-theme","tag-elementor-tutorial","tag-sticky-sidebar",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/5085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/comments?post=5085"}],"version-history":[{"count":2,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/5085\/revisions"}],"predecessor-version":[{"id":5116,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/5085\/revisions\/5116"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media\/5113"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media?parent=5085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/categories?post=5085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/tags?post=5085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}