Comment ajouter facilement des animations CSS dans WordPress

Voulez-vous ajouter des animations CSS dans WordPress ?

Vous pouvez utiliser des animations pour attirer l’attention de l’internaute et mettre en évidence le contenu le plus important d’une page. Elles peuvent également inciter les clients à cliquer sur vos boutons d’appel à l’action et vos liens.

Dans ce tutoriel, nous allons vous afficher comment vous pouvez facilement ajouter des animations CSS dans WordPress.

Pourquoi ajouter des animations CSS dans WordPress ?

Vous pouvez utiliser des animations CSS pour attirer l’attention de l’internaute sur différentes parties d’une page. Par exemple, si vous avez un stock en ligne, les animations peuvent mettre en évidence les fonctionnalités les plus importantes d’un produit ou ses meilleurs arguments de vente. Vous pouvez ainsi améliorer l’expérience des utilisateurs/utilisatrices et augmenter vos ventes.

Les animations feront également ressortir vos CTA, ce qui peut vous aider à atteindre un objectif spécifique, comme inciter davantage de personnes à s’abonner à votre lettre d’information 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 prend beaucoup de temps et d’efforts, et cela peut casser le design et même le fonctionnement de votre site si vous faites une erreur.

Ceci étant 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, alors vous pouvez utiliser les liens ci-dessous :

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

La manière la plus simple d’ajouter une animation CSS simple est d’utiliser les blocs d’animation.

Cette extension d’animation gratuite vous permet d’ajouter une animation d’entrée à n’importe quel bloc sans avoir à écrire une seule ligne de CSS. Il propose également une animation de frappe et un effet de type téléscripteur que vous pouvez ajouter au texte et aux chiffres.

Tout d’abord, vous devrez installer et activer l’extension gratuite. Si vous avez besoin d’aide, veuillez consulter notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activé, ouvrez n’importe quelle page ou publication dans l’éditeur de blocs de WordPress. Ensuite, il suffit de cliquer sur le bloc que vous souhaitez animer et de sélectionner l’onglet  » Bloc  » dans le menu de droite.

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

Il suffit de cliquer pour déplier la section « Animations » et vous verrez trois options différentes : Animations, Animations de comptage et Animations de frappe.

Les  » animations  » sont de courts effets qui sont joués une fois lors du chargement de la page. Pour ajouter ce type d’animation d’entrée à votre blog WordPress, il vous suffit de cliquer sur le menu déroulant situé à côté de « Animation ».

Cela ouvre un menu dans lequel vous pouvez choisir l’animation que vous souhaitez utiliser.

L’éditeur WordPress affichera un aperçu de l’animation, ce qui vous permettra d’essayer différentes options pour voir ce qui vous convient le mieux.

Par défaut, l’animation d’entrée est jouée dès le chargement de la page, mais vous pouvez ajouter un délai si vous le souhaitez. Si vous utilisez plusieurs animations sur la même page, vous pouvez même utiliser des délais pour échelonner vos animations afin qu’elles ne soient pas trop nombreuses.

Il suffit d’ouvrir le menu déroulant « Délai » et de choisir une durée dans la liste.

Vous pouvez également accélérer ou ralentir l’animation à l’aide du menu déroulant « Vitesse ».

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

L’extension 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 téléscripteur aux nombres. Ces animations fonctionnent avec n’importe quel bloc Gutenberg qui supporte 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 ou l’autre de ces effets, commencez par mettre en surbrillance le texte ou les chiffres que vous souhaitez animer. Cliquez ensuite 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 que vous avez mis en évidence le bon contenu. Par exemple, vous ne pourrez pas sélectionner « Compter les animations » si vous avez uniquement mis du texte en surbrillance.

Après avoir ajouté l’animation, vous pouvez modifier la vitesse et ajouter un délai facultatif à l’aide des menus déroulants de la petite fenêtre surgissante.

Par exemple, dans l’image abrégée, nous utilisons un délai d’une seconde.

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

Méthode 2 : Comment ajouter des animations CSS aux pages personnalisées (Recommandé)

Si vous souhaitez ajouter des animations simples aux blocs WordPress intégrés, alors Version Animation est un bon choix. Cependant, si vous voulez vraiment attirer l’attention de l’internaute, garder les gens sur votre site, et obtenir plus de conversions, alors nous recommandons d’utiliser SeedProd.

SeedProd est le meilleur plugin de constructeur de page qui vous permet de créer de belles pages d’atterrissage, des pages de vente, une page d’accueil, et plus encore à l’aide d’un simple éditeur drag-and-drop.

Il est également livré avec un bloc « Titre animé » que vous pouvez utiliser pour créer des titres animés en rotation et 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 les images, le texte, les boutons, les vidéos, et plus encore.

Vous pouvez même animer des sections et des colonnes entières en quelques clics. Vous pouvez ainsi créer des pages animées attrayantes en quelques minutes.

Si vous utilisez des animations pour obtenir plus de conversions et de ventes, alors SeedProd s’intègre à WooCommerce. Il supporte également plusieurs des meilleurs services de marketing par e-mail que vous utilisez peut-être déjà pour promouvoir votre site.

Comment configurer le constructeur de page 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 l ‘installation d’une extension WordPress.

Lors de l’activation, vous devez saisir votre clé de licence.

Vous trouverez ces informations dans votre compte sur le site de SeedProd. Après avoir ajouté la clé de licence, il suffit de cliquer sur  » Vérifier la clé « .

Créer un Design de page personnalisé

Pour Premiers, allez sur SeedProd  » Landing Pages et cliquez sur ‘Add New Landing Page’.

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

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

Pour ce guide, nous allons vous afficher 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.

Il suffit de cliquer sur un onglet pour voir les différents modèles de cette catégorie.

Lorsque vous trouvez un modèle que vous souhaitez utiliser, il vous suffit de survoler le modèle à l’aide de votre souris, puis de cliquer sur l’icône de la coche.

Nous utilisons le modèle « Zen Sales Page » 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 à votre guise. Par exemple, l’ajout de mots-clés pertinents à une URL peut souvent améliorer votre référencement WordPress et aider la page à apparaître dans les résultats de recherche pertinents.

Pour en savoir plus, veuillez consulter notre guide sur la recherche de mots-clés pour votre blog WordPress.

Lorsque le titre et l’URL vous conviennent, cliquez sur « Enregistrer et commencer à modifier la page ».

L’éditeur/éditrices de pages SeedProd est alors chargé.

À droite, vous verrez un aperçu direct de la conception de la page, avec quelques Réglages à 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.

En savoir plus, veuillez consulter notre guide sur la façon de créer une page personnalisée dans WordPress.

Comment ajouter un texte animé à WordPress

Pour ajouter un texte animé à la page, trouvez le bloc Titre animé et faites-le glisser sur votre page.

Il existe deux façons d’animer votre titre. Tout d’abord, le style « Surligné » ajoute une animation de forme à votre texte, comme un cercle ou un zigzag souligné.

Vous pouvez utiliser cette animation pour attirer l’attention sur un mot ou une phrase en particulier à l’intérieur du titre. Cela peut faciliter la lecture et la compréhension de votre titre en mettant en évidence le contenu le plus important. C’est également un excellent moyen d’attirer l’attention sur un appel à l’action.

Le style Surligné comporte également quelques formes de biffures.

Vous pouvez utiliser les biffures pour créer des effets intéressants et accrocheurs, ou simplement pour ajouter un peu de fantaisie à votre dessin.

Pour créer une animation Sélectionné, il suffit d’ouvrir le menu déroulant « Style » et de sélectionner « Sélectionné ».

Ensuite, ouvrez le menu déroulant  » Forme  » et choisissez une forme. Lorsque vous cliquez sur une forme, SeedProd affiche une Prévisualisation de cette animation afin que vous puissiez essayer différentes formes pour voir celle qui vous plaît le plus.

SeedProd dispose également d’un style d’animation « Rotating », qui ajoute un effet de transition au texte.

Souvent, le texte animé est la première chose que les internautes regardent lorsqu’une page se charge. C’est donc un excellent moyen de mettre en valeur l’élément de texte le plus important.

Pour créer une animation de transition, il suffit d’ouvrir le menu déroulant « Style » et de cliquer sur « Rotation ».

Vous pouvez ensuite ouvrir le menu déroulant « Animation » et choisir le type de transition que vous souhaitez utiliser, comme un fondu, un zoom ou un roulement. Réessayer, SeedProd jouera l’animation à l’intérieur de l’éditeur de page, de sorte que vous pouvez essayer différents effets pour voir ce que vous préférez.

Aucun texte ne peut être ajouté avant ou après le texte animé, qu’il s’agisse d’une animation en surbrillance ou d’une animation rotative.

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’ensemble du titre, laissez simplement vides les champs « Avant le titre » et « Après le titre ».

Par défaut, SeedProd joue l’animation en boucle, ce que certains internautes peuvent trouver ennuyeux.

Pour que l’animation soit jouée uniquement une fois, cliquez sur le bouton « Boucle infinie » pour la désactiver.

Par défaut, l’animation sera jouée 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 rendre l’animation plus rapide en utilisant une durée plus courte.

Il se peut également que vous souhaitiez styliser le texte. Par exemple, vous pouvez modifier la taille de la police et l’alignement.

Lorsque vous êtes satisfait de l’aspect du titre animé, cliquez sur le bouton « Enregistrer » pour stocker vos modifications.

Ajouter des animations d’entrée dans WordPress

Les animations d’entrée sont jouées lors du chargement initial de la page et constituent donc un excellent moyen d’attirer l’attention de l’internaute.

Vous pouvez également les utiliser pour mettre en évidence le contenu que les internautes doivent regarder en premier. Par exemple, si vous avez une place de marché en ligne, vous pouvez animer l’image d’accroche du produit ou la bannière annonçant vos soldes du vendredi noir.

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éplier la section « Effets d’animation ».

Ensuite, il suffit de choisir une animation dans le menu déroulant « Animation d’entrée ».

Vous pouvez désormais ajouter des animations d’entrée à n’importe quel bloc, section ou colonne en suivant simplement la même procédure que celle décrite ci-dessus.

Publiez vos animations CSS sur WordPress

Lorsque vous êtes satisfait de la façon dont la page est configurée, 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 pouvez également consulter notre guide ultime pour booster la vitesse et les performances ou notre liste des erreurs WordPress les plus courantes et comment les corriger.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.