fbpx

Des animations Lottie sur votre site WordPress Divi

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 également intéressé par ces articles …

        Tutoriel Divi : Inverser les colonnes selon la vue

        Tutoriel Divi : Inverser les colonnes selon la vue

        En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
        On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

        lire plus
        10 extensions Chrome pour améliorer la productivité

        10 extensions Chrome pour améliorer la productivité

        Dans cette vidéo, je vous présente 10 extensions pour le navigateur Chrome afin d’améliorer votre confort, votre rapidité et donc votre productivité lorsque vous surfez sur Internet. Il existe ne nombreuses extensions Chrome, et il peut être difficile de trouver celles qui vont réellement améliorer votre productivité.

        lire plus
        Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

        Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

        Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

        lire plus
        Offrez-moi un café! Merci :)