Comment ajouter des effets d'animation aux sections/lignes dans Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment ajouter des effets d'animation aux sections et aux lignes dans Divi. Le thème Divi lui-même fournit des effets d'animation pertinents qui vous aident à apporter un niveau d'interaction supplémentaire à votre site Web. Ces effets sont faciles à attribuer à une image au sein de votre Divi Builder dans la sous-catégorie Animation de l'onglet Avancé.

Cependant, si vous cherchez un moyen d'ajouter ces effets d'animation à d'autres modules, sections ou lignes de votre site Web, c'est également possible. Dans cet article, nous allons vous montrer exactement comment procéder. En plus de vous montrer comment ajouter les effets d'animation intégrés, nous vous montrerons également comment intégrer wow.js et animate.css dans votre site Web Divi.

À la fin de cet article, vous pourrez ajouter de jolis effets à la fois à vos lignes et à vos sections. Pour vous aider à visualiser le processus, nous aimerions partager l'exemple suivant (que nous vous montrerons comment réaliser à la fin de cet article) :

Animations Divi ou Wow.js & Animate.css ?

Vous vous demandez probablement dans quels cas vous devriez envisager d'utiliser les animations Divi et dans quels cas wow.js & animate.css feraient mieux le travail. Bien que l'utilisation de l'animation intégrée à Divi soit la solution la plus simple si vous ne cherchez pas à créer des effets d'animation avancés, les effets wow.js et animate.css apporteront également une grande valeur ajoutée à votre site Web.

Quand utiliser les animations Divi

Il existe cinq effets d’animation disponibles dans Divi que vous pouvez utiliser :

• Le fondu enchaîné
• La diapositive du bas
• Le coulisseau de gauche
• La bonne glissade
• Le haut coulissant

Bien qu'il n'y ait que cinq possibilités, ce sont aussi les plus fréquemment utilisées. Ils sont simples et directs. Si vous souhaitez donner un bel effet supplémentaire à votre site Web, sans trop d'efforts, les effets d'animation Divi sont la voie à suivre. Chacun de ces effets est activé à partir du moment où vous faites défiler et avez une vue du module, de la ligne ou de la section auquel vous avez ajouté l'effet. Ainsi, vos visiteurs ne passeront pas à côté des effets qui se trouvent en bas de page par exemple.

Pour intégrer les effets d'animation Divi, vous n'avez pas besoin d'avoir un thème enfant téléchargé sur votre site web. Vous pouvez facilement ajouter ces effets tout en travaillant sur le thème parent.

Quand utiliser Wow.js et Animate.css

L'intégration de wow.js et d'animate.css dans votre site Web est quelque chose que vous aimerez probablement beaucoup en raison des nombreuses options dont vous disposez. Il existe 14 catégories d'effets d'animation qui contiennent différents effets pertinents pour cette catégorie. Les catégories parmi lesquelles vous pouvez choisir sont les suivantes :

• Chercheurs d'attention
• Entrées rebondissantes
• Sorties rebondissantes
• Entrées décolorées
• Sorties décolorées
• Palmes
• Vitesse de la lumière
• Entrées tournantes
• Sorties tournantes
• Entrées coulissantes
• Sorties coulissantes
• Zoom Entrées
• Zoom Quitter
• Promotions

Vous pouvez visualiser tous les effets disponibles en cliquant sur le lien suivant. Ces effets d'animation apparaissent également lors du défilement.

Comment ajouter des effets d'animation aux sections/lignes dans Divi

Abonnez-vous à notre chaîne Youtube

Utilisez les effets d'animation intégrés

La première possibilité que nous allons vous montrer concerne les effets d'animation intégrés. Nous allons vous montrer comment appliquer les effets à la fois à une section et à une ligne. Ouvrez la page sur laquelle vous souhaitez apporter les modifications.

Dans notre exemple, nous allons ajouter les effets d'animation à la première section et à la première ligne de notre page. L'ajout de l'animation pour la section ou la ligne est dans les deux cas le même. Les codes de classe CSS pour les différents effets d'animation sont les suivants :

• Classe CSS de fondu enchaîné : et-waypoint et_pb_animation_fade_in
• Classe CSS coulissante du bas : et-waypoint et_pb_animation_bottom
• Classe CSS coulissante gauche : et-waypoint et_pb_animation_left
• Slide-in de droite : classe CSS : et-waypoint et_pb_animation_right
• Top classe CSS coulissante : et-waypoint et_pb_animation_top

Ajouter un effet d'animation à la ligne

Pour ajouter l'animation à une certaine ligne, ouvrez les paramètres de cette ligne et accédez à l'onglet Avancé. Dans l'onglet Avancé, placez la classe CSS de l'effet d'animation dans le champ Classe CSS. Dans ce cas, nous allons vous montrer comment ajouter l'animation de fondu d'entrée.

Ajouter un effet d'animation à la section

La même méthode pour vous d'ajouter un effet d'animation à une ligne s'applique également à une section. Allez dans l'onglet Avancé et placez la classe CSS de l'effet d'animation de votre choix dans le champ Classe CSS. Dans cet exemple, nous allons vous montrer comment ajouter l'effet d'animation de glissement supérieur.

Le résultat

Une fois que vous avez ajouté les effets à votre section et à votre ligne, vous verrez le résultat suivant se mettre en place :

Ajoutez Wow.js et Animate.css à votre thème enfant

Dans cette prochaine partie, nous allons vous montrer comment ajouter wow.js et animate.css à votre site WordPress et comment l'utiliser tout au long de votre thème Divi.

Tout d'abord, je tiens à remercier Jeremy Cookson pour cet article sur la façon d'intégrer wow.js et animate.css dans WordPress. Dans cette partie de l'article, nous vous montrerons exactement comment réaliser l'intégration pour un site Web WordPress construit avec le thème Divi.

Pour ajouter wow.js et animate.css à votre page Web, vous devrez utiliser un thème enfant sur votre site Web. Si vous vous demandez comment créer un thème enfant, consultez cet article. Après avoir créé les fichiers principaux de votre thème enfant, vous devrez ajouter deux autres fichiers pour compléter votre thème enfant avec les effets d'animation.

Téléchargez les fichiers et ajoutez-les à votre thème enfant

Gardez votre thème enfant à portée de main et téléchargez en attendant les deux fichiers suivants en cliquant sur les deux liens suivants :

• animer.min.css
• wow.min.js

Une fois que vous avez téléchargé les deux fichiers, créez des sous-dossiers dans votre thème enfant. Nommez l'un d'eux CSS et l'autre JS. Après cela, placez le animate.min.css dans le dossier CSS et le wow.min.js dans le dossier JS.

Télécharger le thème enfant

La prochaine chose que vous devrez faire est de télécharger et d'activer le thème enfant auquel vous venez d'ajouter le wow.js et l'animate.css. Accédez à votre tableau de bord WordPress > Apparence > Thèmes > Et cliquez sur « Ajouter un nouveau » en haut de la page.

Ajouter du code PHP à votre fichier Functions.php

Une fois que vous avez téléchargé le thème enfant, ajoutez les lignes de code PHP suivantes au fichier functions.php de votre thème enfant :

//* Mettre en file d'attente Animate.CSS et WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
fonction sk_enqueue_scripts() {
wp_enqueue_style( 'animer', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* Script de mise en file d'attente pour activer WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init' );}
//* Ajout de JavaScript avant </body>function wow_init() { ?>
<type de script="texte/javascript">
nouveau WOW().init(); </script><?php }

Ajouter des animations aux lignes et aux sections

Le système d'ajout des effets wow.js et animate.css aux lignes et sections est le même que pour les effets d'animation Divi. Vous devrez ouvrir les paramètres de la ligne ou de la section à laquelle vous souhaitez ajouter l'effet d'animation. Ensuite, vous pouvez placer la classe CSS attribuée à l'animation dans le champ Classe CSS de votre section ou ligne.

Ajouter une animation à la ligne

Pour l'exemple que nous allons vous montrer avec la ligne, nous utilisons l'effet fadeInRight que nous avons trouvé dans la liste des effets d'animation. Accédez à l'onglet Avancé de vos paramètres de ligne et ajoutez le « wow fadeInRight » au champ Classe CSS. Chaque fois que vous souhaitez ajouter un effet à une partie de votre site Web, assurez-vous de mettre « wow » devant l'effet que vous utilisez.

Résultat

Lorsque vous avez ajouté la classe CSS et prévisualisé la page sur laquelle vous travaillez, vous devriez avoir obtenu le résultat suivant :

Ajouter une animation à la section

La même méthode s'applique à l'ajout d'un effet d'animation à une section. Allez dans l'onglet Avancé et ajoutez la classe CSS 'wow bounceInDown' au champ Classe CSS de votre section.

Résultat

Si vous avez bien suivi toutes les étapes, vous devriez obtenir le résultat suivant :

Options avancées

Si vous souhaitez ajouter des spécifications supplémentaires à votre animation, vous pouvez également le faire. Vous pouvez, par exemple, ajouter un temps de retard à l'un de vos effets d'animation. Cela peut s'avérer utile lorsque vous combinez une animation de section avec une animation de ligne au sein de cette même section. De cette façon, vous vous assurez que les effets d'animation ne se chevauchent pas.

Pour vous montrer comment ajouter ce temps de retard, nous allons combiner les deux effets que nous avons utilisés dans la partie précédente de cet article. Un effet d'animation est affecté à la section et l'autre à la ligne. Pour nous assurer que l'effet d'animation de ligne ne se perd pas, nous allons lui ajouter un délai de 2 secondes.

Ouvrez les paramètres de ligne et revenez à l'onglet Avancé. Dans le champ Classe CSS, ajoutez une autre classe appelée « retard ». Cette classe n'existe pas encore mais nous sommes sur le point de l'ajouter dans notre prochaine étape.

Maintenant, ajoutez la classe CSS delay aux paramètres de la page sur laquelle vous travaillez en cliquant sur le bouton suivant :

Ensuite, ajoutez la classe CSS avec les lignes de code CSS au champ CSS personnalisé. Si vous souhaitez ajouter un délai de 2 secondes, comme nous allons le faire dans cet exemple, vous aurez besoin des lignes de code CSS suivantes :

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Résultat

Une fois que vous avez ajouté le temps de retard, le résultat devrait ressembler à ceci :

Dernières pensées

Dans cet article, nous vous avons montré comment ajouter des effets d'animation à votre site Web Divi. Nous vous avons proposé deux possibilités. Le premier vous montre comment utiliser les effets d'animation standards fournis par Divi. La deuxième possibilité vous permet d'intégrer wow.js et animate.css. L'utilisation d'effets d'animation sur votre site Web peut vous aider à mettre en valeur le contenu que vous souhaitez partager avec vos visiteurs. En plus de cela, il a également fière allure. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section des commentaires ci-dessous.

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Stocker top / shutterstock.com