Introduction

Un moyen efficace d'améliorer cette expérience est d'ajouter un préchargeur, c'est-à-dire un fichier animation ou image qui apparaît pendant que le contenu de la page se charge en arrière-plan. Les utilisateurs bénéficient ainsi d'une transition transparente pendant qu'ils patientent, ce qui confère à votre site un aspect soigné et professionnel. Dans ce guide, nous verrons chaque étape de la mise en place d'une préchargeur en Elementor ProVous pouvez ainsi afficher des animations personnalisées ou des logos de marque qui renforcent l'identité de votre site.

Cliquez sur Allez sur le canal d'achat authentique d'Elementor Pro.

Qu'est-ce qu'un préchargeur et pourquoi l'utiliser ?

Un préchargeur est une animation ou un graphique qui s'affiche pendant le chargement du contenu de votre site. Cela peut s'avérer particulièrement utile pour les pages dont le contenu est lourd et qui peuvent prendre plus de temps à charger. L'utilisation d'un préchargeur améliore l'expérience de l'utilisateur en réduisant le temps de chargement perçu, en maintenant l'attention des utilisateurs et en évitant qu'ils ne voient des pages partiellement chargées. En outre, un préchargeur vous permet de mettre en valeur votre marque et d'ajouter un peu de personnalité à votre site web.

Comment créer un Preloader dans Elementor Pro

Étape 1 : Créer un modèle d'en-tête

La première étape consiste à créer un en-tête modèle qui inclut le préchargeur. En plaçant le préchargeur dans un modèle d'en-tête, vous pouvez vous assurer qu'il apparaît de manière cohérente sur toutes les pages de votre site web.

Accéder au concepteur de thème:

• Accédez à votre Tableau de bord Elementornaviguer Modèleset sélectionnez Constructeur de thèmes.

Créer un nouveau modèle d'en-tête:

• Dans le Theme Builder, localisez le fichier En-tête et cliquez sur le bouton + pour créer un nouveau modèle.

• Sélectionnez un modèle et cliquez sur Insérer pour accéder à la page.

Publier le modèle:

• Après avoir conçu votre en-tête, cliquez sur Publier.

• Lorsque les conditions d'affichage vous sont demandées, sélectionnez Tout le site pour vous assurer que le préchargeur est appliqué à chaque page de votre site web.

• Cliquez sur Enregistrer et fermer.

Étape 2 : Ajouter un conteneur et définir un identifiant CSS

Ajoutons maintenant un conteneur qui hébergera l'animation de préchargement. La définition d'un ID CSS pour ce conteneur nous permettra de le cibler ultérieurement avec CSS et JavaScript.

Ajouter un conteneur:

• Dans votre nouveau modèle d'en-tête, ajoutez un conteneur à colonne unique.

Définir l'ID CSS:

• Allez à la page Avancé des paramètres du conteneur.

• Dans le cadre de la ID CSS Entrez dans le champ abc_preload. Cet identifiant sera utilisé pour appliquer des feuilles de style CSS et JavaScript personnalisées afin de contrôler le comportement du préchargeur.

Étape 3 : Ajouter une icône ou un widget d'image

Pour créer le élément visuel de votre préchargeur, vous pouvez ajouter un élément Icône ou Image pour afficher une icône de chargement ou le logo de votre marque.

Ajouter le widget:

• Vous pouvez ajouter un widget Icône ou Image au conteneur, selon que vous souhaitez une icône de chargement standard ou un logo personnalisé.

Définissez l'ID CSS du widget:

• Allez à la page Avancé des paramètres du widget et définissez l'ID CSS à abc_loader.

Style de l'icône ou de l'image:

• Naviguez jusqu'à la page Style et réglez la taille de l'icône ou de l'image en fonction de votre projet. Il est souvent préférable d'utiliser des icônes d'une taille d'environ 1px.

Étape 4 : Ajouter un widget HTML pour contrôler le préchargeur

Ensuite, nous ajouterons un widget HTML contenant du JavaScript pour contrôler l'affichage et la disparition du préchargeur. Ce script masquera le préchargeur après un court délai, ce qui permettra à votre contenu de se charger en douceur.

Ajouter le widget HTML:

• Sous le widget Icône ou Image, ajoutez un widget HTML.

Insérer du code JavaScript:

• Dans le widget HTML, collez le code JavaScript suivant :

<script>
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      document.getElementById('abc_preload').style.display = 'none';
      document.getElementById('content').classList.add('visible');
    }, 2000); // Adjust the delay as needed (in milliseconds)
  });
</script>

Ce code cache le préchargeur 2 secondes après le début du chargement du contenu de la page. En fonction du temps de chargement moyen de votre site web, vous pouvez ajuster le paramètre 2000 pour augmenter ou diminuer le délai (en millisecondes).

Définissez l'ID CSS du widget HTML:

• Dans la section Avancé Dans l'onglet CSS, définissez l'ID CSS comme suit abc_preloader_adds afin d'éviter tout espacement involontaire.

Étape 5 : Ajouter un CSS personnalisé pour styliser le préchargeur

Une fois la structure en place, nous allons ajoutez des feuilles de style CSS personnalisées pour styliser le conteneur de préchargement et l'animation de chargement.

Ouvrez les paramètres CSS personnalisés:

• Cliquez sur le bouton Mise en page (icône d'engrenage) dans le panneau Elementor.

• Allez à la page Avancé et ouvrez l'onglet CSS personnalisé section.

• Collez le code CSS suivant:

#abc_preload {
  position : fixed ;
  top : 0 ;
  gauche : 0 ;
  width : 100% ;
  hauteur : 100% ;
  arrière-plan : #fff ;
  affichage : flex ;
  align-items : center ;
  justify-content : center ;
  z-index : 1000 ;
}

#abc_loader {
  border : 8px solid #363636 ;
  border-top : 8px solid #3498db ;
  border-radius : 50% ;
  width : 50px ;
  hauteur : 50px ;
  animation : spin 1s linear infinite ;
}

@keyframes spin {
  0% { transform : rotate(0deg) ; }
  100% { transform : rotate(360deg) ; }
}

#abc_preloader_adds {
  display : none ;
}

• Ce code permettra :
  • Couvrir toute la page avec un arrière-plan blanc jusqu'à ce que le préchargeur soit caché.
  • Centrez le chargeur (#abc_loader) à la fois verticalement et horizontalement sur la page.
  • Animer le chargeur tourne indéfiniment.

Étape 6 : Publier le modèle et tester le préchargeur

Publier le modèle d'en-tête:

• Cliquez sur Publier et confirmez les conditions d'affichage comme suit Tout le site pour vous assurer que le préchargeur est actif sur l'ensemble de votre site.

Testez le préchargeur:

• Visitez votre site web pour voir le préchargeur en action. Si le temps de chargement vous semble trop court ou trop long, ajustez le délai dans le code JavaScript en fonction de vos besoins.

Conclusion

L'ajout d'un préchargeur à votre site Elementor Pro améliore l'expérience de l'utilisateur en créant une transition transparente pendant le chargement du contenu. Cette animation ou ce graphique engage les utilisateurs, réduisant les temps de chargement perçus, et renforce l'identité de votre marque avec des visuels personnalisés tels que des logos ou des icônes de chargement. Le processus d'installation implique :

• Création d'un modèle d'en-tête.
• Ajout d'un conteneur pour le préchargeur.
• CSS et JavaScript sont utilisés pour contrôler son apparence et son comportement.

Personnalisable et réactif, un préchargeur bien conçu ajoute une touche raffinée à votre site, garantissant une expérience professionnelle et fluide sur tous les appareils.

FAQ

1. Quels sont les avantages de l'utilisation d'un préchargeur ?

Un préchargeur peut améliorer l'expérience de l'utilisateur en réduisant le temps de chargement perçu, en maintenant l'attention des utilisateurs et en donnant un aspect professionnel à votre site. Il permet également d'éviter que les utilisateurs ne voient des pages partiellement chargées, créant ainsi une expérience de navigation plus fluide.

2. Puis-je personnaliser l'animation du préchargeur ?

Oui, vous pouvez personnaliser l'animation du préchargeur en modifiant le CSS dans le code. Vous pouvez modifier l'élément #abc_loader pour inclure différents types d'animations, de couleurs, de tailles et d'autres effets visuels. Si vous le souhaitez, vous pouvez remplacer l'icône par un GIF ou une autre animation personnalisée.

3. Comment puis-je ajuster la durée du préchargeur ?

Dans le code JavaScript, vous verrez une valeur de 2000 dans la fonction setTimeout, représentant le délai en millisecondes. Vous pouvez modifier cette valeur pour augmenter ou réduire la durée pendant laquelle le préchargeur est visible. Par exemple, si vous la remplacez par 3000, le préchargeur s'affichera pendant 3 secondes.