Téléchargez une section GRATUITE de Héros d'Animation Spatter Colorée pour Divi

La façon dont vous concevez la section héros de votre page définit les attentes pour le reste de votre page. Si vous concevez une page de destination qui célèbre quelque chose, qu'il s'agisse d'un anniversaire ou d'une vente, cela peut certainement aider à créer une ambiance festive dans votre conception. Une façon de l'aborder est d'ajouter une animation d'éclaboussures colorées à l'arrière-plan de votre section de héros. L'accent restera toujours sur la copie écrite et le CTA que vous fournissez. Dans ce tutoriel, nous allons vous montrer comment créer une belle section d'animation d'éclaboussures colorées avec les paramètres intégrés de Divi. 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

Téléchargez GRATUITEMENT la disposition de la section The Spatter Animation Hero

Pour mettre la main sur la mise en page gratuite de la section des héros d'animation par éclaboussures, vous devez d'abord la télécharger à l'aide du 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 !

Commençons à recréer !

Ajouter une nouvelle section

Fond dégradé

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et appliquez un fond dégradé de votre choix.

• Couleur 1 : #070a49
• Couleur 2: #6f00f7
• Type de dégradé : Linéaire
• Direction du gradient : 148 deg

Dimensionnement

Passez à l'onglet de conception de la section et ajoutez une hauteur minimale aux paramètres de dimensionnement. Cela transformera notre section en plein écran.

• Hauteur minimale : 100 vh

Espacement

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

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

Visibilité

Et pour nous assurer qu'aucune barre de défilement horizontale n'apparaît dans notre conception, nous masquerons les débordements de la section.

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

Ajouter la ligne n° 1

Structure des colonnes

Une fois les paramètres de section en place, ajoutez une première ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de la ligne et laissez la ligne toucher les côtés gauche et droit du conteneur de section en modifiant les paramètres de dimensionnement comme suit :

• 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

Élément principal CSS

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

display: flex;

Colonne 1 Animation

Une fois les paramètres de ligne généraux en place, ouvrez les paramètres de la colonne 1 et ajoutez une animation.

• Style d'animation : Zoom
• Direction d'animation : Centre
• Intensité de l'animation : 100 %

Animation de la colonne 2

Ajoutez ensuite une animation à la deuxième colonne.

• Style d'animation : Zoom
• Direction d'animation : Centre
• Délai d'animation : 250 ms
• Intensité de l'animation : 100 %

Colonne 3 Animation

Et nous utilisons également l'animation pour la troisième colonne.

• Style d'animation : Zoom
• Direction d'animation : Centre
• Délai d'animation : 500 ms
• Intensité de l'animation : 100 %

Ajouter un module d'image à la colonne 1

Télécharger une image d'éclaboussure

Il est temps d'ajouter des modules, en commençant par un module d'image dans la colonne 1. Téléchargez l'image de projection que vous pouvez trouver dans le dossier de téléchargement que vous avez pu télécharger au début de ce didacticiel.

Dimensionnement

Passez à l'onglet conception du module et forcez la pleine largeur dans les paramètres de dimensionnement.

• Forcer la pleine largeur : Oui

Filtres

Ensuite, changez les couleurs du module en utilisant les paramètres des filtres.

• Teinte: 303deg
• Saturation : 200%

Échelle de transformation

Nous mettons également l'image à l'échelle dans les paramètres de transformation.

• Bas : 150%
• À droite : 150 %

Effet de défilement de mouvement vertical

Ensuite, passez à l'onglet avancé et activez un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : 0
• Décalage moyen :
  • Ordinateur de bureau : 0 (à 50 %)
  • Tablette : 0 (à 70 %)
  • Téléphone : 0 (à 85 %)
• Décalage de fin : 2
• Déclencheur d'effet de mouvement : bas de l'élément

Effet de défilement de mouvement horizontal

Nous utilisons également un mouvement horizontal.

• Activer le mouvement horizontal : Oui
• Décalage de départ :
  • Bureau : -10
  • Tablette et téléphone : 0
• Décalage moyen : 0
• Décalage de fin : 4
• Déclencheur d'effet de mouvement : bas de l'élément

Mise à l'échelle de l'effet de défilement vers le haut et vers le bas

Avec un effet de mise à l'échelle vers le haut et vers le bas.

• Activer la mise à l'échelle vers le haut et vers le bas : Oui
• Échelle de départ : 100 %
• Échelle moyenne : 150 %
• Échelle de fin : 200 %
• Déclencheur d'effet de mouvement : bas de l'élément

Cloner le module d'image deux fois et placer les doublons dans les colonnes restantes de la ligne

Une fois le premier module image terminé, vous pouvez cloner le module entier deux fois et placer les doublons dans les colonnes restantes de la ligne.

Modifier le module d'image dans la colonne 2

Espacement

Ouvrez le module Image dans la colonne 2 et ajoutez une marge supérieure sur la tablette et le téléphone.

• Marge supérieure : 50 % (tablette et téléphone uniquement)

Filtres

Modifiez également la teinte dans les paramètres des filtres.

• Teinte: 55deg

Modifier le module d'image dans la colonne 3

Filtres

Ensuite, ouvrez le module Image dans la troisième colonne et modifiez les paramètres des filtres en conséquence :

• Teinte: 309deg
• Luminosité : 0%

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Utilisez la structure de colonnes suivante :

Position

Ouvrez les paramètres de ligne et modifiez les paramètres de position de la ligne dans l'onglet avancé.

• Position : Absolu
• Lieu : Centre

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H1

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

Paramètres de texte H1

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

• Police de titre : Rubik
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 80px (ordinateur de bureau), 50px (tablette), 35px (téléphone)

• Longueur verticale de l'ombre du texte de l'en-tête : 0,08 em
• Intensité du flou d'ombre du texte de l'en-tête : 0em
• Couleur de l'ombre du texte de l'en-tête : #1a005b

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Ensuite, ajoutez un autre module de texte avec un contenu de description.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Muli
• Couleur du texte : #dddddd
• Taille du texte : 15 pixels (ordinateur de bureau), 14 pixels (tablette et téléphone)
• Hauteur de la ligne de texte : 2,1 em

• Couleur de l'ombre du texte : #1a005b

Dimensionnement

Modifiez ensuite la largeur du module.

• Largeur : 60 % (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Et complétez les paramètres du module en ajoutant des marges supérieure et inférieure sur différentes tailles d'écran.

• Marge supérieure : 6 % (ordinateur de bureau), 10 % (tablette), 14 % (téléphone)
• Marge inférieure : 6 % (ordinateur de bureau), 10 % (tablette), 14 % (téléphone)

Ajouter un module de bouton à la colonne

Ajouter une copie

Le dernier module dont nous avons besoin dans notre colonne est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Ensuite, passez à l'onglet Conception et stylisez le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 17px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #ea01a6
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

• Police des boutons : Rubik
• Poids de la police du bouton : gras
• Style de police des boutons : majuscules

Espacement

Ajoutez également des valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 60px
• Rembourrage droit : 60 px

Boîte ombre

Et complétez les paramètres du module en ajoutant une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 5px
• Position verticale de l'ombre de la boîte : 5px
• Couleur de l'ombre : #30005b

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 d'animation et de défilement intégrés de Divi. Plus précisément, nous vous avons montré comment créer une section de héros d'animation d'éclaboussures colorées pour une page de destination que vous configurez pour une occasion spéciale. Cette occasion peut être, sans s'y limiter, l'anniversaire de votre entreprise ou une vente spéciale. 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.