fbpx

Découvrez les bons plans & les réductions Alpa14 ?

Des animations Lottie sur votre site WordPress Divi

Catégories

Des animations Lottie pour améliorer l’engagement

Les Lotties, vous connaissez ? Ce sont de petites animations très fluides et esthétiques créées par des designer professionnels qui sont pour la plupart gratuites à télécharger et à utiliser. Un des principaux intérêts d’un Lottie, c’est que c’est un fichier très léger à charger, 600% fois plus petit que la même animation sous format Gif. De plus quand le Lottie est une animation vectorielle qui ne pixellisera jamais si vous l’agrandissez. Et enfin, insérer des Lotties sur votre site web (sans en abuser) améliorera sans doute l’engagement de vos visiteurs.
Pour placer et paramétrer facilement des animations Lottie sur un site WordPress Divi, je vous propose d’utiliser Divi Supreme Lite le plugin gratuit pour Divi qui enrichira le Divi Visual Builder du module Divi Supreme Lottie.

Licence Divi
Code Promo Divi Supreme
.

Des animations Lottie gratuites

    Les animations Lottie ont de vrais avantages, non seulement elles sont pour la plupart très design mais en plus très légères à charger, ce qui en fait un vrai atout pour les performances d’un site web.

    Télécharger des  Lotties

    Pour télécharger des Lotties, rien de plus simple. Rendez-vous sur le site lottiefiles.com et
    créez un compte (c’est gratuit) puis dans le menu Discovers > Free Animations, vous avez accès à une galerie de plusieurs centaines de Lotties. Choisissez une de ces animations, cliquez dessus et en haut du pop-up, choisir « Download » et choisissez le fichier « Lottie JSON ».

    Lottie files

    Divi Supreme Lite, un plugin gratuit

      Pour placer et paramétrer facilement un Lottie sur un site WordPress Divi, je vous propose d’utiliser Divi Supreme l’excellent plugin pour Divi dans sa version gratuite (Divi Supreme Lite). Ce plugin ajoute de nombreux modules au Visual Builder et notamment le module Divi Supreme Lottie gratuit dans cette version de Divi Supreme.

      Si vous ne connaissez pas Divi Supreme, c’est un très bon plugin pour Divi qui lui ajoute dans sa version Pro, 49 nouveaux modules et 8 nouvelles extensions. Cette article de mon Blog présente Divi Supreme et les ajouts qu’il permet.

      Vous pouvez facilement ajouter le plugin Divi Supreme Lite via le menu WordPress « Extensions > Ajouter »

      Divi Supreme Lite
      Thinkific one month free

      Placer et paramétrer un Lottie sur votre site Divi

        Un fois Divi Supreme Lite installé, il suffit de vous rendre sur la page souhaitée et d’ajouter un module dans la rangée de votre choix. Les nouveaux modules disponibles de Divi Supreme Lite apparaissent dans la liste habituelle des modules Divi mais en fond bleu. Choisir « Supreme Lottie ».

        La fenêtre des paramètres s’ouvre.
        Tout d’abord dans l’onglet « Contenu », appeler votre fichier JSON téléchargé.
        Il apparaît aussitôt à l’emplacement choisi.
        Différentes options sont paramétrables à cet endroit.

        • Loop : Vous permet de faire jouer l’animation à l’infini en la répétant.
        • Delay : Permet d’ajouter un temps défini (en ms) avant que l’animation se déclenche.
        • Direction : Permet de jouer l’animation normalement ou en sens inverse.
        • Speed : Permet d’accélérer ou ralentir l’animation
        • Animate in Viewport : Le viewport est la fenêtre d’affichage, c’est la zone visible d’une page Web pour l’utilisateur.

          La fenêtre d’affichage varie en fonction du périphérique et sera plus petite sur un téléphone mobile que sur un écran d’ordinateur.
          Cette option permet de jouer sur cet affichage en pourcentage.

        A noter que la version Pro de Divi Supreme en plus d’apporter davantage de modules et d’extensions permet aussi un réglage plus fin du module Lottie en ajoutant l’option « Trigger » qui permet d’ajouter de l’interactivité au Lottie au survol de la souris, au clic ou au scroll en activant l’animation ou alors lorsque le curseur de la souris n’est pas sur l’animation.

        Une fois ce contenu et ces réglages choisis, il est possible dans l’onglet « Style » puis « Dimensionnement » de réduire la taille de l’animation et dans « Espacement » de jouer sur les marges pour positionner plus précisément l’animation dans la colonne de la rangée.

         

        hébergeur web Hostinger
        Paramétrage Lottie
        paramétrage Lottie 2
        Divi Supreme Pro
         LearnDash créer une formation sur un site WordPress
        Thinkific one month free

        Vous serez peut-être intéressé par les articles suivants :

        Divi Supreme : Galerie filtrable – Filterable Gallery

        Divi Supreme : Galerie filtrable – Filterable Gallery

        Filtrer une galerie d’images par catégories ? C’est possible grâce au module Filterable Gallery de Divi Supreme, l’excellent plugin pour le Visual Builder de Divi.
        Assignez les photos d’une galerie à certaines catégories et triez-les en 1 clic. Cette galerie photos filtrable c’est sûr, améliorera grandement le confort de navigation des visiteurs sur d’un site web WordPress Divi.

        lire plus
        Divi Supreme : les nouveautés du plugin Divi !

        Divi Supreme : les nouveautés du plugin Divi !

        De nouveaux modules pour le Divi Visual Builder d’Elegant Themes ? Oui, c’est possible ! Avec Divi Supreme poussez le design des pages de votre site WordPress Divi au maximum ! Avec Divi Supreme Pro ce n’est pas moins de 58 nouveaux modules et 8 nouvelles extensions que vous ajoutez à Divi.

        lire plus
        Divi Supreme : Content Timeline

        Divi Supreme : Content Timeline

        Divi Supreme Content Timeline : Une ligne de temps de contenu claire et engageante Dans ce tutoriel WordPress Divi, je vous présente le module Divi Supreme Content Timeline qui vous permet de créer facilement une chronologie de contenu pour...

        lire plus