Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Comment créer un préchargeur sur WordPress à l'aide d'Elementor

Muneeb Tutoriels WordPress Nov 22, 2021

Un préchargeur, également appelé chargeur, est une animation ou un GIF simple ou complexe qui continue de s'exécuter sur la page pendant le chargement de l'autre contenu de la page.

Il est très important de divertir vos utilisateurs pendant le court laps de temps que prend votre site Web pour charger le contenu. Cela permet non seulement de fidéliser un grand nombre d'utilisateurs, mais permet également de créer une présence durable dans l'esprit des utilisateurs. Dans ce tutoriel, nous allons comprendre comment créer des Preloaders à l'aide d' Elementor .

Comment créer un préchargeur à l'aide d'Elementor

Elementor regorge d'options qui vous permettent de représenter votre site Web à un niveau complètement distinct. De même, il vous permet également de créer des préchargeurs à l'aide desquels vous pouvez attraper les utilisateurs qui rebondissent rapidement sur votre site Web.

Pour commencer, assurez-vous de créer des préchargeurs uniquement pour les pages qui ont réellement besoin de quelques instants pour charger le contenu et qui constituent un aspect important de votre site Web.

Télécharger Divi le meilleur thème WordPress

Le thème WordPress le plus populaire au monde et le constructeur ultime de la page WordPress

Télécharger divi

Une fois que vous avez décidé sur quelle page vous allez placer le préchargeur, trouvez un SVG ou un GIF qui convient à votre site Web et à cette page en particulier. Icons8 est une source très connue pour l'animation des préchargeurs.

Si vous ne savez pas comment importer des fichiers au format SVG sur Elementor, allez-y et consultez notre tutoriel .

Ensuite, il existe deux façons d'utiliser les préchargeurs sur votre site Web, soit en l'utilisant pour une page particulière, soit en l'utilisant pour l'ensemble du site Web.

  • Si vous souhaitez utiliser le préchargeur pour l'ensemble du site Web, créez une nouvelle section dans le modèle d' en- tête .
  • Si vous souhaitez utiliser le préchargeur pour une page particulière, créez une nouvelle section en haut de la page .

Dans ces deux cas, assurez-vous de modifier les paramètres de la section sur No Gap .

Au total, lorsque vous avez terminé avec les paramètres, accédez à l' onglet Éléments à gauche de votre écran et choisissez HTML .

Dans le champ HTML, ajoutez le code suivant en vous assurant de modifier l' URL du préchargeur par la vôtre.

>div class="loader" /divscript/scriptstyle/style

Le codage a une explication de commentaire permettant aux débutants d'apporter des modifications en cas de besoin.

Enfin, allez-y et publiez votre Preloader et vérifiez s'il fonctionne parfaitement. C'est ainsi que vous pouvez créer un préchargeur avec Elementor sur votre site WordPress.

Nous espérons que ce didacticiel vous aidera à fidéliser les utilisateurs de votre site Web et à lui donner un aspect beaucoup plus professionnel. C'est tout de nous pour ce tutoriel. Assurez-vous de nous rejoindre sur Twitter et Facebook pour rester à jour sur notre contenu.