Un guide complet pour créer des Preloaders professionnels avec Elementor Pro afin d'améliorer l'expérience de chargement des sites web

Lorsque vous construisez un site web avec Elementor, il est essentiel de créer une expérience visuelle fluide pour vos utilisateurs.préchargeurIl est possible d'afficher des animations de chargement avant que le contenu de la page ne soit entièrement chargé. Nous vous expliquons ci-dessous, étape par étape, comment l'option Elementor Pro Créer un préchargeur dans le fichier

Qu'est-ce qu'un préchargeur ?

Un préchargeur est généralement une image ou une animation qu'un site web affiche avant que le contenu ne soit entièrement chargé. Les préchargeurs permettent d'afficher des logos de marque ou des animations spécifiques afin d'offrir aux utilisateurs une expérience de navigation plus professionnelle et plus fluide.

Étape 1 : Créer un modèle de titre

Tout d'abord, il est nécessaire deCréer un modèle de titreafin d'appliquer le préchargeur à toutes les pages du site.
Procédure d'exploitation :

1. Naviguez jusqu'au tableau de bord Elementor dans la section modèle > Générateur de thèmes.

2. frappe (sur le clavier) légende puis cliquez sur le bouton + pour créer un nouveau modèle de titre.

3. Une fois la configuration du modèle terminée, cliquez sur poste et appliquer les conditions d'affichage.

Le système affiche Conditions d'affichage Fenêtre. Sélectionnez ici la plage de pages à laquelle vous souhaitez appliquer ce modèle d'en-tête. Sélectionnez l'option Tout le site web fera en sorte que ce titre soit affiché sur toutes les pages. Confirmez la sélection et cliquez sur Enregistrer et fermer pour compléter la libération.

Étape 2 : Ajouter le conteneur et définir l'ID CSS

Dans le modèle de titre, ajoutez un conteneur pour contenir l'animation préchargée.
Procédure d'exploitation :

1. Sur la page d'édition du modèle de titre, ajoutez un élémentconteneur à colonne unique.

2. Cliquez sur le boutonniveau élevéDans l'onglet CSS, définissez l'ID CSS comme suit der_preload.

Étape 3 : Ajouter une icône ou une image de widget

Ajouter des effets visuels au préchargeur, tels que des icônes ou des logos de marque.
Procédure d'exploitation :

1. Dans le conteneur, ajoutez le icône (informatique) peut-être imagerie Widget.

2. Dans le champniveau élevéDans le menu, définissez l'ID CSS comme suit der_loader.

3. entrer danstyperedimensionnez l'icône (le réglage recommandé est 1) pour qu'elle corresponde à vos besoins en matière de conception.

Étape 4 : Ajouter un widget HTML pour exécuter des scripts

Ensuite, ajoutez le widget HTML et insérez le code JavaScript pour contrôler l'affichage et le masquage du préchargeur.
Procédure d'exploitation :

1. Ajouter sous l'icône ou le widget d'image HTML Widget.

2. Insérer le code suivant :

.
.
.

3. Dans la sectionniveau élevéL'option CSS permet de définir l'ID CSS comme suit der_preloader_addsafin de masquer le widget et d'éviter les espaces blancs inutiles.

Étape 5 : Ajouter un CSS personnalisé

Pour que le préchargeur fonctionne, ajoutez un peu de code CSS pour améliorer l'effet de préchargement.

1. Cliquez sur l'icône de mise en page pour ouvrir la fenêtreniveau élevéLe menu.

2. Collez le code suivant dans le champ Custom CSS :

<code>#der_preload { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : #fff ; display : flex ; align-items. centre ; justify-content : centre ; z-index : 1000 ; } #der_loader { border : 8px solid #363636 ; border-top : 8px solid #3498db ; border- radius : 50% ; width : 50px ; height : 50px ; animation : spin 1s linear infinite ; } @keyframes spin { 0% { transform : rotate(0deg) ; } 100% { transform : rotate(360deg) ; } } #der_preloader_adds { display : none ; }</code>
<code>#der_preload { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : #fff ; display : flex ; align-items. centre ; justify-content : centre ; z-index : 1000 ; } #der_loader { border : 8px solid #363636 ; border-top : 8px solid #3498db ; border- radius : 50% ; width : 50px ; height : 50px ; animation : spin 1s linear infinite ; } @keyframes spin { 0% { transform : rotate(0deg) ; } 100% { transform : rotate(360deg) ; } } #der_preloader_adds { display : none ; }</code>
#der_preload { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : #fff ; display : flex ; align-items. centre ; justify-content : centre ; z-index : 1000 ; } #der_loader { border : 8px solid #363636 ; border-top : 8px solid #3498db ; border- radius : 50% ; width : 50px ; height : 50px ; animation : spin 1s linear infinite ; } @keyframes spin { 0% { transform : rotate(0deg) ; } 100% { transform : rotate(360deg) ; } } #der_preloader_adds { display : none ; }
#der_preload { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : #fff ; display : flex ; align-items. centre ; justify-content : centre ; z-index : 1000 ; } #der_loader { border : 8px solid #363636 ; border-top : 8px solid #3498db ; border- radius : 50% ; width : 50px ; height : 50px ; animation : spin 1s linear infinite ; } @keyframes spin { 0% { transform : rotate(0deg) ; } 100% { transform : rotate(360deg) ; } } #der_preloader_adds { display : none ; }
#der_preload { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : #fff ; display : flex ; align-items. centre ; justify-content : centre ; z-index : 1000 ; } #der_loader { border : 8px solid #363636 ; border-top : 8px solid #3498db ; border- radius : 50% ; width : 50px ; height : 50px ; animation : spin 1s linear infinite ; } @keyframes spin { 0% { transform : rotate(0deg) ; } 100% { transform : rotate(360deg) ; } } #der_preloader_adds { display : none ; }

Étape 6 : Publier et tester le préchargeur

Publiez votre modèle etRéglage des conditions d'affichagepour s'assurer que le préchargeur s'affiche correctement sur la page spécifiée.
Procédure d'exploitation :

1. frappe (sur le clavier) posteDans la fenêtre contextuelle Conditions d'affichage, sélectionnez Tout le site web.

2. Enregistrez les paramètres et visitez la page de votre site web pour vérifier si le préchargeur fonctionne comme prévu.

résumés

Avec les étapes ci-dessus, vous avez réussi à créer un préchargeur Elementor Pro personnalisé. Le préchargeur peut être encore plus personnalisé en modifiant le code CSS et JavaScript pour l'aligner sur le style de votre marque.