Utiliser l'animation de diapositives de Divi pour montrer la progression d'un processus

Bienvenue dans la troisième 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 des animations Divi.

Dans notre dernier article, je vous ai montré quelques façons créatives de concevoir et d'animer des sections de votre site Web pour afficher des produits et services alors que nous construisions les sections 3 et 4 de notre page de démonstration d'animation.

Aujourd'hui, nous allons aborder la section 5 qui utilise une excellente animation pour afficher quatre superbes modules Blurb. Le timing étape par étape des animations de présentation complète vraiment le processus étape par étape dans lequel les présentations sont utilisées.

Plongeons dedans !

Voici un aperçu de ce que nous allons construire dans le post d'aujourd'hui

Préparation des éléments de conception

La seule chose dont vous avez vraiment besoin pour ce didacticiel sont les 4 icônes d'image 207 × 188 utilisées pour les modules Blurb. Voici les images que je vais utiliser.

Utiliser l'animation de diapositives de Divi pour montrer la progression d'un processus

Abonnez-vous à notre chaîne Youtube

Bâtiment Section 5

À l'aide du Visual Builder, ajoutez une section régulière (sous la section 4 si vous suivez la série). Avant de faire quoi que ce soit d'autre, ajoutez la couleur d'arrière-plan #f5f9fc à votre section et enregistrez vos paramètres.

Ajoutez votre titre de section à l'aide de deux modules de texte

Ajoutez ensuite une ligne à une colonne. Dans la rangée, ajoutez un module de texte et mettez à jour les paramètres comme suit.

Sous l'onglet Contenu…

Contenu : "Configuration"

Sous l'onglet Conception…

Police du texte : gras (B), majuscule (TT)
Taille de la police de texte : 15px
Texte Couleur du texte : #6a8091
Espacement des lettres du texte : 5px
Hauteur de la ligne de texte : 1,9 em
Orientation du texte : Centre

Espacement : 20 pixels en bas

Style d'animation : diapositive
Direction de l'animation : vers le haut
Durée de l'animation : 850 ms

Enregistrer les paramètres

Ajoutons maintenant le titre de la section en ajoutant un autre module de texte sous celui que vous venez de créer. Mettez à jour les paramètres de texte comme suit :

Sous l'onglet Contenu…

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

<h1>Say Hello to DIVI</h1>

Sous l'onglet Conception…

Police d'en-tête : gras (B)
Alignement du texte de l'en-tête : Centre
Taille de la police d'en-tête : 39px
Couleur du texte de l'en-tête : #2f3a54

Remarque : Comme il s'agit d'un en-tête h1, nous devons modifier les paramètres du texte de l'en-tête.

Largeur : 600px (tapez cette valeur)
Alignement du module : centre
Marge personnalisée : 20 pixels en bas

Style d'animation : diapositive
Direction de l'animation : vers le haut
Durée de l'animation : 850 ms
Intensité de l'animation : 12 %
Courbe de vitesse d'animation :

Enregistrer les paramètres

Concevoir les quatre présentations

Nous sommes maintenant prêts à ajouter nos modules Blurb. Commencez par créer une ligne avec une structure à quatre colonnes (1/4 1/4 1/4 1/4).

Ajoutez un module Blurb à la première colonne (à l'extrême gauche).

Ensuite, mettez à jour les paramètres Blurb.

Sous l'onglet Contenu…
Ajoutez le code html suivant dans l'onglet texte de la zone de contenu :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p>
<p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>

Remarque : j'ai ajouté un lien manuellement pour donner à l'utilisateur une autre option sur laquelle cliquer. Assurez-vous que l'URL du lien manuel correspond au lien que vous ajoutez à l'URL du module de présentation.

URL : [entrer l'URL]
Image : [entrez votre image 207 × 188]
Couleur d'arrière-plan : #ffffff

Sous l'onglet Conception…

Orientation du texte : Centre

Police d'en-tête : par défaut, gras (B), majuscule (TT)
Couleur du texte de l'en-tête : #7969f4
Espacement des lettres d'en-tête : 3px
Hauteur de la ligne d'en-tête : 3 em

Couleur du corps du texte : #6a8091
Hauteur de la ligne du corps : 1,9 em

Rembourrage personnalisé : 40 pixels en haut, 40 pixels à droite, 40 pixels en bas, 40 pixels à gauche

Style d'animation : diapositive
Direction de l'animation : vers le haut
Durée de l'animation : 700 ms
Intensité de l'animation : 4%
Animation d'image/icône : pas d'animation

Sous l'onglet Avancé…

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

border-radius: 6px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);

Enregistrer les paramètres

Maintenant que vous avez terminé un Blurb, nous pouvons l'utiliser comme modèle pour les trois prochains Blurb.

Allez-y et faites un clic droit sur le module et sélectionnez copier le module. Collez ensuite (ctrl + v) le module dans chacune des trois colonnes restantes.

Il ne nous reste plus qu'à ajouter quelques mises à jour à chacun des trois modules dupliqués.

Pour le module Blurb dans la deuxième colonne, mettez à jour les éléments suivants :

Sous l'onglet Contenu…

Titre : Étape 2
Contenu : [mettre à jour le texte et l'URL du lien manuel]
URL : [mettre à jour l'URL du texte de présentation]
Image : [ajouter une nouvelle image 207 × 188]

Sous l'onglet Conception…
Couleur du texte de l'en-tête : #e944ff
Délai d'animation : 50 ms
Intensité de l'animation : 12 %

Pour le module Blurb dans la troisième colonne, mettez à jour les éléments suivants :

Sous l'onglet Contenu…

Titre : Étape 3
Contenu : [mettre à jour le texte et l'URL du lien manuel]
URL : [mettre à jour l'URL du texte de présentation]
Image : [ajouter une nouvelle image 207 × 188]

Sous l'onglet Conception…

Couleur du texte de l'en-tête : #3ebaef
Délai d'animation : 100 ms
Intensité de l'animation : 20 %

Pour le module Blurb dans la quatrième colonne, mettez à jour les éléments suivants :

Sous l'onglet Contenu…

Titre : Étape 4
Contenu : [mettre à jour le texte et l'URL du lien manuel]
URL : [mettre à jour l'URL du texte de présentation]
Image : [ajouter une nouvelle image 207 × 188]

Sous l'onglet Conception…
Couleur du texte de l'en-tête : #95d624
Délai d'animation : 150 ms
Intensité de l'animation : 30 %

Une fois que vous avez mis à jour tous vos Blurbs, mettons à jour les paramètres de ligne comme suit :

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 : 2

Style d'animation : Zoom
Durée de l'animation : 700 ms
Opacité de démarrage de l'animation : 100 %

Enregistrer les paramètres

Maintenant, vous avez terminé avec cette section. La page de démonstration a une autre image sous les textes de présentation mais je n'ai pas pensé qu'il était nécessaire de l'inclure ici.

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_3.zip dans notre dossier de téléchargements. Décompressez-le pour révéler les importations suivantes.

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

Effets d'animation Partie 3 (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

La conception et l'animation de la section 5 montrent vraiment le pouvoir que seuls quelques paramètres d'animation peuvent avoir sur la diffusion du contenu. Non seulement cela a l'air cool d'avoir chacun des textes de présentation en progression, mais cela a également du sens étant donné que vous montrez de toute façon les étapes d'un processus.

À venir

Dans la partie 4 de notre série, je vais vous montrer une superbe mise en page pour afficher des produits ou des téléchargements. Et, bien sûr, je soulignerai l'utilisation intelligente de l'animation tout au long.

Jusqu'à la prochaine fois!

J'ai hâte de vous entendre dans les commentaires ci-dessous.