Comment créer un beau contour animé pour chaque conteneur avec Divi

Les options d'animation de Divi ont contribué à donner vie à des tonnes de sites Web sans avoir besoin de code personnalisé. Les paramètres d'animation intégrés sont hautement réglables et vous permettent de créer des designs vraiment uniques. L'une des choses que vous pouvez faire, par exemple, est de créer un contour de conteneur animé. C'est exactement ce que nous allons vous montrer dans cet article. Nous allons ajouter une bordure à chaque conteneur et ajouter des paramètres d'animation qui correspondent au flux de chaque élément. 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 toutes les tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page du contour animé

Pour mettre la main sur la mise en page du contour animé gratuit, vous devrez 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez et utilisez une couleur d'arrière-plan blanche.

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

Espacement

Passez à l'onglet Conception et ajoutez des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 3vw
• Marge inférieure : 3vw
• Marge gauche : 3vw
• Marge droite : 3vw
• Rembourrage supérieur : 3vw
• Rembourrage inférieur : 3vw

Frontière

Ouvrez ensuite les paramètres de bordure et ajoutez « 2vw » à chacun des coins. Utilisez également une bordure.

• Largeur de la bordure : 1px
• Couleur de la bordure : #000000

Animation

Ajoutez également une animation personnalisée.

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Opacité de démarrage de l'animation : 100 %

Visibilité

Pour nous assurer que rien ne dépasse le conteneur de section, nous allons masquer les débordements dans les paramètres de visibilité de la section.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

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

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 3vw
• Rembourrage inférieur : 3vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

Frontière

Passez aux paramètres de bordure et ajoutez « 2vw » à chacun des coins. Ajoutez également une bordure.

• Largeur de la bordure : 1px
• Couleur de la bordure : #000000

Animation

Nous ajoutons également une animation à la ligne.

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Délai d'animation : 500 ms
• Opacité de démarrage de l'animation : 100 %

Visibilité

Et pour s'assurer que l'animation de colonne (que nous ajouterons plus tard) fonctionne, nous allons rendre visibles les débordements de lignes.

• Débordement horizontal : Visible
• Débordement vertical : visible

Paramètres de la colonne 1

Continuez en ouvrant les paramètres de la première colonne.

Frontière

Allez dans l'onglet design, ajoutez '2vw' à chacun des coins et utilisez une bordure.

• Largeur de la bordure : 1px
• Couleur de la bordure : #000000

Animation

Complétez les paramètres de la colonne en ajoutant une animation personnalisée.

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Délai d'animation : 1000 ms
• Opacité de démarrage de l'animation : 100 %

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Le premier dont nous avons besoin est un module Blurb. Entrez un contenu de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres des icônes

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

• Couleur de l'icône : #000000
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 6vw (ordinateur de bureau), 8vw (tablette), 10vw (téléphone)

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

• Police du titre : Poppins
• Poids de la police du titre : ultra gras
• Alignement du texte du titre : Centre
• Taille du texte du titre : 1.2vw (ordinateur de bureau), 2.5vw (tablette), 3vw (téléphone)

Paramètres du corps du texte

Avec les paramètres du corps du texte.

• Police du corps : Open Sans
• Alignement du corps du texte : Centre
• Taille du corps du texte : 0.8vw (ordinateur de bureau), 1.7vw (tablette), 2.3vw (téléphone)

Espacement

Créez de l'espace autour du module Blurb en ajoutant des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge supérieure : 3vw
• Marge inférieure : 3vw
• Marge gauche : 3vw
• Marge droite : 3vw
• Rembourrage supérieur : 10vw (ordinateur de bureau), 18vw (tablette et téléphone)
• Rembourrage inférieur : 10vw (ordinateur de bureau), 18vw (tablette et téléphone)
• Rembourrage gauche : 2vw (ordinateur de bureau), 8vw (tablette et téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 8vw (tablette et téléphone)

Frontière

Passez aux paramètres de bordure, ajoutez « 2vw » à chacun des coins et utilisez une bordure.

• Largeur de la bordure : 1px
• Couleur de la bordure : #000000

Animation

Complétez la conception du module Blurb en ajoutant une animation personnalisée.

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Durée de l'animation : 1300 ms
• Délai d'animation : 1200 ms
• Intensité de l'animation : 60 %
• Opacité de démarrage de l'animation : 100 %
• Animation d'icône : aucune animation

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Passons au module suivant et dernier, qui est un module de bouton. Entrez une copie de votre choix.

Alignement

Passez à l'onglet Conception et modifiez l'alignement.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez ensuite les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0,8 vw (ordinateur de bureau), 1,5 vw (tablette), 2,2 vw (téléphone)
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 1px
• Couleur de la bordure du bouton : #000000
• Rayon de bordure de bouton: 50vw
• Police des boutons : Open Sans
• Poids de la police du bouton : ultra gras
• Style de police des boutons : majuscule

Espacement

Et façonnez le module de boutons en utilisant des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge supérieure : -5vw (ordinateur de bureau), -6,5vw (tablette), -7vw (téléphone)
• Marge inférieure : 2vw (ordinateur de bureau), 3vw (tablette et téléphone)
• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Rembourrage gauche : 5vw (ordinateur de bureau), 8vw (tablette et téléphone)
• Rembourrage droit : 5vw (ordinateur de bureau), 8vw (tablette et téléphone)

Animation

Complétez la conception du module de boutons en ajoutant une animation personnalisée.

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Délai d'animation : 1400 ms
• Intensité de l'animation : 200 %
• Opacité de démarrage de l'animation : 100 %

Supprimer la colonne 2 et cloner la colonne 1

Une fois que vous avez terminé la colonne 1 et les modules qu'elle contient, vous pouvez supprimer la deuxième colonne (vide) et cloner la première. Modifiez tout le contenu du module Blurb pour qu'il corresponde à votre site Web et le tour est joué !

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 utiliser les paramètres d'animation de Divi en combinaison avec les différents conteneurs que Divi vous fournit et leurs paramètres de bordure. Nous espérons que ce tutoriel vous inspirera également pour créer vos propres variantes de cette technique ! Si vous avez des questions, assurez-vous de 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.