Comment ajouter facilement des animations CSS dans WordPress

Avez-vous vu ces belles animations CSS sur des sites populaires? Effets animés tels que glissement de contenu, fondu dans les zones de fonctions, images renvoyées, etc. Dans cet article, nous allons vous montrer comment ajouter facilement des animations CSS dans WordPress sans écrire de code.

Quand et pourquoi utiliser des animations CSS??

Les animations CSS vous permettent de capter l'attention de l'utilisateur sur différentes parties de la page..

Vous pouvez les utiliser pour animer des fonctionnalités du produit ou un bouton d'appel à l'action.

De nombreux sites Web utilisent des animations CSS lorsque les utilisateurs font défiler une page. Cela ajoute un élément de narration à la page, les éléments progressant lorsque les utilisateurs font défiler l'écran..

Les animations CSS sont également plus rapides que le flash ou les vidéos. Ils se chargent rapidement et sont pris en charge par la plupart des navigateurs Web modernes..

Vous pouvez ajouter manuellement des animations CSS à votre thème WordPress ou à la feuille de style de votre thème enfant. Cependant, la plupart des débutants ne veulent pas éditer leurs fichiers de thème ni passer du temps à apprendre le CSS.

Cela dit, voyons comment ajouter facilement des animations CSS à votre site WordPress.

Configuration de CSS Animate! Brancher

Nous allons utiliser un plugin pour ce tutoriel. Il vous permet de créer des animations CSS à l'aide d'un éditeur WYSIWYG..

La première chose à faire est d’installer et d’activer l’animation! brancher. Le plugin fonctionne hors de la boîte et il n'y a aucun paramètre à configurer pour vous.

Créez simplement un nouveau message et vous remarquerez un nouveau bouton dans votre éditeur visuel WordPress intitulé "Animate it!".

En cliquant sur le bouton, une fenêtre contextuelle apparaît pour vous permettre de concevoir votre animation CSS. Le plugin supporte de nombreuses animations CSS parmi lesquelles vous pouvez choisir.

Vous devez d'abord sélectionner un style d'animation. Après cela, vous devez choisir le délai et la durée de l'animation. Enfin, vous devez sélectionner le moment où vous souhaitez que l'animation apparaisse.

Le plugin offre trois choix. Vous pouvez exécuter l'animation sur clic, survol ou décalage de défilement.

Une fois que vous êtes satisfait des paramètres, vous pouvez cliquer sur le bouton Animer pour afficher un aperçu de l'animation..

Ensuite, cliquez sur le bouton Insérer pour ajouter l'animation dans votre publication ou page WordPress. Vous remarquerez que le plugin ajoutera un shortcode avec du contenu factice dans l'éditeur de publication.

Vous devez supprimer le contenu factice à l'intérieur du shortcode et le remplacer par votre propre contenu, vos images ou tout autre élément que vous souhaitez animer..

Maintenant que vous êtes en bas, cliquez pour enregistrer ou publier le message, puis cliquez sur le bouton Aperçu. Vous verrez votre contenu magnifiquement animé.

Nous espérons que cet article vous a aidé à apprendre à ajouter facilement des animations CSS dans WordPress. Vous voudrez peut-être aussi voir notre comparaison des 5 meilleurs constructeurs de pages WordPress par glisser / déposer.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.