{"id":2696,"date":"2024-10-15T21:52:45","date_gmt":"2024-10-15T13:52:45","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=2696"},"modified":"2024-10-19T10:02:55","modified_gmt":"2024-10-19T02:02:55","slug":"complete-guide-to-creating-a-professional-preloader-in-elementor-pro-for-a-smoother-website-experience","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/guide-complet-pour-creer-un-preloader-professionnel-dans-elementor-pro-pour-une-experience-de-site-web-plus-fluide","title":{"rendered":"Guide complet pour cr\u00e9er un Preloader professionnel dans Elementor Pro pour une exp\u00e9rience de site web plus fluide"},"content":{"rendered":"

Introduction<\/h4>

Un moyen efficace d'am\u00e9liorer cette exp\u00e9rience est d'ajouter un pr\u00e9chargeur, c'est-\u00e0-dire un fichier animation<\/strong> ou image<\/strong> qui appara\u00eet pendant que le contenu de la page se charge en arri\u00e8re-plan. Les utilisateurs b\u00e9n\u00e9ficient ainsi d'une transition transparente pendant qu'ils patientent, ce qui conf\u00e8re \u00e0 votre site un aspect soign\u00e9 et professionnel. Dans ce guide, nous verrons chaque \u00e9tape de la mise en place d'une pr\u00e9chargeur<\/strong> en Elementor Pro<\/mark><\/strong>Vous pouvez ainsi afficher des animations personnalis\u00e9es ou des logos de marque qui renforcent l'identit\u00e9 de votre site.<\/p>

Cliquez sur<\/a><\/strong> Allez sur le canal d'achat authentique d'Elementor Pro.<\/p>

\"\"<\/figure>

Qu'est-ce qu'un pr\u00e9chargeur et pourquoi l'utiliser ?<\/h4>

Un pr\u00e9chargeur est une animation ou un graphique qui s'affiche pendant le chargement du contenu de votre site. Cela peut s'av\u00e9rer particuli\u00e8rement utile pour les pages dont le contenu est lourd et qui peuvent prendre plus de temps \u00e0 charger. L'utilisation d'un pr\u00e9chargeur am\u00e9liore l'exp\u00e9rience de l'utilisateur en r\u00e9duisant le temps de chargement per\u00e7u, en maintenant l'attention des utilisateurs et en \u00e9vitant qu'ils ne voient des pages partiellement charg\u00e9es. En outre, un pr\u00e9chargeur vous permet de mettre en valeur votre marque et d'ajouter un peu de personnalit\u00e9 \u00e0 votre site web.<\/p>

Comment cr\u00e9er un Preloader dans Elementor Pro<\/h3>

\u00c9tape 1 : Cr\u00e9er un mod\u00e8le d'en-t\u00eate<\/h4>

La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er un en-t\u00eate<\/strong> mod\u00e8le<\/strong> qui inclut le pr\u00e9chargeur. En pla\u00e7ant le pr\u00e9chargeur dans un mod\u00e8le d'en-t\u00eate, vous pouvez vous assurer qu'il appara\u00eet de mani\u00e8re coh\u00e9rente sur toutes les pages de votre site web.<\/p>

Acc\u00e9der au concepteur de th\u00e8me<\/strong>:<\/p>

  • Acc\u00e9dez \u00e0 votre Tableau de bord Elementor<\/strong>naviguer Mod\u00e8les<\/mark><\/strong>et s\u00e9lectionnez Constructeur de th\u00e8mes<\/mark><\/strong>.<\/li><\/ul>
    \"\"<\/figure><\/div>

    Cr\u00e9er un nouveau mod\u00e8le d'en-t\u00eate<\/strong>:<\/p>

    • Dans le Theme Builder, localisez le fichier En-t\u00eate<\/mark><\/strong> et cliquez sur le bouton +<\/mark><\/strong> pour cr\u00e9er un nouveau mod\u00e8le.<\/li><\/ul>
      \"\"<\/figure><\/div>
      • S\u00e9lectionnez un mod\u00e8le et cliquez sur Ins\u00e9rer pour acc\u00e9der \u00e0 la page.<\/li><\/ul>
        \"\"<\/figure>

        Publier le mod\u00e8le<\/strong>:<\/p>

        • Apr\u00e8s avoir con\u00e7u votre en-t\u00eate, cliquez sur Publier<\/strong>.<\/li><\/ul>
          \"\"<\/figure><\/div>
          • Lorsque les conditions d'affichage vous sont demand\u00e9es, s\u00e9lectionnez Tout le site<\/mark><\/strong> pour vous assurer que le pr\u00e9chargeur est appliqu\u00e9 \u00e0 chaque page de votre site web.<\/li><\/ul>
            \"\"<\/figure><\/div>
            • Cliquez sur Enregistrer et fermer<\/strong>.<\/li><\/ul>

              \u00c9tape 2 : Ajouter un conteneur et d\u00e9finir un identifiant CSS<\/h4>
              \"\"<\/figure><\/div>

              Ajoutons maintenant un conteneur<\/strong> qui h\u00e9bergera l'animation de pr\u00e9chargement. La d\u00e9finition d'un ID CSS<\/strong> pour ce conteneur nous permettra de le cibler ult\u00e9rieurement avec CSS et JavaScript.<\/p>

              Ajouter un conteneur<\/strong>:<\/p>

              • Dans votre nouveau mod\u00e8le d'en-t\u00eate, ajoutez un conteneur \u00e0 colonne unique.<\/li><\/ul>
                \"\"<\/figure><\/div>

                D\u00e9finir l'ID CSS<\/strong>:<\/p>

                • Allez \u00e0 la page Avanc\u00e9<\/strong> des param\u00e8tres du conteneur.<\/li><\/ul>
                  \"\"<\/figure><\/div>
                  • Dans le cadre de la ID CSS<\/strong> Entrez dans le champ <\/mark>abc_preload<\/mark><\/strong>. Cet identifiant sera utilis\u00e9 pour appliquer des feuilles de style CSS et JavaScript personnalis\u00e9es afin de contr\u00f4ler le comportement du pr\u00e9chargeur.<\/li><\/ul>
                    \"\"<\/figure>

                    \u00c9tape 3 : Ajouter une ic\u00f4ne ou un widget d'image<\/h4>

                    Pour cr\u00e9er le \u00e9l\u00e9ment visuel<\/strong> de votre pr\u00e9chargeur, vous pouvez ajouter un \u00e9l\u00e9ment Ic\u00f4ne<\/strong> ou Image<\/strong> pour afficher une ic\u00f4ne de chargement ou le logo de votre marque.<\/p>

                    Ajouter le widget<\/strong>:<\/p>

                    • Vous pouvez ajouter un widget Ic\u00f4ne ou Image au conteneur, selon que vous souhaitez une ic\u00f4ne de chargement standard ou un logo personnalis\u00e9.<\/li><\/ul>
                      \"\"<\/figure><\/div>

                      D\u00e9finissez l'ID CSS du widget<\/strong>:<\/p>

                      • Allez \u00e0 la page Avanc\u00e9<\/strong> des param\u00e8tres du widget et d\u00e9finissez l'ID CSS \u00e0 abc_loader<\/mark><\/strong>.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Style de l'ic\u00f4ne ou de l'image<\/strong>:<\/p>

                        • Naviguez jusqu'\u00e0 la page Style<\/mark><\/strong> et r\u00e9glez la taille de l'ic\u00f4ne ou de l'image en fonction de votre projet. Il est souvent pr\u00e9f\u00e9rable d'utiliser des ic\u00f4nes d'une taille d'environ 1px<\/strong>.<\/li><\/ul>
                          \"\"<\/figure><\/div>

                          \u00c9tape 4 : Ajouter un widget HTML pour contr\u00f4ler le pr\u00e9chargeur<\/h4>

                          Ensuite, nous ajouterons un widget HTML contenant du JavaScript pour contr\u00f4ler l'affichage et la disparition du pr\u00e9chargeur. Ce script masquera le pr\u00e9chargeur apr\u00e8s un court d\u00e9lai, ce qui permettra \u00e0 votre contenu de se charger en douceur.<\/p>

                          Ajouter le widget HTML<\/strong>:<\/p>

                          • Sous le widget Ic\u00f4ne ou Image, ajoutez un widget HTML.<\/li><\/ul>
                            \"\"<\/figure><\/div>\n\n
                            \"\"<\/figure><\/div><\/div>

                            Ins\u00e9rer du code JavaScript<\/strong>:<\/p>

                            • Dans le widget HTML, collez le code JavaScript suivant :<\/li><\/ul>
                              <script>\n  document.addEventListener('DOMContentLoaded', function () {\n    setTimeout(function () {\n      document.getElementById('abc_preload').style.display = 'none';\n      document.getElementById('content').classList.add('visible');\n    }, 2000); \/\/ Adjust the delay as needed (in milliseconds)\n  });\n<\/script>\n<\/code><\/pre>
                              \"\"<\/figure>
                              Ce code cache le pr\u00e9chargeur 2 secondes apr\u00e8s le d\u00e9but du chargement du contenu de la page. En fonction du temps de chargement moyen de votre site web, vous pouvez ajuster le param\u00e8tre 2000<\/strong> pour augmenter ou diminuer le d\u00e9lai (en millisecondes).<\/p>
                              D\u00e9finissez l'ID CSS du widget HTML<\/strong>:<\/p>
                              • Dans la section Avanc\u00e9<\/strong> Dans l'onglet CSS, d\u00e9finissez l'ID CSS comme suit abc_preloader_adds<\/strong> afin d'\u00e9viter tout espacement involontaire.<\/li><\/ul>
                                \"\"<\/figure>
                                \u00c9tape 5 : Ajouter un CSS personnalis\u00e9 pour styliser le pr\u00e9chargeur<\/h4>
                                Une fois la structure en place, nous allons ajoutez des feuilles de style CSS personnalis\u00e9es<\/strong> pour styliser le conteneur de pr\u00e9chargement et l'animation de chargement.<\/p>
                                Ouvrez les param\u00e8tres CSS personnalis\u00e9s<\/strong>:<\/p>
                                • Cliquez sur le bouton Mise en page<\/strong> (ic\u00f4ne d'engrenage) dans le panneau Elementor.<\/li><\/ul>
                                  \"\"<\/figure><\/div>
                                  • Allez \u00e0 la page Avanc\u00e9<\/strong> et ouvrez l'onglet CSS personnalis\u00e9<\/strong> section.<\/li><\/ul>
                                    \"\"<\/figure><\/div>
                                    • Collez le code CSS suivant<\/strong>:<\/li><\/ul>
                                      #abc_preload {\n  position : fixed ;\n  top : 0 ;\n  gauche : 0 ;\n  width : 100% ;\n  hauteur : 100% ;\n  arri\u00e8re-plan : #fff ;\n  affichage : flex ;\n  align-items : center ;\n  justify-content : center ;\n  z-index : 1000 ;\n}\n\n#abc_loader {\n  border : 8px solid #363636 ;\n  border-top : 8px solid #3498db ;\n  border-radius : 50% ;\n  width : 50px ;\n  hauteur : 50px ;\n  animation : spin 1s linear infinite ;\n}\n\n@keyframes spin {\n  0% { transform : rotate(0deg) ; }\n  100% { transform : rotate(360deg) ; }\n}\n\n#abc_preloader_adds {\n  display : none ;\n}\n<\/code><\/pre>