fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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 …

        Créer un pop-up sur un site Divi

        Créer un pop-up sur un site Divi

        Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

        lire plus
        Formation WordPress éligible au CPF : Webmyday

        Formation WordPress éligible au CPF : Webmyday

        Vous souhaitez créer un site Internet WordPress pour votre entreprise ? Vous êtes complètement débutant ? Dans ce tutoriel vidéo, je vous présente Webmyday la formation WordPress Divi qui va vous permettre de réaliser facilement votre site web en étant accompagné d’un coach sympa pendant 2 mois. 😊

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