{"id":369180,"date":"2022-03-29T21:33:05","date_gmt":"2022-03-29T21:33:05","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=369180"},"modified":"2022-03-30T00:16:17","modified_gmt":"2022-03-30T00:16:17","slug":"comment-ajouter-des-icones-animees-par-defilement-aux-arriere-plans-des-sections-dans-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-ajouter-des-icones-animees-par-defilement-aux-arriere-plans-des-sections-dans-divi\/","title":{"rendered":"Comment ajouter des ic\u00f4nes anim\u00e9es par d\u00e9filement aux arri\u00e8re-plans des sections dans Divi"},"content":{"rendered":"\n
Divi-Scroll-Animated-Icons-Section-Backgrounds-Layout.json_<\/a>Download<\/a><\/div>\n\n\n
La combinaison d’une animation de d\u00e9filement et d’ic\u00f4nes peut rehausser le design de votre site Web de mani\u00e8re unique. Dans ce tutoriel, nous allons explorer comment ajouter des ic\u00f4nes anim\u00e9es par d\u00e9filement aux arri\u00e8re-plans de section dans Divi. Avec des centaines d’ic\u00f4nes parmi lesquelles choisir et de nombreux effets d’animation int\u00e9gr\u00e9s disponibles dans Divi, nous allons vous montrer comment cr\u00e9er d’innombrables animations d’arri\u00e8re-plan pour amener nos conceptions \u00e0 un tout autre niveau.

<\/p>\n

C’est parti !<\/p>\n

Coup d’\u0153il rapide<\/h2>\n

Voici un aper\u00e7u du design que nous allons cr\u00e9er dans ce tutoriel.<\/p>\n

Ce dont vous avez besoin pour commencer<\/h2>\n

\"expanding<\/p>\n

Pour commencer, vous devez effectuer les op\u00e9rations suivantes :<\/p>\n

    \n
  1. Si vous ne l’avez pas encore fait, installez et activez le th\u00e8me Divi.<\/li>\n
  2. Cr\u00e9ez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).<\/li>\n
  3. Choisissez l’option \u00ab\u00a0Build From Scratch\u00a0\u00bb.<\/li>\n<\/ol>\n

    Apr\u00e8s cela, vous aurez une toile vierge pour commencer \u00e0 concevoir dans Divi.<\/p>\n

    Comment ajouter des ic\u00f4nes anim\u00e9es par d\u00e9filement aux arri\u00e8re-plans de section dans Divi<\/h2>\n

    Le concept cl\u00e9 bri\u00e8vement expliqu\u00e9<\/h3>\n

    Le processus d’ajout d’ic\u00f4nes anim\u00e9es par d\u00e9filement aux arri\u00e8re-plans de section comporte 4 \u00e9l\u00e9ments cl\u00e9s.<\/p>\n

    1 : Cr\u00e9ation d’un canevas plein \u00e9cran<\/h5>\n

    Tout d’abord, nous devons cr\u00e9er un canevas plein \u00e9cran en personnalisant une section, une ligne et une colonne de mani\u00e8re \u00e0 ce que chacune d’entre elles s’\u00e9tende sur toute la largeur et la hauteur du navigateur. Cela nous donnera une sorte d’espace cr\u00e9atif sans entrave que nous devons remplir d’ic\u00f4nes.<\/p>\n

    \"divi<\/p>\n

    2 : Ajouter et positionner les ic\u00f4nes<\/h5>\n

    Nous pouvons maintenant placer les ic\u00f4nes de mani\u00e8re strat\u00e9gique dans le canevas (ou la colonne) plein \u00e9cran pour cr\u00e9er notre arri\u00e8re-plan d’ic\u00f4nes anim\u00e9es par d\u00e9filement.<\/p>\n

    \"divi<\/p>\n

    3 : Ajout de l’animation de d\u00e9filement aux ic\u00f4nes<\/h5>\n

    Une fois les ic\u00f4nes en place, nous pouvons ajouter nos effets de transformation (ou animation) de d\u00e9filement \u00e0 chacune d’entre elles.<\/p>\n

    \"\"<\/p>\n

    4 : Ajout de contenu \u00e0 l’avant de la section<\/h5>\n

    Une fois la conception de l’arri\u00e8re-plan termin\u00e9e avec les ic\u00f4nes anim\u00e9es par un d\u00e9filement, nous pouvons ajouter le contenu dont nous avons besoin \u00e0 la vitrine situ\u00e9e \u00e0 l’avant-plan.<\/p>\n

    \"\"<\/p>\n

    Maintenant que nous avons une id\u00e9e de ce qu’il faut faire, plongeons-y !<\/p>\n

    Partie 1 : Cr\u00e9ation du canevas plein \u00e9cran (configuration de la section, de la rang\u00e9e et de la colonne)<\/h3>\n

    Commen\u00e7ons par ajouter une rang\u00e9e d’une colonne \u00e0 la section normale.<\/p>\n

    \"divi<\/p>\n

    Param\u00e8tres de la section<\/h4>\n

    Ouvrez les param\u00e8tres de la section et ajoutez une couleur de fond comme suit :<\/p>\n

      \n
    • Couleur de fond : #000<\/li>\n<\/ul>\n

      \"divi<\/p>\n

      Dans l’onglet Conception, ajoutez une hauteur minimale de 100vh pour vous assurer que la section s’\u00e9tend sur toute la hauteur de la fen\u00eatre d’affichage.<\/p>\n

        \n
      • Hauteur minimale : 100vh (ordinateur de bureau), 600px (tablette et t\u00e9l\u00e9phone)<\/li>\n<\/ul>\n

        \"divi<\/p>\n

        Param\u00e8tres des rang\u00e9es<\/h4>\n

        Ensuite, ouvrez les param\u00e8tres de la rang\u00e9e et mettez \u00e0 jour la taille pour qu’elle couvre \u00e9galement toute la largeur et la hauteur de la section\/port\u00e9e d’affichage.<\/p>\n

          \n
        • Utiliser une largeur de goutti\u00e8re personnalis\u00e9e : OUI<\/li>\n
        • Largeur de la goutti\u00e8re : 1<\/li>\n
        • Largeur : 100<\/li>\n
        • Largeur maximale : 100<\/li>\n
        • Hauteur : 100<\/li>\n
        • Rembourrage : 0px haut, 0px bas<\/li>\n<\/ul>\n

          \"divi<\/p>\n

          Sous l’onglet avanc\u00e9, donnez \u00e0 la rang\u00e9e une position absolue.<\/p>\n

            \n
          • Position : Absolue<\/li>\n<\/ul>\n

            \"divi<\/p>\n

            Hauteur de la colonne<\/h4>\n

            Maintenant que notre section et notre ligne sont en place, il est important de donner \u00e0 la colonne une hauteur minimale de 100 % afin qu’elle s’\u00e9tende \u00e9galement sur toute la largeur et la hauteur de la section\/port\u00e9e d’affichage.<\/p>\n

            \"divi<\/p>\n

            \u00c0 ce stade, nous avons essentiellement cr\u00e9\u00e9 un canevas plein \u00e9cran qui nous permet de remplir la colonne d’ic\u00f4nes.<\/p>\n

            \"divi<\/p>\n

            Partie 2 : Cr\u00e9er et positionner les ic\u00f4nes dans la colonne<\/h3>\n

            Nous sommes maintenant pr\u00eats \u00e0 cr\u00e9er et \u00e0 positionner les ic\u00f4nes dans la colonne. L’id\u00e9e est de placer strat\u00e9giquement l’ic\u00f4ne dans cette colonne plein \u00e9cran pour construire notre arri\u00e8re-plan d’ic\u00f4nes anim\u00e9es par d\u00e9filement.<\/p>\n

            \"divi<\/p>\n

            Cr\u00e9ation et positionnement de l’ic\u00f4ne 1<\/h4>\n

            Nous allons commencer par cr\u00e9er notre premi\u00e8re ic\u00f4ne, puis la positionner \u00e0 l’aide de Divi Builder.<\/p>\n

            Ajoutez un module Ic\u00f4ne \u00e0 la colonne.<\/p>\n

            \"divi<\/p>\n

            Ouvrez les param\u00e8tres des ic\u00f4nes et choisissez une ic\u00f4ne dans le s\u00e9lecteur d’ic\u00f4nes.<\/p>\n

            \"divi<\/p>\n

            Sous l’onglet \u00ab\u00a0Design\u00a0\u00bb, mettez \u00e0 jour la couleur et la taille de l’ic\u00f4ne comme suit :<\/p>\n

              \n
            • Couleur de l’ic\u00f4ne : #fff<\/li>\n
            • Taille de l’ic\u00f4ne : 3vw (bureau), 40px (tablette), 30px (t\u00e9l\u00e9phone)<\/li>\n<\/ul>\n

              \"divi<\/p>\n

              Sous l’onglet Avanc\u00e9, mettez \u00e0 jour la position et les d\u00e9calages comme suit :<\/p>\n

                \n
              • Position : Absolue<\/li>\n
              • Emplacement : En bas \u00e0 gauche<\/li>\n
              • D\u00e9calage vertical : 10<\/li>\n
              • D\u00e9calage horizontal : 10<\/li>\n<\/ul>\n

                REMARQUE : gardez \u00e0 l’esprit que l’unit\u00e9 de longueur en pourcentage est ici relative aux propri\u00e9t\u00e9s CSS du bas et de la gauche. Dans ce cas, un d\u00e9calage vertical de 10 % est \u00e9quivalent \u00e0 \u00ab\u00a0bottom : 10%\u00a0\u00bb en CSS et un d\u00e9calage horizontal \u00e9quivaut \u00e0 \u00ab\u00a0left : 10%\u00a0\u00bb. Comme notre colonne est en plein \u00e9cran, les ic\u00f4nes resteront r\u00e9actives lorsque la hauteur et la largeur du navigateur seront ajust\u00e9es. En d’autres termes, elles conserveront leur position sur des \u00e9crans de tailles diff\u00e9rentes.<\/p>\n

                \"divi<\/p>\n

                Cr\u00e9ation et positionnement de l’ic\u00f4ne 2<\/h4>\n

                Pour cr\u00e9er la deuxi\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne existante. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                  \n
                • D\u00e9calage vertical : 30%<\/li>\n
                • D\u00e9calage horizontal : 40%<\/li>\n<\/ul>\n

                  \"divi<\/p>\n

                  Cr\u00e9ation et positionnement de l’ic\u00f4ne 3<\/h4>\n

                  Pour cr\u00e9er la troisi\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                    \n
                  • D\u00e9calage vertical : 20<\/li>\n
                  • D\u00e9calage horizontal : 30%<\/li>\n<\/ul>\n

                    \"divi<\/p>\n

                    Cr\u00e9ation et positionnement de l’ic\u00f4ne 4<\/h4>\n

                    Pour cr\u00e9er la quatri\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                      \n
                    • D\u00e9calage vertical : 70<\/li>\n
                    • D\u00e9calage horizontal : 40%<\/li>\n<\/ul>\n

                      \"divi<\/p>\n

                      Cr\u00e9ation et positionnement de l’ic\u00f4ne 5<\/h4>\n

                      Pour cr\u00e9er la cinqui\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                        \n
                      • D\u00e9calage vertical : 60<\/li>\n
                      • D\u00e9calage horizontal : 50%<\/li>\n<\/ul>\n

                        \"divi<\/p>\n

                        Cr\u00e9ation et positionnement de l’ic\u00f4ne 6<\/h4>\n

                        Pour cr\u00e9er la sixi\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                          \n
                        • D\u00e9calage vertical : 65<\/li>\n
                        • D\u00e9calage horizontal : 60<\/li>\n<\/ul>\n

                          \"divi<\/p>\n

                          Cr\u00e9ation et positionnement de l’ic\u00f4ne 7<\/h4>\n

                          Pour cr\u00e9er la septi\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                            \n
                          • D\u00e9calage vertical : 28<\/li>\n
                          • D\u00e9calage horizontal : 70<\/li>\n<\/ul>\n

                            \"divi<\/p>\n

                            Cr\u00e9ation et positionnement de l’ic\u00f4ne 8<\/h4>\n

                            Pour cr\u00e9er la huiti\u00e8me ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                              \n
                            • D\u00e9calage vertical : 50%<\/li>\n
                            • D\u00e9calage horizontal : 80<\/li>\n<\/ul>\n

                              \"divi<\/p>\n

                              Cr\u00e9ation et positionnement de l’ic\u00f4ne 9<\/h4>\n

                              Pour cr\u00e9er la neuvi\u00e8me et derni\u00e8re ic\u00f4ne, dupliquez l’ic\u00f4ne pr\u00e9c\u00e9dente. Ouvrez ensuite les param\u00e8tres de l’ic\u00f4ne dupliqu\u00e9e et mettez \u00e0 jour les param\u00e8tres de position comme suit :<\/p>\n

                                \n
                              • D\u00e9calage vertical : 15<\/li>\n
                              • D\u00e9calage horizontal : 90<\/li>\n<\/ul>\n

                                \"divi<\/p>\n

                                Partie 3 : ajout d’une animation de d\u00e9filement aux ic\u00f4nes<\/h3>\n

                                Une fois les ic\u00f4nes positionn\u00e9es de mani\u00e8re strat\u00e9gique, nous sommes pr\u00eats \u00e0 ajouter les animations de d\u00e9filement \u00e0 chacune d’entre elles.<\/p>\n

                                \"divi<\/p>\n

                                Multi-s\u00e9lectionnez les ic\u00f4nes<\/h4>\n

                                Dans cet exemple, nous allons ajouter les m\u00eames animations de d\u00e9filement aux neuf ic\u00f4nes. Mais vous pouvez choisir de donner des animations de d\u00e9filement uniques \u00e0 chacune d’elles individuellement si vous le souhaitez. Pour ajouter les animations de d\u00e9filement \u00e0 toutes les ic\u00f4nes en une seule fois, utilisez la s\u00e9lection multiple (maintenez la touche ctrl ou cmd enfonc\u00e9e tout en s\u00e9lectionnant les modules d’ic\u00f4nes) pour s\u00e9lectionner toutes les ic\u00f4nes de la colonne. Ouvrez ensuite les param\u00e8tres de l’un des modules s\u00e9lectionn\u00e9s.<\/p>\n

                                \"divi<\/p>\n

                                Cela fera appara\u00eetre la modale des param\u00e8tres de l’\u00e9l\u00e9ment. Sous l’onglet avanc\u00e9, ouvrez la bascule du groupe d’options Effets de d\u00e9filement. Vous y verrez les effets de transformation du d\u00e9filement. Nous allons ajouter les six effets disponibles (Mouvement vertical, Mouvement horizontal, Fondu entrant et sortant, Augmentation et diminution de l’\u00e9chelle, Rotation et Flou).<\/p>\n

                                Ajout d’effets de transformation du d\u00e9filement<\/h4>\n

                                Mouvement vertical<\/h5>\n

                                Assurez-vous que l’onglet Mouvement vertical est s\u00e9lectionn\u00e9 et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

                                  \n
                                • Activer le mouvement vertical : OUI<\/li>\n
                                • D\u00e9calage de d\u00e9part : 2 (\u00e0 0 %)<\/li>\n
                                • D\u00e9calage de fin : -2 (\u00e0 100%)<\/li>\n<\/ul>\n

                                  Pour l’affichage sur tablette, mettez \u00e0 jour les d\u00e9calages comme suit :<\/p>\n

                                    \n
                                  • D\u00e9calage de d\u00e9part : 1 (\u00e0 0 %)<\/li>\n
                                  • D\u00e9calage de fin : -1 (\u00e0 100%)<\/li>\n<\/ul>\n

                                    Pour l’affichage sur t\u00e9l\u00e9phone, mettez \u00e0 jour les d\u00e9calages comme suit :<\/p>\n

                                      \n
                                    • D\u00e9calage de d\u00e9part : 0,5 (\u00e0 0 %)<\/li>\n
                                    • D\u00e9calage final : -0,5 (\u00e0 100%)<\/li>\n<\/ul>\n

                                      \"divi<\/p>\n

                                      Mouvement horizontal<\/h5>\n

                                      Ensuite, s\u00e9lectionnez l’onglet Horizontal Motion (Mouvement horizontal) et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

                                        \n
                                      • Activer le mouvement horizontal : YES<\/li>\n
                                      • D\u00e9calage de d\u00e9part : -1 (\u00e0 0 %)<\/li>\n
                                      • D\u00e9calage de fin : 1 (\u00e0 100%)<\/li>\n<\/ul>\n

                                        Pour l’affichage sur tablette, mettez \u00e0 jour les d\u00e9calages comme suit :<\/p>\n

                                          \n
                                        • D\u00e9calage de d\u00e9part : 0 (\u00e0 0 %)<\/li>\n
                                        • D\u00e9calage de fin : 0 (\u00e0 100%)<\/li>\n<\/ul>\n

                                          \"divi<\/p>\n

                                          Fondu en entr\u00e9e et en sortie<\/h5>\n

                                          Ensuite, s\u00e9lectionnez l’onglet Fading In and Out et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

                                            \n
                                          • Activer le fondu en entr\u00e9e et en sortie : YES<\/li>\n
                                          • Opacit\u00e9 moyenne : 50% (\u00e0 50%)<\/li>\n<\/ul>\n

                                            \"divi<\/p>\n

                                            Mise \u00e0 l’\u00e9chelle vers le haut et vers le bas<\/h5>\n

                                            Ensuite, s\u00e9lectionnez l’onglet Scaling Up and Down et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

                                              \n
                                            • Activer la mise \u00e0 l’\u00e9chelle vers le haut et vers le bas : OUI<\/li>\n
                                            • \u00c9chelle de d\u00e9part : 0% (\u00e0 0%)<\/li>\n
                                            • \u00c9chelle moyenne : 50% (\u00e0 50%)<\/li>\n<\/ul>\n

                                              \"divi<\/p>\n

                                              Rotation<\/h5>\n

                                              Ensuite, s\u00e9lectionnez l’onglet Rotation et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

                                                \n
                                              • Activer la rotation : OUI<\/li>\n
                                              • D\u00e9but de la rotation : 0% (\u00e0 0%)<\/li>\n
                                              • Rotation interm\u00e9diaire : 90% (\u00e0 50%)<\/li>\n
                                              • Fin de la rotation : 180% (\u00e0 100%)<\/li>\n<\/ul>\n

                                                \"divi<\/p>\n

                                                Flou<\/h5>\n

                                                Ensuite, s\u00e9lectionnez l’onglet Flou et activez l’effet de flou :<\/p>\n

                                                  \n
                                                • Activer le flou : OUI<\/li>\n<\/ul>\n

                                                  \"divi<\/p>\n

                                                  Aper\u00e7u de<\/h4>\n

                                                  Voici un aper\u00e7u rapide des ic\u00f4nes anim\u00e9es par d\u00e9filement en action.<\/p>\n

                                                  Partie 4 : ajout de contenu \u00e0 l’avant-plan de la section<\/h3>\n

                                                  Maintenant que nous avons nos ic\u00f4nes anim\u00e9es en arri\u00e8re-plan, nous sommes pr\u00eats \u00e0 ajouter le contenu que nous voulons afficher au premier plan. L’id\u00e9e est de garder la ligne (avec la colonne et les ic\u00f4nes) derri\u00e8re toute ligne suppl\u00e9mentaire de contenu que nous voulons afficher devant cet arri\u00e8re-plan.<\/p>\n

                                                  \"\"<\/p>\n

                                                  Dans cet exemple, nous allons ajouter une ligne \u00e0 une colonne avec un simple titre.<\/p>\n

                                                  Tout d’abord, ajoutez une nouvelle ligne \u00e0 une colonne directement sous la ligne existante.<\/p>\n

                                                  \"divi<\/p>\n

                                                  La rang\u00e9e existante a une position absolue, donc en ajouter une autre placera la rang\u00e9e en haut de la section comme pr\u00e9vu.<\/p>\n

                                                  \u00c0 l’int\u00e9rieur de la nouvelle rang\u00e9e, ajoutez un module de texte.<\/p>\n

                                                  \"divi<\/p>\n

                                                  Ouvrez les param\u00e8tres du texte et ajoutez le HTML suivant \u00e0 l’int\u00e9rieur du contenu du corps :<\/p>\n

                                                  &lt;h1&gt;Divi&lt;\/h1&gt ;<\/pre>\n
                                                  \"divi<\/p>\n
                                                  Sous l’onglet Design, mettez \u00e0 jour les styles de texte des titres comme suit :<\/p>\n
                                                    \n
                                                  • Police de l’en-t\u00eate : Poppins<\/li>\n
                                                  • Alignement du texte de l’en-t\u00eate : Centre<\/li>\n
                                                  • Taille du texte de l’en-t\u00eate : 8vw (ordinateur de bureau), 40px (tablette et t\u00e9l\u00e9phone)<\/li>\n<\/ul>\n
                                                    \"divi<\/p>\n
                                                    Position de la rang\u00e9e<\/h4>\n
                                                    Afin de vous assurer que la rang\u00e9e (et l’en-t\u00eate) sont positionn\u00e9s au centre de la section, ouvrez les param\u00e8tres de la rang\u00e9e et mettez \u00e0 jour la position comme suit :<\/p>\n
                                                      \n
                                                    • Position : Absolue<\/li>\n
                                                    • Emplacement : Centre<\/li>\n<\/ul>\n
                                                      \"divi<\/p>\n
                                                      Les touches finales : Image d’arri\u00e8re-plan de la section et d\u00e9bordement<\/h3>\n
                                                      Pour terminer la conception, ouvrez les param\u00e8tres de la section et ajoutez une image d’arri\u00e8re-plan. Pour cet exemple, j’utilise une image de notre pack de mise en page pour l’intelligence artificielle.<\/p>\n
                                                      \"divi<\/p>\n
                                                      Dans l’onglet avanc\u00e9, assurez-vous que le d\u00e9bordement est masqu\u00e9 en mettant \u00e0 jour les options de visibilit\u00e9 :<\/p>\n
                                                        \n
                                                      • D\u00e9bordement horizontal : Cach\u00e9<\/li>\n
                                                      • D\u00e9bordement vertical : Cach\u00e9<\/li>\n<\/ul>\n
                                                        Cette option permet de s’assurer que la barre de d\u00e9filement verticale ne s’affiche pas lorsqu’une ic\u00f4ne est anim\u00e9e en dehors de la section.<\/p>\n
                                                        \"divi<\/p>\n
                                                        R\u00e9flexions finales<\/h2>\n
                                                        Il est parfois amusant de faire preuve de cr\u00e9ativit\u00e9 et de montrer \u00e0 quel point Divi peut \u00eatre un constructeur visuel de pages puissant (et amusant). Je pense que ce tutoriel a permis de mettre en \u00e9vidence l’efficacit\u00e9 de Divi pour donner vie aux sections d’arri\u00e8re-plan d’un site Web. Le fait que vous puissiez ajouter des effets de transformation de d\u00e9filement \u00e0 des centaines d’ic\u00f4nes diff\u00e9rentes ouvre la porte \u00e0 toutes sortes de conceptions et d’animations cr\u00e9atives. J’esp\u00e8re que ce tutoriel vous donnera un regain d’inspiration pour utiliser les ic\u00f4nes anim\u00e9es par d\u00e9filement de mani\u00e8re encore plus cr\u00e9ative.<\/p>\n
                                                        J’ai h\u00e2te de lire vos commentaires.<\/p>\n
                                                        \u00c0 la v\u00f4tre !<\/p>\n<\/article>","protected":false},"excerpt":{"rendered":"
                                                        La combinaison d’une animation de d\u00e9filement et d’ic\u00f4nes peut rehausser le design de votre site Web de mani\u00e8re unique. Dans ce tutoriel, nous allons explorer comment ajouter des ic\u00f4nes anim\u00e9es par d\u00e9filement aux arri\u00e8re-plans de section dans Divi. Avec des centaines d’ic\u00f4nes parmi lesquelles choisir et de nombreux effets d’animation int\u00e9gr\u00e9s disponibles dans Divi, nous […]<\/p>\n","protected":false},"author":1,"featured_media":369181,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-369180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/369180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=369180"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/369180\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/369181"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=369180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=369180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=369180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}