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

Des animations Lottie sur votre site WordPress Divi

Alpa14 les tutoriels faciles !

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 :

        Supreme Card Carousel : un carrousel pour Divi efficace

        Supreme Card Carousel : un carrousel pour Divi efficace

        Dans ce tutoriel, je vous guide étape par étape dans l’utilisation de ce module de Divi Supreme pour créer des carrousels attrayants et dynamiques sur votre site WordPress. Ce tutoriel est fait pour vous si vous souhaitez améliorer l’apparence et l’interaction de vos contenus!

        lire plus
        Ajouter une barre de progression animée à Divi.

        Ajouter une barre de progression animée à Divi.

        Dans ce tutoriel, je vous montre comment utiliser le module Progress Bar pour Divi grâce à l’un des modules de Divi Supreme Pro, l’excellent Plugin pour le thème Divi d’Elegant Themes. Ce module intitulé « Progress Bar » vous permettra de créer des barres de progression animées sur votre site WordPress. Le module Progress Bar est une fonctionnalité utile qui permet aux visiteurs de votre site de suivre leur progression sur une page en affichant leur progression en pourcentage.

        lire plus
        Thème Divi : Créer une bannière accordéon

        Thème Divi : Créer une bannière accordéon

        Dans ce tutoriel Divi, je vous montre comment créer une bannière accordéon très design pour votre site web en utilisant le module « Image Accordion » du plugin Divi Supreme Lite. Divi Supreme Lite est la version gratuite de l’excellent Divi Supreme Pro. Divi Supreme lite compte un 20aine de nouveaux modules pour Divi contre une 60aine pour Divi Supreme Pro.

        lire plus