Tout ce que vous devez savoir sur le module Lottie de Divi 5

Le module Lottie de Divi 5 apporte des animations dynamiques et légères à vos pages, ce qui rend vos pages plus attrayantes et interactives. Les bons visuels sont essentiels pour attirer l'attention et garder les visiteurs engagés. Avec le module Lottie, Divi 5 vous permet d'ajouter des animations d'apparence professionnelle qui sont également adaptées aux performances.

Dans cet article, nous expliquerons tout ce que vous devez savoir sur le module Lottie, y compris ses fonctionnalités, son processus de configuration, ses options de personnalisation et les moyens de l'utiliser. Sautons!

Que sont les fichiers Lottie?

Les animations Lottie sont des graphiques légers basés sur JSON qui rendent les vecteurs évolutifs. Ils livrent des visuels évolutifs sans les tailles de fichiers lourdes de vidéos ou de GIF. Grâce à sa capacité à combiner les performances et la flexibilité, Lottie a gagné en popularité, ce qui le rend populaire pour la conception Web moderne. Contrairement aux animations traditionnelles, les fichiers Lottie utilisent des données JSON basées sur des vecteurs, garantissant des visuels nets et la lecture fluide sur tous les appareils et tailles d'écran.

Abonnez-vous à notre chaîne YouTube

Dans Divi 5, le module Lottie intègre de manière transparente ces animations dans le constructeur visuel, permettant aux utilisateurs d'ajouter des touches dynamiques et modernes à leurs sites Web Divi en quelques clics. Que ce soit en mettant en évidence un CTA ou en ajoutant un flair à une section de héros, le module Lottie rend l'incorporation d'animations sans codage complexe sans effort.

Avec le module Lottie, Divi 5 transforme la façon dont vous apportez un mouvement à vos conceptions Web, ce qui les rend captivants et efficaces.

Caractéristiques clés

Le module Lottie dans Divi 5 est un outil polyvalent rempli de capacités qui facilitent la création de animations dynamiques et optimisées. Il offre un contrôle sur le comportement d'animation, vous permettant de modifier la vitesse, la direction, les déclencheurs, etc. Jetons un coup d'œil à certaines de ses caractéristiques clés.

Facilité d'utilisation

Le module Lottie en Divi 5 est conçu avec une simplicité à l'esprit, ce qui le rend adapté aux débutants et accessible aux utilisateurs de tous niveaux de compétence. Vous n'avez pas besoin d'être un expert en codage pour ajouter des animations professionnelles et accrocheuses à votre site Web Divi.

Grâce au nombre de ressources disponibles en ligne, l'approvisionnement en animations est facile. Des plates-formes comme Lottiefiles et Lordicon offrent de vastes bibliothèques d'animations Lottie gratuites et premium, allant des icônes de chargement subtiles aux graphiques dynamiques.

Pour ceux qui recherchent une touche unique, vous pouvez créer des animations personnalisées à l'aide d'outils comme Adobe After Effects avec le plugin BodyMovin. Ce plugin exporte des animations en tant que fichiers JSON compatibles avec le module Lottie. Que vous choisissiez des animations pré-faites ou personnalisées, le processus est simple.

Options de personnalisation

Le module Lottie dans Divi 5 propose des options de personnalisation, vous donnant un contrôle sur plusieurs aspects du fichier Lottie. Pour les expériences interactives, utilisez l'animation de déclenchement pour choisir quand activer l'animation, par exemple sur la charge, lorsque l'élément entre dans la fenêtre, oscillant, cliquez ou par défile. Vous pouvez activer l'animation de boucle pour permettre un mouvement continu sur votre fichier Lottie, ajuster la vitesse d'animation , sélectionner la direction (vers l'avant ou vers l'arrière) et choisir entre normal ou rebondir dans le champ Mode de lecture .

Téléchargement des animations JSON

L'ajout d'animations Lottie à Divi 5 nécessite le téléchargement de fichiers JSON, le format standard pour les fichiers Lottie. Cependant, WordPress ne prend pas en charge nativement les téléchargements JSON dans sa bibliothèque de médias, vous devrez donc prendre des mesures supplémentaires pour vous assurer que vous pouvez les télécharger.

La première option consiste à créer un thème enfant et à ajouter un extrait PHP au fichier functions.php de votre thème enfant. Cette méthode est légère et garantit une gestion sécurisée de vos fichiers d'animation. Alternativement, vous pouvez utiliser un plugin comme des types de téléchargement de fichiers pour permettre aux téléchargements JSON sans toucher aucun code, ce qui le rend idéal pour les utilisateurs qui préfèrent une solution de plug-and-play. Pour un guide étape par étape pour implémenter l'une ou l'autre méthode, consultez notre article d'assistance, qui vous guide tout au long du processus pour configurer votre site Web Divi 5 pour les téléchargements JSON.

Comment utiliser le module Lottie dans Divi 5

L'ajout d'une animation Lottie dans Divi 5 est simple. Créez ou téléchargez une animation Lottie à partir d'une source comme Lottiefiles ou Lordicon. Trouvez et cliquez sur le module Lottie dans le constructeur visuel pour l'ajouter à votre page.

Téléchargez le fichier JSON ou localisez-le dans votre galerie de médias WordPress.

Choisissez l' animation de déclenchement . Vous pouvez le définir sur animer sur le chargement, la visualisation, le volonté, le clic ou le défilement pour animer.

Si vous souhaitez que votre animation Lottie ait un élément interactif, utilisez le défilement du module pour animer le déclencheur.

L'utilisation de ce déclencheur offre un excellent moyen de créer des expériences utilisateur dynamiques et engageantes. Au lieu d'utiliser l'animation lorsque la page se charge, faites défiler pour animer les liens de l'animation directement vers le comportement de défilement de l'utilisateur. Au fur et à mesure que l'utilisateur fait défiler la page, l'animation progresse catégorique par image. Cela fait de l'animation un élément interactif qui rend l'expérience plus dynamique.

Si vous souhaitez que l'animation boucle sans cesse, activez la bascule de l'animation en boucle. Vous pouvez également définir la vitesse d'animation , contrôler la direction ( vers l'avant ou vers l'arrière ) et sélectionner le mode normal ou rebond pour le mode de lecture .

Dans l' onglet Design , vous pouvez contrôler le dimensionnement, l'alignement, la hauteur, l'espacement, etc.

Bien que vous ne puissiez pas modifier les couleurs de vos fichiers Lottie dans Divi 5, la plupart des sites Web de Lottie vous permettent de choisir des couleurs spécifiques et des largeurs de caresse avant de les télécharger.

Comme vous pouvez le voir, l'ajout d'un fichier Lottie à votre site Web Divi 5 prend des secondes et ajoute un peu de flair à vos pages Web sans se soucier des performances.

Exemples pratiques utilisant le module Lottie

Le module Lottie dans Divi 5 propose une large gamme d'applications, ajoutant un flair aux sites Web avec des animations dynamiques. De l'amélioration des pages de contact aux sections de héros accrocheuses, sa flexibilité convient à tous les types de conceptions.

Avec ses options d'intégration et de personnalisation transparentes, les utilisateurs de Divi peuvent créer des expériences engageantes et conviviales sur l'ensemble de leur site Web.

Pages de contact

L'ajout d'animations Lottie peut rendre vos pages de contact plus attrayantes. Par exemple, placez les modules Lottie en boucle à côté des heures d'ouverture, des numéros de téléphone et d'autres coordonnées pour créer une expérience interactive et accueillante qui augmente les conversions sans ralentir votre site.

404 pages

Transformez les erreurs 404 frustrantes en moments mémorables avec des animations de lottie ludiques. Ajoutez une icône de recherche en boussole ou animée à votre page 404, associée à un court message.

Utilisez le paramètre d'animation de boucle pour garder le mouvement continu et déclenchez-le sur charge pour attirer instantanément l'attention. Cela fait que la page 404 ressemble moins à une impasse et plus comme un point de contact créatif.

Produits en vedette

Présentez vos produits ou catégories WOO préférés avec des animations Lottie pour mettre en évidence les produits en vente. Par exemple, placez une animation de badge Lottie à côté d'un produit en vedette pour le mettre en évidence.

Tout d'abord, définissez l'animation pour déclencher sur charge. Ensuite, il s'active à mesure que les utilisateurs parcourent, tirant leurs yeux sur les produits et stimulant l'attrait visuel.

Sections de services

Donnez vie à votre section Services avec des animations Lottie qui représentent visuellement vos offres. Par exemple, utilisez des animations en boucle pour votre agence de marketing, en ajustant la vitesse pour correspondre au ton.

De plus, définissez le déclencheur de vue pour activer les animations à mesure que les utilisateurs explorent, assurant une présentation professionnelle dynamique.

Sections de héros

Rendez vos sections de héros inoubliables avec des animations de lottie audacieuses qui donnent le ton à votre site Web. Tout d'abord, ajoutez une animation d'arrière-plan fluide à l'aide du module Lottie de Divi. Ensuite, placez-le derrière les lignes et les modules avec les paramètres de position de Divi.

Par exemple, une animation moderne ou un effet de particules subtil peut ajouter de la profondeur à votre site avec peu d'effort. Utilisez le déclencheur en chargement pour un impact immédiat et ajustez le mode de jeu pour rebondir pour un effet captivant.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Conclusion

Dans Divi 5, le module Lottie simplifie l'ajout d'animations légères et dynamiques aux sites Web. Intégré de manière transparente dans le constructeur visuel, il permet des animations professionnelles avec un minimum d'effort. Les commandes flexibles, la personnalisation étendue et les plates-formes de fichiers Lottie gratuites facilitent l'amélioration de votre site.

Prêt à essayer le module Lottie? Partagez vos pensées ou créations dans les commentaires ou sur les réseaux sociaux.