Utiliser les animations de Divi pour déplier du contenu avec des images glissantes
Publié: 2017-10-12Bienvenue dans la partie 2 de cette série en 5 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 la première partie de notre série, nous avons créé les deux premières sections de la page de démonstration d'animation. La conception et l'animation de l'en-tête de la première section ont présenté une manière unique d'animer les éléments d'un module de texte à l'intérieur d'une section standard en plein écran. En créant la deuxième section, nous avons découvert un moyen d'incorporer des animations subtiles et harmonieuses à des rangées de contenu qui pourraient facilement être utilisées pour présenter du contenu sur une page de destination de manière attrayante.
Aujourd'hui, nous poursuivons notre voyage pour concevoir des mises en page de section qui utilisent l'animation de manière efficace (et créative) lors du défilement de la page. Nous allons construire les troisième et quatrième sections de notre page de démonstration en direct présentant la puissance des fonctionnalités d'animation de Divi. Ces deux sections ont des mises en page qui peuvent facilement être adoptées pour vos propres projets afin de présenter des produits ou des services.
Commençons.
Voici un aperçu de ce que nous allons construire dans le post d'aujourd'hui
Section 3
Section 4
Préparation des éléments de conception
Préparez vos images
Pour la troisième section, vous aurez besoin de deux images. Le premier doit être d'environ 880×600 et le second d'environ 790×880. Ces tailles d'image n'ont pas besoin d'être exactes. J'inclus juste ces dimensions pour vous donner une idée.
Lors de la construction de la quatrième section, vous aurez également deux images autour de 600×400.
Utiliser le constructeur visuel
Pas besoin de code avancé ici. Nous n'utiliserons que Visual Builder pour concevoir les deux prochaines sections de notre page que nous avons créées dans la première partie de cette série. Puisque votre page est déjà configurée, vous êtes prêt à partir.
Utiliser les animations de Divi pour déplier du contenu avec des images glissantes
Abonnez-vous à notre chaîne Youtube
Construction de la section 3 de la démo
La section 3 est un excellent exemple de la façon de concevoir et d'animer le module d'appel à l'action avec une image d'accompagnement.
Plongeons-nous.
À l'aide de Visual Builder, ajoutez une section régulière avec une ligne à deux colonnes. Dans la colonne de gauche ajoutez un module image.
Mettez à jour les paramètres de l'image comme suit :
Sous l'onglet Contenu…
URL de l'image : [insérez votre image 880 × 600]
Sous l'onglet Conception…
Forcer la pleine largeur : OUI
Style d'animation : diapositive
Direction de l'animation : Gauche
Intensité de l'animation : 20 %
Opacité de démarrage de l'animation : 100 %
Enregistrer les paramètres
Ajouter un module diviseur
Dans la colonne de droite, nous allons présenter notre contenu à l'aide du module diviseur et du module Call to Action. Le module de séparation sera utilisé pour ajouter une courte ligne de séparation au-dessus du texte.
Ajoutez un module diviseur dans la colonne de droite.
Ensuite, mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
Afficher le diviseur : OUI
Sous l'onglet Conception…
Couleur : #e4ca77
Poids du diviseur : 4px
Largeur : 80px (vous devez saisir cette valeur car la valeur par défaut est le pourcentage)
Alignement du module : par défaut (gauche)
Marge personnalisée : 60 pixels en haut, 0 pixels en bas
Style d'animation : Plier
Direction de l'animation : à droite
Durée de l'animation : 1200 ms
Délai d'animation : 50 ms
Intensité de l'animation : 70 %
Opacité de démarrage de l'animation : 0%
Enregistrer les paramètres
Ajouter un module d'appel à l'action
Sous le module diviseur, ajoutez un module d'appel à l'action avec les paramètres suivants :
Sous l'onglet Contenu…
Titre : "La vue parfaite"
Texte du bouton : « En savoir plus »
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi.
Relier: #
Utiliser la couleur d'arrière-plan : NON
Sous l'onglet Conception…
Couleur du texte : foncé
Orientation du texte : à gauche
Police d'en-tête : Lato, majuscule (TT)
Taille de la police d'en-tête : 38 px
Couleur du texte de l'en-tête : #0c0c0c
Espacement des lettres d'en-tête : 0,2 em
Hauteur de la ligne d'en-tête : 1.4em
Police de caractère : Lato
Taille de la police du corps : 18px
Couleur du corps du texte : #9e9e9e
Hauteur de la ligne du corps : 1,8 em
Utiliser des styles personnalisés pour le bouton : OUI
Taille du texte du bouton : 15 px
Couleur du texte du bouton : #000000
Couleur d'arrière-plan du bouton : rgba(225,225,225,0)
Largeur de la bordure du bouton : 0px
Espacement des lettres des boutons : 2px
Police des boutons : Lato, Gras (B), Majuscule (TT)
Icône du bouton : flèche vers la droite
Afficher uniquement l'icône au survol pour le bouton : NON
Espacement des lettres de survol des boutons : 0px
Style d'animation : Plier
Direction de l'animation : à droite
Durée de l'animation : 1200 ms
Délai d'animation : 50 ms
Intensité de l'animation : 70 %
Opacité de démarrage de l'animation : 0%
Enregistrer les paramètres
Cliquez maintenant pour modifier les paramètres de ligne et mettez à jour les éléments suivants :
Sous l'onglet Conception…
Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 1366px
Sous l'onglet Avancé…
Ajoutez le CSS personnalisé suivant à la zone Élément principal de la colonne 1 :
z-index: 999;
Enregistrer les paramètres
Dupliquez votre ligne et mettez-la à jour
C'est tout pour le premier rang. Pour gagner du temps lors de la création de la deuxième ligne, dupliquez la ligne que vous venez de créer.
Modifiez les paramètres de ligne dupliqués comme suit :
Sous l'onglet Avancé…
Retirez le CSS personnalisé dans l'élément principal de la colonne 1 et ajoutez-le à la zone Élément principal de la colonne 2:
z-index: 999;
Puisque notre image va être dans la colonne de droite, nous avons besoin que cette colonne reste au-dessus du texte qui s'anime à gauche.
Enregistrer les paramètres
Mettre à jour le module d'image et le module d'appel à l'action dans la deuxième rangée
Ensuite, faites glisser le module d'image vers la colonne de droite et faites glisser le module de séparation et le module d'appel à l'action vers la colonne de gauche.
Cette section va avoir une structure de colonne légèrement différente. Cliquez sur l'icône de ligne de modification de la structure de colonne (à côté de l'icône de ligne en double) et sélectionnez une disposition de colonne deux tiers un tiers.
Maintenant, tout ce que nous avons à faire est de revoir chacun des modules à l'intérieur de la rangée et d'apporter quelques modifications.
Tout d'abord, mettez à jour les paramètres du module Divider comme suit :
Sous l'onglet Conception…
Alignement du module : à droite
Direction de l'animation : Gauche
Enregistrer les paramètres
Mettez ensuite à jour les paramètres du module d'appel à l'action comme suit :
Titre : « Parle de lui-même »
Orientation du texte : à droite
Alignement du texte de l'en-tête : à droite
Largeur: 700px (tapez ceci)
Direction de l'animation : Gauche
Enregistrer les paramètres
Mettez ensuite à jour le module Image dans la colonne de droite avec votre nouvelle image 790 × 880.
C'est tout pour la section 3 !
Vérifiez votre résultat.
Construction de la section 4 de la démo
La section 4 amène la conception du module Image à un autre niveau avec quelques astuces CSS avancées. Et, empiler des modules de texte pour les plier sur une charnière se combine bien avec la livraison. Plongeons-nous.
À l'aide de Visual Builder, ajoutez une section régulière avec une ligne à deux colonnes (un demi-moitié). Avant d'ajouter notre premier module, ajoutons une couleur d'arrière-plan à notre section. Cliquez pour modifier les paramètres de la section.
Sous l'onglet Contenu, sélectionnez l'onglet Couleur d'arrière-plan et entrez la couleur #262938.
Enregistrer les paramètres
Ajouter le premier module de texte
Dans la colonne de gauche, ajoutez un module de texte et mettez à jour les paramètres de texte comme suit :
Sous l'onglet Contenu…
Entrez le code html suivant dans l'onglet texte de la zone de contenu :
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
Sous l'onglet Conception…
Couleur du texte : clair
Police d'en-tête : Playfair Display, en gras (B)
Taille de la police d'en-tête : 38 px
Hauteur de la ligne d'en-tête : 1,3 em
Marge personnalisée : 20 pixels en bas
Animation : plier
Direction de l'animation : vers le haut
Ajouter le deuxième module de texte
Ajoutez ensuite un autre module de texte directement sous le module de texte actuel. Ensuite, 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 : Plier
Direction de l'animation : vers le bas
Délai d'animation : 150 ms
Enregistrer les paramètres
Ajouter le module de boutons
Ajoutez un module de boutons sous le dernier module de texte et mettez à jour les paramètres comme suit :
Texte du bouton : en savoir plus
URL du bouton : #
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 : #ffffff
Rayon de la bordure du bouton : 0px
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 : vers le bas
Durée de l'animation : 1600 ms
Délai d'animation : 150 ms
Intensité de l'animation : 20 %
Enregistrer les paramètres
Ajouter un module d'image à la colonne de droite
C'est tout pour cette colonne. Maintenant, nous devons ajouter un module d'image dans la colonne de droite. Ensuite, mettez à jour les paramètres comme suit :
Sous l'onglet Contenu…
URL de l'image : [insérez votre image 600 × 400]
Sous l'onglet Conception…
Forcer la pleine largeur : OUI
Style d'animation : diapositive
Direction de l'animation : à droite
Délai d'animation : 800 ms
Intensité de l'animation : 20 %
Enregistrer les paramètres
Mettre à jour les paramètres de ligne
Cliquez maintenant pour modifier les paramètres de ligne et mettez à jour les éléments suivants :
Sous l'onglet Conception…
Utiliser la largeur personnalisée : OUI
Largeur personnalisée : 1366px
Rembourrage personnalisé : 27 pixels en haut, 0 pixels à droite, 170 pixels en bas, 0 pixels à gauche
Remplissage personnalisé de la colonne 1 : 6% en haut
Sous l'onglet Avancé…
Ajoutez le CSS personnalisé suivant à la zone Élément principal de la colonne 1 :
z-index: 999;
Ce CSS ajoute garantit que le texte reste au-dessus de l'image pendant l'animation.
Ajoutez ensuite le CSS personnalisé suivant à la zone Élément principal de la colonne 2 :
transform: scale(1.3); transform-origin: top right;
Ce CSS ajoute une conception intelligente pour augmenter (augmenter) la taille de tout dans la colonne 2 (l'image). La propriété transform origin indique à la colonne de se mettre à l'échelle à partir du coin supérieur droit de la ligne. Cela crée un léger chevauchement du texte à gauche et de l'image.
Enregistrer les paramètres
Dupliquer et mettre à jour votre ligne
Maintenant, tout comme nous l'avons fait dans la section 3, nous allons dupliquer la ligne. Après avoir dupliqué la ligne, faites glisser les 2 modules de texte et le module de boutons de la colonne de gauche vers la droite. Et faites glisser le module image de la colonne de droite vers la gauche. Il ne nous reste plus qu'à apporter quelques mises à jour mineures à notre ligne dupliquée et à son contenu.
Tout d'abord, mettons à jour les paramètres de ligne avec les éléments suivants :
Sous l'onglet Conception…
Rembourrage personnalisé : 40 pixels en haut, 0 pixels à droite, 40 pixels en bas, 0 pixels à gauche
Remplissage personnalisé de la colonne 1 : [restaurer par défaut ; effacer 6% Haut]
Rembourrage personnalisé de la colonne 2 : 6% en haut
Sous l'onglet Avancé…
Effacez le CSS personnalisé de la zone de l'élément principal de la colonne 1 et de la zone de l'élément principal de la colonne 2. Cela a été reporté de la duplication et nous n'en avons plus besoin.
Mettre à jour le module d'image
Ensuite, mettez à jour le module Image (maintenant dans la colonne de gauche) avec les éléments suivants :
Sous l'onglet Contenu…
URL de l'image : [insérez votre nouvelle image 600 × 400]
Sous l'onglet Conception…
Direction de l'animation : Gauche
Sous l'onglet Avancé…
Si vous pensiez que cette image était déjà floue. détrompez-vous ! Tout ce que vous avez à faire pour ajouter cet effet de flou est d'ajouter la ligne suivante de CSS personnalisé à la zone Élément principal :
filter: blur(5px) opacity(.6);
En plus de l'effet de flou, ce css rend également l'image semi-transparente avec une opacité de 60%.
Enregistrer les paramètres
Mettre à jour le module de texte dans la colonne de droite
En vous déplaçant vers la colonne de droite, mettez à jour le contenu du module de texte supérieur avec un en-tête h1 plus court :
<h1>Consectetur adipiscing elit</h1>
Enregistrer les paramètres
Et voila ! Nous avons tous terminé avec la section 4. Voyons notre résultat final.
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_2.zip dans notre dossier de téléchargements. Décompressez-le pour révéler les importations suivantes.
Effets d'animation Partie 2 (section 1).json
Effets d'animation Partie 2 (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
En plus de me donner un peu faim de glucides, cette section présente des moyens créatifs d'afficher et d'animer des images. De plus, les modules de texte se dépliant sur une charnière avec la glissière de bouton retardée incitent davantage l'utilisateur à cliquer sur le CTA.
À venir
Dans la troisième partie de cette série, je vais vous montrer une belle façon de concevoir et d'animer des modules de présentation. Cette disposition de section peut être utilisée à diverses fins. Je peux voir que c'est un moyen de présenter le processus de votre service ou une liste de vos services ou produits.
J'attends ça avec impatience.
N'oubliez pas de tendre la main dans les commentaires ci-dessous!