Comment ajouter des animations Lottie dans WordPress (4 étapes simples)

L'utilisation d'animations Lottie dans WordPress peut être un excellent moyen d'embellir vos pages. Ils sont généralement légers et personnalisables, et peuvent donc vous aider à créer du contenu attrayant sans nuire à votre expérience utilisateur (UX). Cependant, vous recherchez peut-être un moyen sans stress de les ajouter à votre site.

Heureusement, le processus est plus facile que vous ne le pensez. En utilisant un plugin comme Otter Blocks, vous pouvez ajouter et personnaliser vos animations Lottie en quelques clics. Vous pourrez également définir des conditions de visibilité pour qu'ils jouent au bon moment.

Une introduction aux animations Lottie

Lottie est un format de fichier open source pour les animations Web. Il vous permet de créer des animations personnalisées pour votre marque et de les utiliser sur votre site Web :

Bien sûr, vous pouvez toujours opter pour des GIF, mais ces fichiers peuvent alourdir votre site. Les animations Lottie sont beaucoup plus petites que les GIF. Par conséquent, ils peuvent vous aider à rendre votre site plus intéressant tout en préservant votre UX et en offrant des temps de chargement rapides.

De plus, les animations Lottie sont livrées avec de nombreuses options de personnalisation. La bibliothèque elle-même est vaste et donne accès à des milliers d'éléments, de personnages et d'illustrations. Cependant, vous pouvez également échanger les couleurs, modifier les paramètres d'affichage et ajouter des conditions de visibilité.

Des animations personnalisées peuvent vous aider à impressionner vos visiteurs. De plus, ils peuvent donner à votre site un aspect frais et unique.

Comment ajouter des animations Lottie à WordPress (en 4 étapes)

Maintenant que vous en savez un peu plus sur Lottie Animations, voyons comment les ajouter à votre site WordPress :

Étape 1 : Installer et activer Otter Blocks

Il existe de nombreuses façons d'ajouter des animations Lottie dans WordPress. Par exemple, vous pouvez utiliser HTML et JavaScript. Cependant, cette méthode peut être assez complexe.

Alternativement, vous pouvez utiliser le plugin d'animations Lottie, bien que cela puisse ne pas être compatible avec tous les constructeurs de pages. De plus, il n'offre pas beaucoup d'options stylistiques.

Le moyen le plus simple d'ajouter Lottie Animations à votre site est d'utiliser un plugin comme Otter Blocks :

Ce plugin ajoute de nouveaux blocs de contenu et modèles à votre site, y compris un bloc pour les animations Lottie. Il étend également les fonctionnalités de l'éditeur de blocs avec des CSS personnalisés, des animations, des conditions de visibilité, etc. Par conséquent, cela vous aide à concevoir vos pages plus efficacement et réduit le besoin de constructeurs de pages.

Si vous effectuez une mise à niveau vers Otter Blocks Pro, vous aurez accès à des fonctionnalités avancées telles que des blocs WooCommerce spéciaux et des paramètres stylistiques supplémentaires. Cependant, vous n'avez pas besoin de la version Pro pour utiliser la fonction d'animation Lottie.

Si vous souhaitez utiliser la version gratuite, rendez-vous sur Plugins > Ajouter un nouveau dans votre tableau de bord WordPress et recherchez « Otter Blocks : »

Cliquez ensuite sur Installer > Activer . Vous devriez maintenant voir une sélection de nouveaux blocs dans l'éditeur de blocs.

Étape 2 : Choisissez une animation dans la bibliothèque Lottie

Maintenant que vous avez configuré Otter Blocks sur votre site Web, vous pouvez vous diriger vers la bibliothèque Lottie pour choisir une animation. Pour accéder aux dessins, vous devrez créer un compte gratuit.

Une fois votre profil créé, accédez à Découvrir et sélectionnez Animations gratuites prêtes à l'emploi :

Ici, vous pouvez parcourir une bibliothèque d'éléments Lottie pouvant être utilisés sur des sites Web, des applications et des médias sociaux :

Lorsque vous trouvez une animation que vous souhaitez utiliser, cliquez sur le design. Une fenêtre contextuelle apparaîtra dans laquelle vous pourrez apporter quelques modifications à l'apparence de l'animation :

Par exemple, vous pouvez ajuster la vitesse d'animation et changer la couleur d'arrière-plan. Si vous cliquez sur Modifier les couleurs du calque , vous serez redirigé vers l'éditeur Lottie :

Ici, vous pouvez personnaliser la couleur de n'importe quelle partie du design. Cliquez simplement sur une section de l'élément que vous souhaitez modifier, accédez à Toutes les couleurs et utilisez le sélecteur de couleurs pour appliquer une nouvelle tonalité :

Si vous apportez une modification que vous n'aimez pas, cliquez sur la flèche Annuler en haut à gauche de l'écran.

Étape 3 : Collez l'URL de l'animation Lottie dans votre bloc Otter ou téléchargez le fichier Lottie

Une fois que vous êtes satisfait de votre design, vous avez deux options pour l'ajouter à WordPress :

1. Vous pouvez copier l'URL de Lottie Animation pour ajouter la version du serveur de LottieFiles à votre site. Vous le trouverez dans la fenêtre contextuelle de votre animation, juste en dessous du design.
2. Vous pouvez télécharger le LottieFile fini sur votre ordinateur en cliquant sur le bouton Télécharger dans le coin supérieur droit et en sélectionnant le format dotLottie . Cela vous permettra d'héberger le fichier sur votre serveur.

Ensuite, retournez sur votre site WordPress et ouvrez la page ou la publication où vous souhaitez insérer votre animation.

Cliquez pour ajouter un nouveau bloc et recherchez "Lottie Animations :"

Ajoutez le bloc à votre page. Ensuite, choisissez l'une de ces options :

• Insérer à partir de l'URL - utilisez ceci si vous souhaitez entrer le lien vers le fichier Lottie sur les serveurs de LottieFiles. Tout ce que vous avez à faire est de coller le lien URL Lottie Animation que vous avez copié à partir du site Web LottieFiles.
• Télécharger - utilisez ceci si vous avez téléchargé le fichier dotLottie réel à partir de LottieFiles. Vous pouvez ensuite télécharger ce fichier sur votre site WordPress.

Ensuite, appuyez sur Entrée et l'animation apparaîtra sur la page :

Vous pouvez maintenant enregistrer vos modifications et passer à l'étape finale.

Étape 4 : Personnalisez votre animation avec Otter Blocks

Maintenant que vous avez ajouté vos animations Lottie dans WordPress, vous êtes prêt à personnaliser la conception et la mise en page. Dans les paramètres de bloc, vous verrez une sélection d'options d'affichage.

Sous TRIGGER , vous pouvez choisir entre la lecture automatique , le défilement , le survol ou le clic . L'animation ne sera pas lue tant que l'une de ces actions n'aura pas été effectuée sur la page :

Vous avez également la possibilité de basculer l'animation pour qu'elle soit lue en boucle. De plus, vous pouvez ajuster la vitesse de votre animation à l'aide du curseur, inverser la direction et modifier la largeur du dessin.

Si vous souhaitez modifier la couleur d'arrière-plan, cliquez sur l'onglet Arrière-plan . Ici, vous pouvez sélectionner l'une des options solides par défaut, utiliser le sélecteur de couleurs ou choisir un arrière-plan dégradé :

Si vous vous dirigez vers Conditions de visibilité , vous pourrez configurer votre animation pour qu'elle n'apparaisse que dans certaines circonstances :

Par exemple, vous pouvez souhaiter que le bloc soit visible uniquement pour les utilisateurs connectés ou qu'il soit affiché à une date spécifique. Pour ce faire, cliquez sur Ajouter un groupe de règles . Ensuite, sélectionnez la flèche pour ouvrir les paramètres :

Sous CONDITION , utilisez le menu déroulant pour configurer vos paramètres de visibilité. Vous pouvez ajouter plusieurs conditions et créer des groupes de règles supplémentaires.

Commencez avec les animations Lottie dans WordPress

Pour récapituler, voici quatre étapes pour ajouter des animations Lottie dans WordPress :

Pour encore plus de façons d'améliorer l'éditeur WordPress natif, vous pouvez consulter notre collection complète des meilleurs plugins de blocs WordPress.

Avez-vous des questions sur l'ajout de Lottie Animations dans WordPress ? Faites-nous savoir dans la section commentaires ci-dessous!