Utiliser l'animation de pliage de Divi pour faire fleurir les blurbs
Publié: 2017-10-16Bienvenue dans la partie 4 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 4 modules de présentation organisés pour un processus étape par étape.
Aujourd'hui, nous allons construire la section 6 de notre page de démonstration d'animation. Cette section présente de superbes conceptions et animations pour afficher les produits en vedette ou les téléchargements. L'utilisation de la couleur et l'effet de floraison de l'animation sur ces modules de présentation font vraiment ressortir la section.
Plongeons dedans !
Voici un aperçu de ce que nous allons construire dans le post d'aujourd'hui
Utiliser l'animation de pliage de Divi pour faire fleurir les blurbs
Abonnez-vous à notre chaîne Youtube
Bâtiment Section 6
Ajoutez et personnalisez votre section
En utilisant Visual Builder, commençons par ajouter une autre section régulière à notre mise en page. Ajoutez ensuite une ligne à trois colonnes (un demi-quart à un quart) à votre section.
Avant d'ajouter notre premier module, accédez aux paramètres de la section et mettez à jour les éléments suivants :
Sous l'onglet Contenu…
Couleur d'arrière-plan : #00252d
Sous l'onglet Conception…
Rembourrage personnalisé : 80 pixels en haut, 80 pixels en bas
Enregistrer les paramètres
Ajouter un en-tête à l'aide du module de texte
Revenons maintenant à notre ligne à trois colonnes et ajoutons un module de texte dans la colonne de gauche. Mettez à jour les paramètres de texte comme suit :
Sous l'onglet Contenu…
Ajoutez l'en-tête h1 suivant dans l'onglet texte de la zone de contenu :
<h1>Build Like You Mean It</h1>
Sous l'onglet Conception…
Police d'en-tête : Lato, Gras (B)
Taille de la police d'en-tête : 38 px
Couleur du texte de l'en-tête : #ffffff
Hauteur de la ligne d'en-tête : 1,3 em
Marge personnalisée : 20 pixels en bas
Style d'animation : diapositive
Direction de l'animation : Gauche
Intensité de l'animation : 16%
Enregistrer les paramètres
Ajouter du texte à l'aide d'un autre module de texte
Normalement, vous allez probablement simplement ajouter le reste de votre texte sous l'en-tête h1 dans le même module de texte. Mais puisque nous voulons ajouter un effet d'animation différent à l'en-tête h1 et au texte en dessous, nous devrons créer un autre module de texte. Allez-y et ajoutez un module de texte sous celui que vous venez de créer et mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
Contenu : « Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.
Sous l'onglet Conception…
Couleur du texte : clair
Taille de la police de texte : 18px
Couleur du texte du texte : rgba(255,255,255,0.66)
Hauteur de la ligne de texte : 1,9 em
Marge personnalisée : 40 pixels en bas
Style d'animation : diapositive
Direction de l'animation : Gauche
Intensité de l'animation : 8%
Enregistrer les paramètres
Ajouter un bouton
Ajoutons maintenant un module de bouton sous les deux modules de texte dans la colonne de gauche. Ensuite, mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
Texte du bouton : tout télécharger
URL du bouton [entrer l'url]
Sous l'onglet Conception…
Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 15 px
Couleur du texte du bouton : #01254c
Couleur d'arrière-plan du bouton : #ffcd1c
Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 65 px
Espacement des lettres des boutons : 1px
Police des boutons : gras (B), majuscule (TT)
Rembourrage personnalisé : 10 pixels en haut, 30 pixels à droite, 10 pixels en bas, 30 pixels à gauche
Style d'animation : diapositive
Direction de l'animation : Gauche
Intensité de l'animation : 16%
N'oublions pas d'ajouter ce merveilleux effet de lueur en utilisant la propriété box shadow css. Recherchez la zone Élément principal sous CSS personnalisé et ajoutez les éléments suivants :
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
Enregistrer les paramètres
Ajoutez votre premier module de présentation
Voilà pour notre colonne de gauche. Ajoutons maintenant un module Blurb à la colonne du milieu (qui est la première quatrième colonne).
Mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
Titre : Divi
Utiliser l'icône : OUI
Icône : [sélectionner l'icône]
Couleurs de dégradé d'arrière-plan : #8b56ff, #5d3dff
Type de dégradé : Linéaire
Direction du gradient : 140 degrés
Sous l'onglet Conception…
Couleur de l'icône : #ffffff
Couleur du texte : clair
Orientation du texte : Centre
Police d'en-tête : gras (B), majuscule (TT)
Espacement des lettres d'en-tête : 10px
Marge personnalisée : 12 % en bas
Rembourrage personnalisé : 40 pixels en haut, 30 pixels à droite, 30 pixels en bas, 30 pixels à gauche
Style d'animation : Plier
Direction de l'animation : Gauche
Délai d'animation : 200 ms
Sous l'onglet Avancé…
C'est ici que nous pouvons ajouter cet effet de lueur à notre module et indenter un peu l'en-tête.
Ajoutez le CSS suivant à la zone Élément principal :
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
Ajoutez le CSS suivant à la zone Titre du Blurb :
text-indent: 10px;
Enregistrer les paramètres
Dupliquez le module Blurb pour créer les trois prochains Blurbs
Maintenant que nous avons conçu et animé notre premier module de présentation, nous pouvons dupliquer le module pour créer les présentations restantes.
Survolez le module Blurb et cliquez sur l'icône du module en double. Dans le nouveau module dupliqué qui apparaît ci-dessous, mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
Titre : Bloom
Icône : [sélectionnez une nouvelle icône]
Couleurs de dégradé d'arrière-plan : #ff56f9, #c43dff
Sous l'onglet Conception…
Direction de l'animation : vers le bas
Sous l'onglet Avancé…
Remplacez le CSS dans la zone Élément principal par ce qui suit :
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
Enregistrer les paramètres
Faites un autre duplicata du module de présentation et faites-le glisser vers la colonne la plus à droite. Mettez ensuite à jour ce module Blurb avec les paramètres suivants :
Sous l'onglet Contenu…
Titre : Supplémentaire
Icône : [sélectionnez une nouvelle icône]
Couleurs de dégradé d'arrière-plan : #56ffda, #38d5ea
Sous l'onglet Conception…
Direction de l'animation : vers le haut
Sous l'onglet Avancé…
Remplacez le CSS dans la zone Élément principal par ce qui suit :
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
Faites un autre duplicata du module de présentation que vous venez de mettre à jour dans la colonne de droite afin qu'il apparaisse directement en dessous. Mettez ensuite à jour ce module Blurb avec les paramètres suivants :
Sous l'onglet Contenu…
Titre : Monarque
Icône : [sélectionnez une nouvelle icône]
Couleurs de dégradé d'arrière-plan : #f2743a, #ff5656
Sous l'onglet Conception…
Direction de l'animation : à droite
Sous l'onglet Avancé…
Remplacez le CSS dans la zone Élément principal par ce qui suit :
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
Enregistrer les paramètres
Maintenant, obtenons le bon espacement en mettant à jour vos 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
Rembourrage personnalisé : 80 pixels en haut, 0 pixels à droite, 160 pixels en bas, 0 pixels à gauche
Rembourrage personnalisé de la commission 1 : 140 pixels en haut
Construisez la deuxième rangée
Nous sommes maintenant prêts à créer la ligne suivante pour notre section. Pour accélérer les choses, nous allons dupliquer et copier des éléments de conception à partir de notre ligne et de nos modules précédemment conçus.
Ajoutons d'abord une nouvelle ligne à une colonne à notre section. Mettez ensuite à jour les paramètres de ligne avec les éléments suivants :
Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 1366px
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 2
Enregistrer les paramètres
Copiez ensuite le premier module de texte de la première ligne que vous avez créée qui contient le titre h1. Ensuite, mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
Remplacez la balise h1 actuelle par la suivante :
<h1>Don't Settle for Less</h1>
Sous l'onglet Conception…
Orientation du texte : Centre
Style d'animation : Retourner
Intensité de l'animation : 70 %
Enregistrer les paramètres
Ensuite, copiez le module de boutons de la ligne précédente et collez-le sous le module de texte que vous venez de terminer de mettre à jour dans la deuxième ligne. Mettez ensuite à jour le module de boutons comme suit :
Sous l'onglet Contenu…
Texte du bouton : Rejoindre aujourd'hui
Sous l'onglet Conception…
Alignement des boutons : Centre
Style d'animation : Retourner
Intensité de l'animation : 70 %
Enregistrer les paramètres
Maintenant pour notre dernière rangée. Créez une nouvelle ligne avec une structure moitié moitié colonne. Avant d'ajouter vos modules, mettez à jour les paramètres de ligne comme suit :
Sous l'onglet Conception…
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 2
Enregistrer les paramètres
Ensuite, copiez le module Blurb « Divi » violet de votre ligne précédente et collez-le dans la colonne de gauche de votre nouvelle ligne. Mettez ensuite à jour les paramètres suivants :
Sous l'onglet Contenu…
Titre : Constructeur
Icône : [sélectionnez une nouvelle icône]
Couleurs de dégradé d'arrière-plan : #ff568e, #ff3d5d
Sous l'onglet Avancé…
Remplacez le CSS dans la zone Élément principal par ce qui suit :
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
Enregistrer les paramètres
Copiez ensuite le module de présentation bleu-vert « Extra » en haut de la colonne la plus à droite de la première ligne que vous avez créée. Collez-le ensuite dans la colonne de droite de votre nouvelle troisième ligne.
Mettez ensuite à jour les paramètres du texte de présentation comme suit :
Sous l'onglet Contenu…
Titre : Serein
Icône : [sélectionnez une nouvelle icône]
Couleurs de dégradé d'arrière-plan : #3da4ff, #385eea
Sous l'onglet Avancé…
Remplacez le CSS dans la zone Élément principal par ce qui suit :
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
Enregistrer les paramètres
C'est ça.
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.
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_4.zip dans notre dossier de téléchargements. Décompressez-le pour révéler les importations suivantes.
Effets d'animation Partie 4 (section 1).json
Effets d'animation Partie 4 (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 vous avez aimé construire cette magnifique section ensemble. La combinaison de couleurs, d'ombres brillantes et d'animations créatives en fait une mise en page exceptionnelle pour présenter vos propres téléchargements ou produits.
À venir
Dans la partie 5, je vais vous montrer comment intégrer avec succès le style d'animation Roll aux téléphones portables dans vos sections.
J'ai hâte de vous entendre dans les commentaires ci-dessous.
À votre santé!