OpenByt - Votre source ultime de connaissances gratuites sur WordPress

Guide complet pour créer un Preloader professionnel dans Elementor Pro pour une expérience de site web plus fluide

tomsqum

Introduction

Un moyen efficace d'améliorer cette expérience est d'ajouter un préchargeur, c'est-à-dire un fichier animation ou image that appears while the page content loads in the background. This gives users a seamless transition as they wait, ensuring your site feels polished and professional. In this guide, we’ll walk through each step of setting up a préchargeur en Elementor Pro, allowing you to display custom animations or brand logos that reinforce your site’s identity.

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

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

A preloader is a placeholder animation or graphic that displays while your site’s content is loading. This can be especially useful for pages with heavy content that may take longer to load. Using a preloader creates a better user experience by reducing perceived load time, keeping users engaged, and preventing them from seeing partially loaded pages. Additionally, a preloader allows you to showcase your branding and add a bit of personality to your website.

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:

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

Publier le modèle:

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

Now, let’s add a 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:

Définir l'ID CSS:

É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 widget to display either a loading icon or your brand’s logo.

Ajouter le widget:

Définissez l'ID CSS du widget:

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

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

Next, we’ll add an HTML widget that contains JavaScript to control when the preloader is displayed and when it disappears. This script will hide the preloader after a short delay, allowing your content to load smoothly.

Ajouter le widget HTML:

Insérer du code JavaScript:

<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>

This code will hide the preloader 2 seconds after the page content has started loading. Based on your website’s average load time, you can adjust the 2000 pour augmenter ou diminuer le délai (en millisecondes).

Définissez l'ID CSS du widget HTML:

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

With the structure in place, we’ll 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:

#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 ;
}
https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-15-21-17-14.mp4

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

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

Testez le préchargeur:

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 :

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.

Quitter la version mobile