Comment ajouter facilement des animations CSS dans WordPress

Au fil des ans, nous avons expérimenté différentes façons de rendre les sites Web WordPress plus interactifs. Si vous cherchez à attirer l'attention de vos visiteurs, les animations peuvent être très efficaces.

Vous pouvez utiliser des animations pour attirer l'attention d'un visiteur et mettre en évidence le contenu le plus important d'une page. Cela peut également encourager les clients à cliquer sur vos boutons d'appel à l'action et vos liens.

Heureusement, il est également facile de configurer des animations dans WordPress, même si vous ne savez pas coder.

Dans ce tutoriel, nous vous montrerons comment ajouter facilement des animations CSS dans WordPress.

Pourquoi ajouter des animations CSS dans WordPress ?

Vous pouvez utiliser des animations CSS pour attirer l'attention du visiteur sur différentes parties d'une page. Par exemple, si vous avez une boutique en ligne, les animations peuvent mettre en évidence les caractéristiques les plus importantes d'un produit ou ses arguments de vente les plus solides. Cela peut améliorer l'expérience utilisateur et augmenter les ventes.

Les animations feront également ressortir vos CTA, ce qui peut vous aider à atteindre un objectif spécifique, comme inciter plus de personnes à s'abonner à votre newsletter par e-mail.

Vous pouvez ajouter des animations CSS à la feuille de style de votre thème WordPress ou de votre thème enfant. Cependant, cela demande beaucoup de temps et d'efforts, et si vous faites une erreur, cela peut casser le design de votre site Web, voire sa fonctionnalité.

Cela dit, voyons comment vous pouvez facilement ajouter des animations CSS à votre site WordPress. Si vous préférez passer directement à une méthode particulière, vous pouvez utiliser les liens ci-dessous :

• Méthode 1 : Comment animer facilement n'importe quel bloc WordPress (rapide et facile)
• Méthode 2 : Comment ajouter des animations CSS à des pages personnalisées (recommandé)

Méthode 1 : Comment animer facilement n'importe quel bloc WordPress (rapide et facile)

Le moyen le plus simple d'ajouter une animation CSS simple est d'utiliser Blocks Animation.

Ce plugin d'animation gratuit vous permet d'ajouter une animation d'entrée à n'importe quel bloc sans avoir à écrire une seule ligne de CSS. Il dispose également d'une animation de frappe et d'un effet de style ticker que vous pouvez ajouter au texte et aux nombres.

Tout d'abord, vous devrez installer et activer le plugin gratuit Blocks Animation. Si vous avez besoin d'aide, veuillez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, ouvrez n'importe quelle page ou publication dans l'éditeur de blocs WordPress. Ensuite, cliquez simplement sur le bloc que vous souhaitez animer et sélectionnez l'onglet « Bloc » dans le menu de droite.

Vous verrez que ce menu a une nouvelle section « Animations ».

Cliquez simplement pour développer la section « Animations », et vous verrez trois options différentes : Animations, Animations de comptage et Animations de frappe.

Les « Animations » sont des effets courts qui se jouent une fois au chargement de la page. Pour ajouter ce type d'animation d'entrée à votre blog WordPress, cliquez simplement sur le menu déroulant à côté de « Animation ».

Cela ouvre un menu où vous pouvez choisir l'animation que vous souhaitez utiliser.

L'éditeur WordPress affichera un aperçu de l'animation, vous pouvez donc essayer différentes options pour voir ce qui rend le mieux.

Par défaut, l'animation d'entrée sera lue dès le chargement de la page, mais vous pouvez ajouter un délai si vous préférez. Si vous utilisez plusieurs animations sur la même page, vous pouvez même utiliser des délais pour les décaler afin qu'elles ne soient pas écrasantes.

Ouvrez simplement le menu déroulant « Délai » et choisissez une heure dans la liste.

Vous pouvez également rendre l'animation plus rapide ou plus lente en utilisant le menu déroulant « Vitesse ».

Lorsque vous essayez différents réglages, vous pouvez prévisualiser l'animation à tout moment en cliquant sur « Rejouer l'animation ».

Le plugin propose également des « Animations de comptage » et des « Animations de frappe ».

Les animations de frappe vous permettent d'animer du texte, tandis que les animations de comptage ajoutent un effet de style compteur aux nombres. Ces animations fonctionnent avec n'importe quel bloc Gutenberg qui prend en charge le texte ou les nombres, vous pouvez donc les utiliser pour animer des boutons, des légendes d'images, des titres, et plus encore.

Pour ajouter l'un de ces effets, commencez par surligner le texte ou les nombres que vous souhaitez animer. Ensuite, cliquez sur la flèche vers le bas dans la petite barre d'outils.

Vous pouvez maintenant choisir « Animations de comptage » ou « Animations de frappe » dans le menu déroulant.

Si ces options sont grisées, assurez-vous d'avoir surligné le bon contenu. Par exemple, vous ne pourrez pas sélectionner « Animation de comptage » si vous n'avez surligné que du texte.

Après avoir ajouté l'animation, vous pouvez utiliser les menus déroulants dans la petite fenêtre contextuelle pour modifier la vitesse et ajouter un délai facultatif.

Par exemple, dans l'image suivante, nous utilisons un délai d'une seconde.

Lorsque vous êtes prêt à rendre l'animation CSS active, cliquez sur le bouton « Publier » ou « Mettre à jour » pour appliquer les animations sur votre site. Maintenant, si vous visitez votre site Web WordPress, vous verrez l'animation en direct.

Méthode 2 : Comment ajouter des animations CSS à des pages personnalisées (recommandé)

Si vous souhaitez ajouter des animations simples aux blocs intégrés de WordPress, alors Blocks Animation est un bon choix. Cependant, si vous voulez vraiment attirer l'attention des visiteurs, les faire rester sur votre site Web et obtenir plus de conversions, alors nous vous recommandons d'utiliser SeedProd.

SeedProd est le meilleur plugin de création de pages qui vous permet de créer de magnifiques pages de destination, des pages de vente, une page d'accueil, et plus encore, à l'aide d'un simple éditeur par glisser-déposer.

Il est également doté d'un bloc « Titre animé » que vous pouvez utiliser pour créer des titres animés rotatifs et mis en surbrillance.

Malgré son nom, vous pouvez utiliser le bloc Titre animé pour animer n'importe quel texte, y compris un appel à l'action, un sous-titre ou tout autre texte que vous souhaitez mettre en valeur.

SeedProd est également livré avec plus de 40 animations d'entrée que vous pouvez ajouter à n'importe quel bloc, y compris des images, du texte, des boutons, des vidéos, et plus encore.

Vous pouvez même animer des sections et des colonnes entières en quelques clics. De cette façon, vous pouvez créer des pages animées attrayantes en quelques minutes.

Si vous utilisez des animations pour augmenter les conversions et les ventes, SeedProd s'intègre à WooCommerce. Il prend également en charge de nombreux services de marketing par e-mail que vous utilisez peut-être déjà pour promouvoir votre site Web.

Comment configurer le constructeur de pages SeedProd

La première chose à faire est d'installer et d'activer SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez saisir votre clé de licence.

Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après avoir ajouté la clé de licence, cliquez simplement sur « Vérifier la clé ».

Créer un design de page personnalisé

Pour commencer, allez dans SeedProd » Pages de destination et cliquez sur « Ajouter une nouvelle page de destination ».

Sur l'écran suivant, il vous sera demandé de choisir un modèle.

SeedProd est livré avec plus de 350 magnifiques modèles organisés en différentes catégories, telles que les modèles de page 404 et les pages de remerciement WooCommerce personnalisées.

Pour ce guide, nous vous montrerons comment créer une page de vente avec du texte animé et des animations d'entrée, mais les étapes seront similaires, quel que soit le type de page que vous créez.

Cliquez simplement sur n'importe quel onglet pour voir les différents modèles de cette catégorie.

Lorsque vous trouvez un modèle que vous souhaitez utiliser, placez simplement votre souris dessus, puis cliquez sur l'icône de coche.

Nous utilisons le modèle « Page de vente Zen » dans toutes nos images, mais vous pouvez utiliser n'importe quel modèle.

Ensuite, vous devez donner un titre à la page.

SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez la modifier comme vous le souhaitez. Par exemple, l'ajout de mots-clés pertinents à une URL peut souvent améliorer votre SEO WordPress et aider la page à apparaître dans les résultats de recherche pertinents.

Pour en savoir plus, consultez notre guide sur comment faire une recherche de mots-clés pour votre blog WordPress.

Lorsque vous êtes satisfait du titre et de l'URL, cliquez sur « Enregistrer et commencer à modifier la page ».

Cela chargera l'éditeur de page par glisser-déposer de SeedProd.

Sur la droite, vous verrez un aperçu en direct de la conception de la page, avec certains paramètres à gauche.

SeedProd est livré avec de nombreux blocs que vous pouvez ajouter à votre conception, y compris des blocs qui vous permettent d'ajouter des boutons de partage social, des vidéos, des formulaires de contact, et plus encore.

Pour plus d'informations, consultez notre guide sur comment créer une page personnalisée dans WordPress.

Comment ajouter du texte animé à WordPress

Pour ajouter du texte animé à la page, trouvez le bloc « Titre animé » et faites-le glisser sur la conception de votre page.

Il existe deux façons d'animer votre titre. Premièrement, le style « Mis en surbrillance » ajoute une animation de forme à votre texte, telle qu'un cercle ou un zigzag souligné.

Vous pouvez utiliser cette animation pour attirer l'attention sur un mot ou une phrase particulière dans le titre. Cela peut rendre votre titre plus facile à lire et à comprendre en mettant en évidence le contenu le plus important. C'est aussi un excellent moyen d'attirer l'attention sur un appel à l'action.

Le style « Mis en surbrillance » propose également quelques formes de barré.

Vous pouvez utiliser des barrés pour créer des effets intéressants et accrocheurs, ou cela peut simplement ajouter un peu de fantaisie à votre conception.

Pour créer une animation « Mis en surbrillance », ouvrez simplement le menu déroulant « Style » et sélectionnez « Mis en surbrillance ».

Ensuite, ouvrez le menu déroulant « Forme » et choisissez une forme. Lorsque vous cliquez sur une forme, SeedProd affichera un aperçu de cette animation afin que vous puissiez essayer différentes formes pour voir celle que vous préférez.

SeedProd propose également un style d'animation « Rotation », qui ajoute un effet de transition au texte.

Souvent, le texte animé est la première chose que les visiteurs regardent lorsqu'une page se charge, c'est donc un excellent moyen de mettre en évidence le texte le plus important.

Pour créer une animation de transition, ouvrez simplement le menu déroulant « Style » et cliquez sur « Rotation ».

Vous pouvez ensuite ouvrir le menu déroulant « Animation » et choisir le type de transition que vous souhaitez utiliser, tel que fondu, zoom ou roulement. Encore une fois, SeedProd lira l'animation dans l'éditeur de page, vous pouvez donc essayer différents effets pour voir lequel vous préférez.

Peu importe que vous créiez une animation « Mise en évidence » ou « Rotation », vous pouvez ajouter du texte avant et après le texte animé.

Tapez simplement dans les champs « Avant le titre » et « Après le titre ». Dans le champ « Texte », ajoutez le mot ou la phrase que vous souhaitez animer.

Si vous souhaitez animer l'intégralité du titre, laissez simplement les champs « Avant le titre » et « Après le titre » vides.

Par défaut, SeedProd lira l'animation en boucle, ce que certains visiteurs peuvent trouver agaçant.

Pour ne lire l'animation qu'une seule fois, cliquez pour désactiver le commutateur « Boucle infinie ».

Par défaut, l'animation sera lue pendant 1200 millisecondes après un délai de 8000 millisecondes.

Pour utiliser des valeurs différentes, tapez dans les champs « Durée » et « Délai ». Par exemple, vous pouvez accélérer l'animation en utilisant une durée plus courte.

Vous voudrez peut-être aussi styliser le texte. Par exemple, vous pouvez changer la taille de la police et l'alignement.

Lorsque vous êtes satisfait de l'apparence du titre animé, cliquez sur le bouton « Enregistrer » pour sauvegarder vos modifications.

Ajouter des animations d'entrée dans WordPress

Les animations d'entrée se jouent au chargement de la page, c'est donc un excellent moyen d'attirer l'attention du visiteur.

Vous pouvez également les utiliser pour mettre en évidence le contenu que les visiteurs devraient regarder en premier. Par exemple, si vous avez une place de marché en ligne, vous pourriez animer l'image principale du produit ou la bannière annonçant votre vente du Black Friday.

Dans l'éditeur SeedProd, cliquez simplement sur le contenu que vous souhaitez animer, puis sélectionnez l'onglet « Avancé » dans le menu de gauche.

Vous pouvez ensuite cliquer pour développer la section « Effets d'animation ».

Après cela, choisissez simplement une animation dans le menu déroulant « Animation d'entrée ».

Vous pouvez maintenant ajouter des animations d'entrée à n'importe quel bloc, section ou colonne en suivant simplement le même processus décrit ci-dessus.

Publiez vos animations CSS dans WordPress

Lorsque vous êtes satisfait de la configuration de la page, cliquez sur le menu déroulant du bouton « Enregistrer » et sélectionnez « Publier ».

Vous pouvez maintenant visiter cette page pour voir les animations CSS en direct.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des animations CSS dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter un arrière-plan animé dans WordPress ou les éléments de conception WordPress clés dont chaque site Web a besoin.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.