Comment utiliser les nouveaux effets d'animation de Divi

Bienvenue dans la première partie de cette série en 6 parties qui vous apprendra à utiliser les nouvelles options d'animation de Divi pour concevoir de superbes sections de page. Je vais vous expliquer comment créer les différentes sections de notre page de démonstration en direct afin de vous montrer des techniques pour ajouter des animations à votre site Web. Les fonctionnalités d'animation sont vraiment amusantes et faciles à utiliser. Et avec le Visual Builder, vous pouvez voir votre création prendre vie à chaque étape du processus. Venez me rejoindre pour explorer la puissance de l'animation Divi.

L'animation peut donner vie à une page. Si cela est fait efficacement, l'utilisateur peut devenir engagé et plus enclin à explorer le contenu de votre page. Si elles sont mal faites, les animations peuvent complètement distraire l'utilisateur et le conduire dans un état de déception hébétée. La vitesse, le timing et l'intensité de l'animation jouent tous un rôle important dans cette symphonie de mouvement lorsque l'utilisateur fait défiler la page.

Les fonctionnalités d'animation avancées de Divi vous permettent d'ajouter une animation à n'importe quel élément de votre site Web. Et vous pouvez combiner ces éléments animés pour créer d'innombrables combinaisons de mouvements qui donnent vie à vos sections.

Dans la première partie de cette série, je vais vous montrer comment utiliser le constructeur visuel pour créer et animer les deux premières sections de notre page de démonstration en direct présentant la puissance des fonctionnalités d'animation de Divi.

Commençons.

Voici un aperçu de ce que nous allons construire dans cette série

Partie 1 de la série

Section 1

Section 2

Partie 2 de la série

Section 3

Section 4

Partie 3 de la série

Article 5

Partie 4 de la série

Article 6

Partie 5 de la série

Article 7

Partie 6 de la série

Article 8

Article 9

Préparation des éléments de conception

Pour la première section, vous aurez besoin de deux images. La première est votre image de fond plein écran avec des dimensions d'environ 1280 × 800. Voici celui que j'utilise :

La deuxième image est une version modifiée de la même image qui a été retournée verticalement et estompée vers le bas. Cette deuxième image servira d'arrière-plan pour votre titre principal et devrait être d'environ 800 × 400.

Pour créer l'image à l'envers, ouvrez l'image dans Aperçu et sélectionnez Outils > Retourner verticalement ou ouvrez l'image dans Photoshop, sélectionnez Image > Rotation de l'image > Retourner la toile verticalement. Pour ajouter l'effet de fondu au bas de l'image, j'ai utilisé l'outil gomme en mode pinceau avec une taille de 800px et une dureté de 0%. Ensuite, j'ai appuyé sur la touche Maj et j'ai fait glisser le pinceau le long du bord inférieur.

Assurez-vous de l'exporter en tant que fichier png.

Si vous n'avez pas Photoshop, vous pouvez essayer une solution de retouche photo gratuite comme gimpshop pour effectuer bon nombre des mêmes modifications de conception. Si vous ne savez pas comment utiliser un logiciel de retouche photo (et que vous ne vous souciez pas d'apprendre à ce stade), n'hésitez pas à omettre la deuxième image pour le moment, ou utilisez celle ci-dessous (cliquez et faites-la glisser sur votre bureau).

Pour la deuxième section, vous aurez besoin de deux images. Le premier devrait faire environ 730×490 comme celui-ci.

Et le second devrait être d'environ 525×660 comme celui ci-dessous.

Comprendre la terminologie de l'animation

Si vous ne l'avez pas déjà fait, allez-y et lisez le post de mise à jour des fonctionnalités présentant des animations avancées. À la fin de l'article, Nick donne une définition/description utile de chacune des fonctionnalités d'animation que vous trouverez dans le constructeur. Comprendre ce que font réellement ces fonctionnalités d'animation est important pour le processus de création.

Une fois que vous avez compris ce que sont ces fonctionnalités d'animation, plongeons-nous.

Comment utiliser les nouveaux effets d'animation de Divi

Abonnez-vous à notre chaîne Youtube

Ajoutez vos nouveaux paramètres de page

Depuis le tableau de bord WordPress, accédez à Pages > Ajouter un nouveau. Ajoutez ensuite un titre à votre page. Ensuite, recherchez les paramètres de la page Divi dans la case en haut à droite de la page et sélectionnez Dot Navigation « ON ». Dans la zone Attributs de page, sélectionnez Page vierge pour votre modèle de page. Enfin, cliquez sur le bouton « Utiliser Divi Builder » et déployez Visual Builder pour commencer à créer votre mise en page.

Bâtiment Section 1 : Conception et animation d'en-tête en plein écran

Cette section d'en-tête va se comporter un peu comme un module d'en-tête pleine largeur défini sur plein écran. En d'autres termes, lorsque le site se charge, la section remplira toute la largeur et la hauteur de la fenêtre du navigateur, quelle que soit la taille de la fenêtre. Mais au lieu d'utiliser le module d'en-tête pleine largeur, nous allons utiliser une section standard et définir la hauteur sur 100vh. De cette façon, nous pouvons ajouter un module de texte à l'intérieur.

À l'aide du Visual Builder, cliquez pour modifier les paramètres de section de la section standard déjà affichés par défaut lors du lancement du générateur. Mettez à jour les éléments suivants :

Sous l'onglet Contenu…

Image d'arrière-plan : [entrez votre image d'arrière-plan 1280 × 800]
Utiliser l'effet de parallaxe : OUI
Méthode de parallaxe : vraie parallaxe

Sous l'onglet Conception…

Rembourrage personnalisé : 5 % en haut, 0 pixel à droite, 5 % en bas, 0 pixel à gauche

Sous l'onglet Avancé…

Ajoutez le CSS personnalisé suivant dans la zone Élément principal :

min-height: 100vh

Cette ligne de CSS indique à la section d'afficher 100% de la hauteur de la fenêtre.

Enregistrer les paramètres

Insérez ensuite une structure à une colonne dans votre ligne et ajoutez un module de texte à la colonne. Mettez à jour les paramètres du module de texte comme suit :

Sous l'onglet Contenu .. .

Ajoutez simplement le mot « Divi » dans la zone de contenu.

Sous l'onglet Conception…

Police du texte : Oswald, majuscule (TT)
Taille de la police du texte : 14 px
Texte Couleur du texte : #08408e
Espacement des lettres du texte : 1,5 em (vous devrez le saisir)
Orientation du texte : Centre
Marge personnalisée : 2%
Style d'animation : Retourner
Répétition de l'animation : une fois
Direction de l'animation : à droite
Durée de l'animation : 2000 ms
Délai d'animation : 1100 ms
Intensité de l'animation : 100 %
Opacité de démarrage de l'animation : 0%
Courbe de vitesse d'animation :

Time Out… Arrêtons-nous une minute pour que je puisse vous montrer ce qu'il faudrait pour ajouter manuellement cette animation similaire.

Voici le code html avec le style en ligne nécessaire pour l'animation :

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Et voici le CSS nécessaire à l'animation :

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

Et cela n'inclut pas le code nécessaire pour activer l'animation lorsqu'elle devient visible dans la fenêtre du navigateur. Quoi qu'il en soit, tout cela pour dire que ces fonctionnalités d'animation intégrées sont un énorme gain de temps. Et pouvoir voir l'animation en direct pendant que vous modifiez les options d'animation est un bonus considérable.

Continuons maintenant avec la mise à jour de nos paramètres de module de texte :

Sous l'onglet Avancé…

Ajoutez la ligne suivante de CSS personnalisé à la zone Élément principal :

text-indent: 1.5em

Enregistrer les paramètres

Ajoutez ensuite un autre module de texte directement sous celui que vous venez de créer et mettez à jour les paramètres comme suit :

Sous l'onglet Contenu…

Ajoutez le code HTML suivant dans l'onglet texte de la zone de contenu :

<p><span>Believing</span><br />is  Seeing</p>

Sous l'onglet Conception…

Couleur du texte : clair
Police du texte : Oswald, majuscule (TT)
Taille de la police du texte : 8vw (vous devez saisir ceci ; cela fait 8% de la taille de la police de la largeur de la fenêtre)
Couleur du texte du texte : rgba(255,255,255,0.79)
Hauteur de la ligne de texte : 1.4em
Orientation du texte : centre
Style d'animation : Plier
Direction de l'animation : vers le haut
Durée de l'animation : 1800 ms
Délai d'animation : 0 ms
Intensité de l'animation : 60 %

Enregistrer les paramètres

Cet effet d'animation révélera le titre principal en le pliant (ou debout) à partir d'une position apparemment plate. Maintenant que nous avons terminé avec notre texte de titre principal, ajoutons notre image d'arrière-plan à l'envers à la ligne.

Allez maintenant dans les paramètres de ligne de la ligne contenant les deux modules de texte que vous venez de créer et mettez à jour les paramètres comme suit :

Sous l'onglet Contenu…

Image d'arrière-plan : [insérez votre image 800 × 440]
Taille de l'image d'arrière-plan : Ajuster
Position de l'image d'arrière-plan : en haut au centre
Répétition de l'image d'arrière-plan : aucune répétition

Sous l'onglet Conception…

Utiliser la largeur personnalisée : OUI
Unité : %
Largeur personnalisée : 50 %
Rembourrage personnalisé : 12% en haut, 0% à droite, 5% en bas, 0% à gauche
Style d'animation : diapositive
Direction de l'animation : vers le haut
Délai d'animation : 300 ms
Intensité de l'animation : 20 %

Cet effet d'animation fait glisser l'image vers le haut, presque comme si elle s'élevait de derrière les montagnes.

Voilà pour la première section. Jetons un coup d'œil à notre conception et à notre animation finales.

Les trois éléments animés ici incluent la ligne (qui glisse vers le haut), le module de texte avec le texte « Croire, c'est voir » (qui se déplie à partir de son centre) et le module de texte avec le texte « Divi » (qui est retardé pour s'ouvrir vers la droite après l'arrêt des autres éléments). La combinaison engage vraiment le visiteur en révélant différents éléments de contenu de manière ciblée et opportune.

Bâtiment Section 2

Cette deuxième section de notre page de démonstration d'animation présente une manière subtile, mais extrêmement cool, de révéler le contenu de votre page. En fait, il est presque impossible de reconnaître tous les mouvements au premier coup d'œil.

Pour construire la deuxième section, ajoutez une section régulière sous la section précédente. Dans la section, ajoutez une ligne à deux colonnes (un demi-moitié).

Dans la colonne de gauche, ajoutez un module de texte avec les paramètres suivants :

Sous l'onglet Contenu…

Entrez le code html suivant dans l'onglet texte de la zone de contenu :

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Sous l'onglet Conception…

Couleur du texte : clair
Police du texte : Montserrat
Taille de la police de texte : 18px
Hauteur de la ligne de texte : 1,8 em
Police d'en-tête : Montserrat, Gras (B), Majuscule (TT)
Taille de la police d'en-tête : 39px (bureau)
Hauteur de la ligne d'en-tête : 2,2 em
Marge inférieure : 50px
Style d'animation : diapositive
Direction de l'animation : vers le haut
Intensité de l'animation : 10 %

Cet effet d'animation révélera le bloc de texte en le faisant glisser vers le haut.

Enregistrer les paramètres

Ajoutez ensuite un module de boutons sous le module Texte que vous venez de créer. Mettez à jour les paramètres du module de boutons comme suit :

Sous l'onglet Contenu…

Texte du bouton : en savoir plus
URL du bouton : # (ou ce que vous voulez qu'il soit)

Sous l'onglet Conception…

Alignement des boutons : à gauche
Couleur du texte : clair
Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 15 px
Rayon de bordure de bouton : 0
Espacement des lettres des boutons : 3px
Police des boutons : Montserrat, Gras (B), Majuscule (TT)
Afficher l'icône du bouton : OUI
Rembourrage personnalisé : 10 pixels en haut, 30 pixels à droite, 10 pixels en bas, 30 pixels à gauche
Style d'animation : diapositive
Direction de l'animation : vers le bas
Délai d'animation : 100 ms
Intensité de l'animation : 10 %

Pour contrebalancer l'effet du texte précédent ci-dessus, cet effet d'animation révélera le bouton en le faisant glisser vers le bas avec un léger retard.

Vous ne pouvez pas encore voir votre texte et votre bouton car il s'agit actuellement de texte blanc sur fond blanc. C'est bon. Nous ajouterons notre arrière-plan bientôt.

Ajoutez ensuite un module diviseur dans la colonne de droite.

Ensuite, mettez à jour les paramètres comme suit :

Sous l'onglet Conception…

Hauteur : 260px

Sous l'onglet Avancé…

Désactiver la visibilité sur le bureau

L'ajout d'un séparateur ici aidera l'image d'arrière-plan à rester visible sur les appareils mobiles.

Enregistrer les paramètres

Ajoutons maintenant nos arrière-plans à chacune de nos colonnes. Accédez aux paramètres de ligne et mettez à jour les éléments suivants :

Sous l'onglet Contenu…

Colonne 1 Couleurs de dégradé de fond : #fe8840, rgba (238,78,78,0.9)
Direction du gradient de la colonne 1 : 135 deg
Image d'arrière-plan de la colonne 2: [entrez votre image 730 × 490]
Position de l'image d'arrière-plan de la colonne 2 : en haut à gauche
Colonne 2 Répétition de l'image d'arrière-plan : aucune répétition

Sous l'onglet Conception…

Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 1366px
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI
Rembourrage personnalisé : 0 pixels en haut, 0 pixels à droite, 0 pixels en bas, 0 pixels à gauche
Remplissage personnalisé de la colonne 1 : 5 % en haut, 7 % à droite, 5 % en bas, 7 % à gauche
Style d'animation : Plier
Direction de l'animation : vers le haut
Durée de l'animation : 800 ms

Cet effet d'animation révélera toute la rangée en la pliant (ou debout) en vue.

Sous l'onglet Avancé…

Ajoutez le CSS personnalisé suivant à la zone Élément principal :

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Enregistrer les paramètres

Ajoutez ensuite une ligne à deux colonnes (un tiers deux tiers) sous la ligne que vous venez de créer.

Dans la colonne de gauche, ajoutez un module diviseur et mettez à jour les paramètres comme suit :

Sous l'onglet Conception…

Hauteur : 400px

Sous l'onglet Avancé…

Désactiver la visibilité sur le bureau

L'ajout d'un séparateur ici aidera l'image d'arrière-plan à rester visible sur les appareils mobiles.

Enregistrer les paramètres

Pour gagner du temps, allez-y et faites un clic droit et copiez le module de texte dans la colonne de gauche de la ligne ci-dessus contenant le texte « Le temps, c'est de l'argent ». Collez-le ensuite dans la colonne de droite (deux tiers) de la ligne ci-dessous.

Mettez à jour les nouveaux paramètres du module de texte comme suit :

Sous l'onglet Contenu…

Remplacez le texte de l'en-tête h1 par « Commute Like a Pro » dans la zone de contenu.

Sous l'onglet Conception…

Texte Couleur du texte : #a8a8a8
Couleur du texte de l'en-tête : #414159
Style d'animation : diapositive
Direction de l'animation : vers le bas
Intensité de l'animation : 10 %

Cet effet d'animation révèle le bloc de texte en le faisant glisser vers le bas.

Maintenant, faites un clic droit et copiez le module de boutons dans la colonne de gauche de la ligne ci-dessus et collez-le sous le module de texte que vous venez de terminer d'éditer.

Mettez à jour les paramètres du module de boutons comme suit :

Couleur du texte du bouton : #ff4823
Couleur de la bordure du bouton : #ff4823
Couleur du texte de survol du bouton : #ff2323

Enregistrer les paramètres

Pour la dernière étape, modifiez vos paramètres de ligne en mettant à jour les éléments suivants :

Sous l'onglet Contenu…

Couleur d'arrière-plan : #ffffff
Image de fond de la colonne 1 : [insérez votre image 525 × 660]
Colonne 1 Position de l'image d'arrière-plan : en haut à gauche
Répétition de l'image d'arrière-plan de la colonne 1 : aucune répétition
Colonne 2 Couleurs de dégradé d'arrière-plan : rgba(255,255,255,0.91), #ffffff
Direction du gradient de la colonne 2: 135deg

Sous l'onglet Conception…

Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 1040px
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI
Rembourrage personnalisé : 0 pixels en haut, 0 pixels à droite, 0 pixels en bas, 0 pixels à gauche
Remplissage personnalisé de la colonne 2 : 5 % en haut, 7 % à droite, 5 % en bas, 7 % à gauche
Style d'animation : Plier
Direction de l'animation : vers le bas
Durée de l'animation : 800 ms

Cet effet d'animation révélera la rangée entière en la repliant dans la vue.

Sous l'onglet Avancé…

Ajoutez le CSS personnalisé suivant sous la zone Élément principal :

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

C'est tout pour cette section. Vérifiez vos résultats.

Parce que les éléments d'animation et de conception de cette section sont subtils, je pense que c'est un excellent exemple du type de conception et d'animation qui pourrait être utilisé sur la plupart des pages. Les rangées du haut et du bas s'ouvrent comme si vous regardiez un livre s'ouvrir par derrière. Le texte et les boutons se déplacent légèrement vers le haut sur la rangée du haut et vers le bas sur la rangée du bas. Une excellente combinaison.

Bonus : téléchargez ces sections pour une importation facile

En prime, nous avons regroupé les sections intégrées dans le didacticiel d'aujourd'hui dans un téléchargement gratuit que vous pouvez obtenir en utilisant le formulaire d'inscription par e-mail ci-dessous. Entrez simplement votre email et le bouton de téléchargement apparaîtra. Ne vous inquiétez pas de vous « réabonner » si vous faites déjà partie de notre Newsletter Divi. Ressaisir votre e-mail n'entraînera pas plus d'e-mails ou de doublons. Il révélera simplement le téléchargement.

Prendre plaisir!

Télécharger le pack de mise en page

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour utiliser ces téléchargements, commencez par localiser le fichier zippé appelé Animation_Effects_Part_1.zip dans notre dossier de téléchargements. Décompressez-le pour révéler les importations suivantes.

Effets d'animation Partie 1 (section 1).json

Effets d'animation Partie 1 (section 2).json

Naviguez dans votre administrateur WordPress vers Divi > Divi Library > Import & Export. Lorsque le modal de portabilité apparaît, cliquez sur l'onglet d'importation et sur le bouton intitulé Choisir un fichier.

Sélectionnez le fichier json que vous préférez et cliquez sur « Importer les mises en page Divi Builder ». Une fois l'importation terminée, accédez à la publication ou à la page à laquelle vous souhaitez ajouter l'une des sections ci-dessus.

Activez le constructeur visuel. Accédez à la partie de la page à laquelle vous souhaitez ajouter l'une des sections ci-dessus. Lorsque vous cliquez sur l'icône d'ajout d'une nouvelle section, l'option « Ajouter à partir de la bibliothèque » s'affichera. Choisissez cette option et sélectionnez la mise en page souhaitée.

Emballer

J'espère que ces deux sections serviront d'inspiration pour les futures versions utilisant les fonctionnalités d'animation de Divi. Les concepts de conception à eux seuls sont excellents et les mises en page peuvent facilement être adaptées à n'importe quel site Web avec quelques ajustements mineurs. Restez à l'écoute car nous couvrirons beaucoup plus dans cette série.

À venir

Dans la prochaine partie de cette série, je continuerai notre exploration des fonctionnalités d'animation avancées de Divi en créant les sections 3 et 4 de notre page de démonstration d'animation.

Voici ce que vous pouvez vous attendre à construire.

Section 3:

Section 4:

Veuillez laisser vos commentaires ci-dessous.

À votre santé!