Améliorez votre site web Elementor avec des animations Preloader personnalisées

Table des matières

• L'importance des animations de préchargement
• Styles de préchargeurs que vous pourriez utiliser
• Pas à pas : Ajouter un préchargeur personnalisé dans Elementor
  • Étape 1 : Installer un plugin de préchargement
  • Étape 2 : Installation de Preloader Plus
  • Étape 3 : Configuration des paramètres du préchargeur
  • Étape 4 : Choix de l'animation de votre préchargeur
  • Étape 5 : Ajustement de la conception et du calendrier
• Intégrer Preloader avec Elementor pour un meilleur contrôle
• Test et optimisation de votre préchargeur
• Dernières réflexions : Faire en sorte que votre site Web Elementor se démarque

L'importance des animations de préchargement

Un préchargeur peut transformer la première impression de votre site Elementor en quelque chose de mémorable. Au lieu d'une page blanche ou d'un redoutable spinner de chargement, un préchargeur bien conçu ajoute une touche de personnalité et maintient l'attention de vos visiteurs pendant qu'ils attendent que votre contenu apparaisse. Dans cet article, je vais vous guider à travers le processus de création et de personnalisation des animations de préchargement dans Elementor, en le décomposant en étapes simples que tout le monde peut suivre.

Imaginez que vous ayez cliqué sur un lien et que vous soyez bloqué devant un écran vide. C'est frustrant, n'est-ce pas ? Les animations de préchargement résolvent ce problème en fournissant un retour visuel indiquant que la page est en cours de chargement, ce qui permet de divertir les visiteurs et de les rassurer quant à la qualité de leur expérience. Non seulement les animations de préchargement améliorent l'engagement des utilisateurs, mais elles contribuent également à véhiculer la personnalité de votre marque par le biais de la créativité visuelle.

Styles de préchargeurs que vous pourriez utiliser

Avant de voir comment ajouter des préchargeurs à votre site Elementor, explorons les différents styles que vous pouvez utiliser :

1. Animation d'un spinner: Un choix classique. Simple mais efficace, le spinner rotatif indique aux utilisateurs qu'il se passe quelque chose.
   • Cas d'utilisation: Convient aux sites web minimalistes ou axés sur la technologie. Ce style est direct et non distrayant, ce qui le rend idéal pour les sites web où la simplicité est essentielle.
   • Conseils de personnalisation: Utilisez les couleurs de votre marque pour le spinner afin de maintenir une certaine cohérence.
2. Barre de progression: Idéal si vous souhaitez communiquer un pourcentage de chargement exact, afin que les visiteurs sachent combien de temps ils doivent attendre.
   • Cas d'utilisation: Idéal pour les sites à fort contenu, tels que les sites de commerce électronique ou les blogs contenant de nombreuses images. Les barres de progression donnent aux utilisateurs une indication claire de la progression du chargement, ce qui réduit la frustration.
   • Conseils de personnalisation: Personnalisez la couleur de la barre de progression pour l'aligner sur la palette de couleurs principales de votre site web, et envisagez d'ajouter une étiquette telle que "Chargement... Veuillez patienter" pour la rendre plus informative.
3. Animation du logo: Vous pouvez animer votre logo afin de respecter votre marque tout en faisant preuve de créativité.
   • Cas d'utilisation: Parfait pour les sites web axés sur la marque, tels que les agences, les marques de mode ou les portfolios créatifs. Ce type de préchargeur renforce l'identité de la marque.
   • Conseils de personnalisation: Utilisez des outils tels que After Effects ou LottieFiles pour créer des animations SVG légères de votre logo. Veillez à ce que la boucle d'animation soit fluide et ne dure pas plus de quelques secondes.
4. Fondu-enchaîné de texte: Des mots tels que "Chargement..." qui apparaissent et s'effacent sont une option simple mais percutante, qui ajoute une touche personnelle.
   • Cas d'utilisation: Idéal pour les blogs personnels ou les sites web communautaires. Il crée une atmosphère chaleureuse et conviviale, ce qui permet aux utilisateurs de se sentir plus proches.
   • Conseils de personnalisation: Personnalisez le texte pour qu'il corresponde à la voix de votre marque - utilisez quelque chose d'unique comme "Tenez bon, un contenu extraordinaire est en route !" pour ajouter de la personnalité.

L'objectif est de choisir un préchargeur qui s'harmonise avec votre marque, avec le style de votre site web et qui maintient l'attention de vos utilisateurs pendant le chargement du contenu.

Pas à pas : Ajouter un préchargeur personnalisé dans Elementor

Entrons maintenant dans les détails de la manière dont vous pouvez ajouter une animation de préchargement personnalisée à votre site Web Elementor. Ne vous inquiétez pas si vous n'êtes pas un expert en codage, cette méthode est adaptée aux débutants.

Étape 1 : Installer un plugin de préchargement

La manière la plus simple d'ajouter une animation de préchargement dans Elementor est d'utiliser un plugin. Voici quelques-unes des options les plus populaires :

• LoftLoader: Un plugin hautement personnalisable qui s'intègre parfaitement à Elementor.
• Preloader Plus: Offre une grande souplesse pour l'ajout d'animations et l'ajustement des paramètres.
• PageLoader: Une option haut de gamme avec un contrôle étendu de la conception et de l'affichage.

Pour ce tutoriel, nous utiliserons la fonction Preloader Plus par exemple, car il est convivial et offre de nombreuses possibilités de personnalisation sans qu'il soit nécessaire de toucher au code.

Étape 2 : Installation de Preloader Plus

1. Accédez au tableau de bord de WordPress.
   • Connectez-vous à votre panneau d'administration WordPress.
   • À partir du tableau de bord, vous pourrez installer des plugins et personnaliser les paramètres.
2. Allez dans Plugins > Ajouter un nouveau.
   • Cliquez sur le bouton Plugins dans la barre latérale gauche, puis cliquez sur Ajouter un nouveau.
3. Recherchez "Preloader Plus" dans la barre de recherche.
   • Tapez "Preloader Plus" dans la barre de recherche et appuyez sur Entrée.
4. Cliquez sur Installer maintenant et ensuite Activer.
   • Une fois que vous avez trouvé le plugin, cliquez sur Installer maintenant.
   • Une fois l'installation terminée, cliquez sur Activer pour activer le plugin sur votre site web.

Une fois activé, vous verrez les paramètres de Preloader Plus dans votre tableau de bord WordPress.

Étape 3 : Configuration des paramètres du préchargeur

1. Ouvrez Preloader Plus Settings du tableau de bord.
   • Aller à Paramètres > Preloader Plus pour accéder aux options de configuration.
2. Naviguez jusqu'à la page Paramètres généraux tabulation.
   • Ici, vous pouvez activer ou désactiver le préchargeur et définir son comportement de base.
3. Activer le préchargeur en activant la bascule.
   • Cela activera le préchargeur sur l'ensemble de votre site web en fonction des paramètres que vous aurez choisis.

Ensuite, il est temps de décider quand et où vous voulez que votre préchargeur soit actif. Il se peut que vous ne souhaitiez l'utiliser que pour votre page d'accueil, ou bien pour l'ensemble de votre site.

• Pages à afficher: Sélectionnez les pages sur lesquelles vous souhaitez que le préchargeur soit visible (par exemple, Page d'accueil, Toutes les pages, etc.).
  • Conseil: Pour une meilleure expérience utilisateur, pensez à n'activer le préchargeur que sur les pages dont le contenu est lourd et qui prennent plus de temps à charger.
• Fréquence d'affichage: Choisissez de l'afficher ou non sur le Chargement de la première page uniquement ou à chaque fois qu'un visiteur navigue vers une nouvelle page.
  • Conseil: En l'utilisant uniquement pour le chargement de la première page, vous pouvez améliorer l'expérience de navigation globale en réduisant les animations de chargement répétitives.

Étape 4 : Choix de l'animation de votre préchargeur

1. Allez à la page Réglages du style tabulation.
   • Dans cet onglet, vous pouvez configurer l'apparence de votre préchargeur.
   • Exemple: Vous pouvez visiter https://example.com pour voir comment un préchargeur d'animation de logo peut améliorer l'image de marque d'un portfolio créatif.
2. Sélectionnez le type de préchargeur: Choisissez entre un spinner, une barre de progression ou une animation personnalisée.
   • En fonction du style de votre marque, sélectionnez le type de préchargeur qui correspond le mieux à vos besoins.
   • Exemple: Pour un site de commerce électronique comme https://shopdemo.comUne barre de progression permet de tenir les utilisateurs informés.
3. Pour Préchargeur personnaliséSi vous souhaitez une animation propre à votre marque, téléchargez un GIF ou un SVG de votre logo.
   • Cliquez sur Télécharger pour ajouter votre animation de préchargement personnalisée.

Un GIF personnalisé du logo de votre marque peut être un excellent moyen de laisser une impression sur vos visiteurs. Vous pouvez utiliser des outils tels que Canva ou Figma pour créer des animations de logo simples.

• Conseil: Veillez à ce que votre animation personnalisée soit légère afin de ne pas ralentir le processus de chargement. Visez une taille de fichier d'animation inférieure à 200KB pour une performance optimale.

Étape 5 : Ajustement de la conception et du calendrier

• Couleur de fond: Définissez la couleur d'arrière-plan en fonction de la palette de votre marque. Vous pouvez utiliser une couleur qui contraste avec votre logo pour le faire ressortir.
  • Instructions: Cliquez sur le sélecteur de couleurs dans la fenêtre Couleur de fond et choisissez une couleur qui complète le thème de votre site web.
• Durée de l'animation: Définissez la durée pendant laquelle l'animation doit être jouée. En général, il est préférable de la maintenir en dessous de 3 secondes est le meilleur moyen de retenir l'attention de l'utilisateur sans qu'il se sente frustré.
  • Conseil: Testez différentes durées pour trouver le point idéal où le préchargeur ne semble ni trop rapide ni trop lent.
• Entrée/sortie en fondu de la page: Utilisez des effets de fondu en entrée et en sortie pour assurer une transition plus douce entre le préchargeur et le contenu proprement dit.
  • Conseil: Un léger effet de fondu peut rendre la transition plus soignée et moins abrupte.

Intégrer Preloader avec Elementor pour un meilleur contrôle

Si vous voulez un contrôle plus granulaire sur l'endroit et le moment où votre préchargeur apparaît, vous pouvez intégrer Preloader Plus avec Elementor en utilisant CSS personnalisé d'Elementor caractéristiques.

• Dans Elementor, modifier la page à l'endroit où vous souhaitez ajouter le préchargeur.
  • Naviguez jusqu'à la page que vous souhaitez modifier et cliquez sur Modifier avec Elementor.
• Ouvrez le Avancé et faites défiler vers le bas jusqu'à CSS personnalisé.
  • Cliquez sur le bouton Avancé dans le panneau de gauche, puis faites défiler l'écran jusqu'à ce que vous trouviez l'onglet CSS personnalisé domaine.
• Ajoutez du code CSS pour créer des animations de préchargement pour des sections spécifiques de la page. Par exemple, vous pouvez ajouter un code CSS pour créer des animations de préchargement pour des sections spécifiques de la page :

/* CSS personnalisé pour le préchargeur */
.preloader-section {
  animation : fadeIn 2s ease-in-out ;
}

@keyframes fadeIn {
  0% { opacity : 0 ; }
  100% { opacity : 1 ; }
}

• Conseil: Utilisez cette fonction pour ajouter des préchargeurs uniquement aux sections critiques qui prennent plus de temps à charger, telles que les galeries d'images ou les vidéos intégrées. Cela permet au reste de la page de rester rapide et réactif.

Test et optimisation de votre préchargeur

Maintenant que vous avez mis en place votre préchargeur, il est important de le tester. Voici quelques conseils :

• Vérifier sur différents appareils: Utilisez des outils tels que BrowserStack pour voir comment se présente votre préchargeur sur les mobiles, les tablettes et les ordinateurs de bureau. Veillez à ce qu'il offre une expérience cohérente sur tous les appareils.
  • Instructions: Ouvrez BrowserStack, sélectionnez les appareils sur lesquels vous souhaitez effectuer des tests et accédez à votre site web.
• Vitesse de chargement du moniteur: N'oubliez pas qu'un préchargeur doit améliorer l'expérience sans ralentir votre page de manière significative. Utilisez des outils tels que GTmetrix ou Google PageSpeed Insights pour vous assurer que la vitesse de chargement de votre site est optimisée.
  • Conseil: Si votre préchargeur affecte négativement les temps de chargement, envisagez d'optimiser la taille du fichier d'animation ou de limiter l'utilisation des préchargeurs à des pages spécifiques.
• Évitez la surutilisation: Les animations de préchargement sont efficaces, mais leur utilisation excessive sur chaque page peut frustrer les visiteurs. Utilisez-les de manière stratégique, notamment sur les pages plus lourdes qui nécessitent un temps de chargement plus long.
  • Conseil: Testez le comportement des utilisateurs avec et sans préchargeurs sur des pages spécifiques à l'aide d'outils tels que Hotjar pour voir si les préchargeurs améliorent ou entravent l'expérience de l'utilisateur.

Dernières réflexions : Faire en sorte que votre site Web Elementor se démarque

Un préchargeur bien conçu est plus qu'un simple écran de chargement : c'est un puissant outil de stratégie de marque et d'amélioration de l'expérience utilisateur. Pour faire passer votre site Elementor au niveau supérieur, ne vous contentez pas d'ajouter un préchargeur. Optimisez en permanence les performances de votre site et réfléchissez à la manière dont chaque interaction - des préchargeurs aux animations de page - contribue à l'histoire de votre marque.

Avec ces étapes et ces conseils, vous avez maintenant tout ce qu'il faut pour créer un préchargeur personnalisé qui non seulement maintient l'attention des visiteurs, mais renforce également l'identité de votre marque.