Comment créer une animation d'enveloppe avec les effets de défilement de Divi

Chaque fois qu'une nouvelle fonctionnalité Divi sort, nous essayons de partager des tutoriels sympas et utiles qui vous aideront à sortir des sentiers battus et à faire preuve de créativité avec Divi. Le tutoriel d'aujourd'hui fait exactement cela. Nous allons vous montrer comment créer une animation d'enveloppe réactive avec les effets de défilement de Divi. C'est un excellent moyen de mettre l'accent sur un bloc d'appel à l'action, par exemple, mais vous pouvez également l'utiliser à d'autres fins. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Abonnez-vous à notre chaîne Youtube

Téléchargez la mise en page d'animation de l'enveloppe GRATUITEMENT

Pour mettre la main sur la mise en page d'animation d'enveloppe gratuite, vous devrez d'abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

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 !

Recréer la structure des éléments

Ajouter une nouvelle section au milieu ou au bas de la page

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section quelque part au milieu ou en bas de votre page. Ouvrez les paramètres de la section et changez la couleur d'arrière-plan en blanc.

• Couleur d'arrière-plan : #FFFFFF

Espacement

Modifiez ensuite les paramètres d'espacement.

• Rembourrage supérieur : 5vw
• Rembourrage inférieur : 0px

Débordements

Et masquer les débordements de section.

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #FFFFFF

Dimensionnement

Passez ensuite à l'onglet de conception de la ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur: 90%
• Largeur maximale : 100 %

Espacement

Ensuite, ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 14vw (ordinateur de bureau), 11vw (tablette et téléphone)
• Rembourrage inférieur : 14vw (ordinateur de bureau), 11vw (tablette et téléphone)
• Rembourrage gauche : 20 vw (ordinateur de bureau), 10 vw (tablette et téléphone)
• Rembourrage droit : 20 vw (ordinateur de bureau), 10 vw (tablette et téléphone)

Frontière

Ajoutez également un rayon de bordure.

• Tous les coins : 20px

Boîte ombre

Nous utilisons également une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 38 px
• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.08)

Indice Z

Complétez les paramètres de ligne en augmentant l'index z dans l'onglet avancé.

• Indice Z : 11

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un premier module de texte. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

Modifiez les paramètres de texte H2 du module comme suit :

• Police de la rubrique 2 : Poppins
• Titre 2 Taille du texte : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du précédent et insérez le contenu de description de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte.

• Police de texte : Open Sans
• Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Hauteur de la ligne de texte : 2,6 em

Espacement

Ajoutez également des valeurs haut et bas personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Ajouter un module de bouton à la colonne

Ajouter une copie

Le prochain et dernier module que nous placerons dans cette rangée est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Ensuite, stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #0f33ff
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 100 pixels
• Police des boutons : Poppins

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)

Ajouter la ligne n° 2

Structure des colonnes

Maintenant que la ligne d'appel à l'action est en place, il est temps de commencer à créer la forme de l'enveloppe. Pour ce faire, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Laissez la rangée occuper toute la largeur de la section en modifiant les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Affichage

Et pour nous assurer que les colonnes apparaissent côte à côte sur des écrans plus petits, nous allons ajouter une ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter un module d'image à la colonne 1

Laisser la zone d'image vide

Ajoutez un module d'image à la colonne 1 et laissez la zone d'image vide.

Fond dégradé

Au lieu de cela, nous utilisons un arrière-plan dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #e8e8e8
• Type de dégradé : Linéaire
• Direction du gradient : 150 deg
• Position de départ : 50 %
• Position finale : 50 %

Espacement

Modifiez les valeurs de remplissage du module en conséquence :

• Rembourrage supérieur : 15vw
• Rembourrage inférieur : 15vw

Cloner le module d'image dans la colonne 1 et placer le doublon dans la colonne 2

Une fois que vous avez terminé le module Image dans la colonne 1, vous pouvez cloner le module entier et placer le doublon dans la colonne 2.

Changer le fond dégradé

Modifiez l'arrière-plan dégradé comme suit :

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #efefef
• Type de dégradé : Linéaire
• Direction du gradient : 210 degrés
• Position de départ : 50 %
• Position finale : 50 %

Ajouter la ligne n° 3

Structure des colonnes

Pour créer le bas de l'enveloppe, nous aurons besoin d'une autre ligne avec la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Affichage

Et permettez aux deux colonnes d'apparaître l'une à côté de l'autre en ajoutant une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Indice Z

Complétez les paramètres de ligne en augmentant l'index z dans l'onglet avancé.

• Indice Z : 12

Ajouter un module d'image à la colonne 1

Laisser la zone d'image vide

Ajoutez un module d'image à la colonne 1 et, encore une fois, laissez la zone d'image vide.

Fond dégradé

Utilisez plutôt un fond dégradé.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #efefef
• Type de dégradé : Linéaire
• Direction du gradient : 213 degrés
• Position de départ : 40 %
• Position finale : 40 %

Espacement

Et augmentez la taille du module en ajoutant un rembourrage supérieur et inférieur.

• Rembourrage supérieur : 20vw
• Rembourrage inférieur : 20vw

Cloner le module d'image dans la colonne 1 et placer le doublon dans la colonne 2

Une fois que vous avez terminé le module Image dans la colonne 1, vous pouvez le cloner et placer le doublon dans la colonne 2.

Changer le fond dégradé

Assurez-vous de modifier l'arrière-plan dégradé du doublon.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #e8e8e8
• Type de dégradé : Linéaire
• Direction du gradient : 147 degrés
• Position de départ : 40 %
• Position finale : 40 %

Ajouter un mouvement vertical à la rangée n° 1

Maintenant, la dernière partie pour faire fonctionner l'animation de l'enveloppe consiste à ajouter un effet de défilement vertical réactif à la première ligne de votre section et vous avez terminé !

• Activer le mouvement vertical : Oui
• Décalage de départ :
  • Ordinateur de bureau : 0 (à 68 %)
  • Comprimé : 0,5 (à 61 %)
  • Téléphone : 0,5 (à 43 %)
• Décalage moyen :
  • Ordinateur de bureau : 6,5 (à 81 %)
  • Tablette et téléphone : 21,5 (à 82 %)
• Décalage de fin :
  • Ordinateur de bureau : 16 (à 95 %)
  • Tablette et téléphone : 21,5 (à 82 %)

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les effets de défilement de Divi. Plus précisément, nous vous avons montré comment créer une animation d'enveloppe. Vous pouvez utiliser cette animation pour de nombreux types de choses, pour mettre en évidence votre bloc CTA par exemple. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.