En bref : Comment créer des animations de texte dans WordPress
Trois méthodes vous permettent d'ajouter des animations de texte sans codage. Choisissez-en une en fonction de la façon dont vous créez vos pages.
- SeedProd – Utilisez le bloc Titre animé de l'éditeur visuel de SeedProd pour des effets de frappe, de rotation ou de surbrillance sur les pages de destination et les thèmes.
- Plugin Animated Text Block – Insérez un bloc natif dans l'éditeur de blocs Gutenberg pour des titres animés sur les articles et les pages.
- Plugin Animate It! – Entourez votre texte d'un shortcode dans l'éditeur classique de WordPress pour des effets CSS.
- Choisissez par cas d'utilisation – SeedProd pour les pages de destination ; Animated Text Block pour l'éditeur de blocs ; Animate It! pour les sites avec éditeur classique.
- Aucun codage requis – Les trois méthodes fonctionnent sans toucher au CSS ou au PHP.
Si vous essayez de faire ressortir votre titre principal sans toucher au CSS, vous avez probablement atteint un mur. La plupart des tutoriels supposent que vous utilisez Elementor ou que vous êtes à l'aise avec la modification du code.
Dans ce guide, je vais vous montrer comment ajouter des animations de texte dans WordPress en utilisant trois méthodes : le bloc Titre animé de SeedProd, un plugin Gutenberg gratuit et le plugin CSS Animate It!. Choisissez celle qui correspond à votre configuration et suivez les étapes.
Que sont les effets de texte animé et pourquoi les utiliser ?
Les effets de texte animé dans WordPress sont de petites animations que vous pouvez appliquer aux titres, boutons ou autres éléments de texte. Au lieu d'un texte statique, vous pouvez ajouter des styles comme la frappe, le glissement, le rebond ou la mise en surbrillance pour attirer instantanément le regard.
Ces effets sont alimentés par le CSS moderne, qui est rapide, léger et pris en charge par tous les principaux navigateurs.
Il existe deux types d'animations de texte qui méritent d'être distingués : les effets d'entrée qui s'exécutent au chargement de la page, et les animations déclenchées par le défilement qui se déclenchent lorsque les visiteurs font défiler la page. Ce guide couvre les effets d'entrée, y compris les titres en rotation et en surbrillance.
La fonction de révélation au défilement de SeedProd gère les animations déclenchées par le défilement si c'est ce que vous recherchez. Les étapes ci-dessous se concentrent sur les effets qui s'exécutent automatiquement au chargement de la page.
Voici quelques façons pratiques d'utiliser l'animation de texte sur votre site WordPress :
- Faites ressortir les offres spéciales sur votre tableau des prix
- Présentez les caractéristiques du produit avec des surlignages animés
- Créez des titres en rotation ou en frappe qui maintiennent l'engagement des visiteurs
- Attirez l'attention sur les boutons d'appel à l'action (CTA) importants
- Ajoutez un mouvement subtil lorsque les utilisateurs parcourent votre contenu
Parce que les animations CSS sont légères par rapport à la vidéo ou au Flash, elles ne ralentiront pas votre site lorsqu'elles sont utilisées correctement. Avec un plugin d'animation WordPress ou un constructeur par glisser-déposer comme SeedProd, vous pouvez ajouter ces effets en quelques clics, sans codage.
Comment ajouter des effets de texte animé dans WordPress : 3 façons
Il existe plusieurs façons d'ajouter des animations à WordPress. Vous pouvez utiliser un plugin WordPress ou ajouter manuellement des effets CSS.
Parce que la création manuelle d'effets de texte est difficile pour les débutants, nous vous montrerons comment créer des animations de texte avec le constructeur de sites Web par glisser-déposer de SeedProd, un plugin d'animation gratuit et l'éditeur de blocs Gutenberg.
| Méthode | Idéal pour | Coût |
|---|---|---|
| SeedProd | Pages de destination, thèmes personnalisés, pages de vente | Payant (Pro) |
| Bloc de texte animé | Articles et pages Gutenberg | Gratuit |
| Animer ! | Sites avec éditeur classique | Gratuit |
Méthode 1. Créer des titres animés avec SeedProd
Pour la première méthode, nous utiliserons SeedProd, le meilleur constructeur de sites Web pour WordPress. Avec son constructeur de sites Web par glisser-déposer et son bloc de titres animés, vous pouvez ajouter des effets de transition passionnants en quelques clics.
SeedProd vous permet de créer des thèmes WordPress personnalisés et des mises en page réactives sans écrire de code ni engager de développeur. Il comprend des blocs de contenu puissants pour personnaliser les pages, la prise en charge de WooCommerce pour les boutiques en ligne, et s'intègre parfaitement aux plugins WordPress populaires.
De plus, ce plugin est léger et sans superflu, garantissant des temps de chargement de page rapides et une expérience utilisateur agréable.
Suivez les étapes ci-dessous pour créer des animations de texte dans WordPress avec SeedProd.
Étape 1. Installer et activer le plugin SeedProd
Tout d'abord, rendez-vous sur la page de tarification de SeedProd et choisissez une licence. Nous recommandons SeedProd Pro pour ses fonctionnalités avancées.
Après cela, connectez-vous à votre espace client SeedProd et téléchargez le plugin. Vous pouvez copier votre clé de licence sous l'onglet « Téléchargements » en même temps.
Ensuite, installez le plugin et activez-le sur votre site WordPress. Si vous avez besoin d'aide, vous pouvez suivre ces étapes pour installer un plugin WordPress.
Après avoir activé SeedProd, accédez à SeedProd » Paramètres, entrez votre clé de licence et cliquez sur le bouton Vérifier la clé .
Vous êtes maintenant prêt à commencer à créer une page avec des effets d'animation.
Étape 2. Choisir un modèle de page de destination
Vous pouvez utiliser SeedProd pour créer une page WordPress unique, un thème WordPress, ou une page de destination avec son éditeur visuel. Pour ce guide, nous ajouterons des animations de texte à une page de destination de vente.
Tout d'abord, vous devrez aller dans SeedProd » Pages de destination et cliquer sur le bouton Ajouter une nouvelle page de destination.
Ici, vous pouvez choisir parmi plus de 180+ modèles de pages de destination adaptés aux mobiles.
Puisque nous créons une page de vente, cliquez sur l'onglet Vente pour voir les différents modèles de pages de vente. Lorsque vous trouvez un modèle qui vous plaît, déplacez votre curseur jusqu'à voir l'effet de survol de l'image et cliquez sur l'icône de coche orange.
Ensuite, vous verrez une fenêtre contextuelle où vous pouvez ajouter le nom et l'URL de votre page de destination. Après cela, cliquez sur le bouton Enregistrer et commencer à modifier la page .
Étape 3. Personnaliser le contenu de votre page de destination
Votre modèle de page de destination s'ouvrira maintenant dans l'éditeur visuel par glisser-déposer de SeedProd. C'est ici que vous pouvez personnaliser son contenu et son style et ajouter d'autres éléments de page.
Par exemple, vous pouvez ajouter votre logo personnalisé en cliquant sur le bloc d'image actuel et en téléchargeant un fichier de votre médiathèque WordPress ou de votre ordinateur.
Vous pouvez également modifier vos boutons CTA avec différentes couleurs, textes et styles en cliquant dessus et en accédant au panneau des paramètres avancés sur la gauche.
L'ajout de nouveaux éléments est tout aussi simple. Vous pouvez faire glisser un bloc du panneau des blocs sur la gauche et le déposer sur votre conception. Un compte à rebours, par exemple, peut ajouter de l'urgence à votre page, encourageant les utilisateurs à agir par peur de manquer quelque chose.
Une fois vos personnalisations en place, examinons comment animer votre texte de titre ensuite.
Étape 4. Ajouter le bloc de titres animés
Supposons que vous souhaitiez animer le titre principal de votre page de destination. Pour ce faire, vous devrez trouver le bloc Titre animé et le faire glisser sur la conception de votre page.
Lorsque vous cliquez sur le bloc pour afficher ses paramètres, vous verrez 2 façons d'animer votre titre :
- Mis en surbrillance
- Rotation
Le style Mis en surbrillance ajoute une animation de forme à votre texte, avec des formes incluant :
- Cercle
- Bouclé
- Souligner
- Double
- Double soulignement
- Soulignement ZigZag
- Diagonale
- Barré
- X
En revanche, le style Rotation ajoute des effets de transition à votre titre, qui incluent :
- Taper
- Découper
- Retourner
- Rebond
- Faire pivoter
- Zoomer
- Fondu
- Vitesse de la lumière
- Glisser vers le bas
De plus, vous pouvez ajouter du texte avant et après votre texte animé, activer la boucle infinie, modifier la durée de l'animation et ajuster l'alignement, les polices et le niveau de titre.
Dans notre exemple, nous utilisons la forme « Soulignement » du menu déroulant mis en surbrillance.
Lorsque vous êtes satisfait de vos effets de texte animés, cliquez sur le bouton Enregistrer dans le coin supérieur droit.
Étape 5. Configurez vos paramètres
La prochaine étape consiste à configurer les paramètres de votre page de destination avant de la publier.
Cliquez sur l'onglet Paramètres de la page pour modifier le nom de votre page, l'URL, les paramètres de SEO sur la page, et connecter un plugin Google Analytics.
SeedProd vous permet également de connecter des services de marketing par e-mail et de configurer la mise en correspondance des domaines pour vos pages. Consultez la documentation d'intégration de SeedProd pour plus de détails.
N'oubliez pas de cliquer sur Enregistrer avant de passer à l'étape suivante.
Étape 6. Publiez votre page de destination
Lorsque vous êtes satisfait de votre conception, cliquez sur le menu déroulant du bouton Enregistrer et sélectionnez Publier.
Vous pouvez maintenant afficher votre page et voir vos animations de texte en action.
Méthode 2. Ajouter des animations de texte avec le plugin CSS Animate It !
Pour la méthode suivante, nous utiliserons un plugin d'animation WordPress gratuit pour ajouter des effets de texte animés à votre site Web. C'est une bonne solution si vous utilisez l'éditeur classique WYSIWYG de WordPress au lieu d'un constructeur de pages ou de l'éditeur de blocs WordPress.
(Remarque : le plugin Animate It! a été mis à jour pour la dernière fois en 2021. Il reste fonctionnel pour les utilisateurs de l'éditeur classique. Consultez la page du plugin WordPress.org pour connaître le statut actuel du support.)
D'abord, installez et activez le plugin Animate It! sur votre site WordPress. Il devrait fonctionner immédiatement sans aucune configuration de votre part.
Ensuite, créez une nouvelle page et vous verrez un nouveau bouton dans l'éditeur WordPress : Animate It!
Cliquer sur le bouton ouvre une fenêtre contextuelle où vous pouvez choisir un style d'animation. Il existe de nombreux styles d'animation parmi lesquels choisir, alors trouvez celui que vous aimez dans le menu déroulant.
Après cela, vous pouvez choisir le délai et la durée, ainsi que le moment où vous souhaitez que l'animation apparaisse. Vous pouvez également exécuter l'animation au chargement, au clic, au survol ou à un décalage de défilement.
Lorsque vous êtes satisfait des paramètres, cliquez sur le bouton Animate It pour voir un aperçu de l'animation.
Ensuite, cliquez sur le bouton Insérer pour ajouter l'animation à votre article ou page. Le plugin ajoutera un shortcode avec du contenu fictif dans l'éditeur d'articles.
Vous pouvez personnaliser et remplacer ce contenu par vos titres, images et texte personnalisé.
Vous pouvez maintenant publier vos modifications et prévisualiser votre texte animé en direct sur votre site WordPress.
Méthode 3. Ajouter du texte animé dans l'éditeur de blocs Gutenberg
Le plugin Animated Text Block ajoute un bloc Gutenberg natif pour les effets d'animation de texte. Si vous créez des pages et des articles dans l'éditeur de blocs WordPress, c'est l'option la plus directe, car il fonctionne comme n'importe quel autre bloc sans shortcodes ni constructeur séparé.
J'ai testé de nombreux plugins d'animation au fil des ans, et la plupart d'entre eux nécessitent soit l'éditeur classique, soit un constructeur de page dédié pour fonctionner correctement. Celui-ci s'intègre directement à Gutenberg en tant que bloc natif, ce qui le rend plus simple à gérer aux côtés de votre autre contenu.
Étape 1. Installer le plugin Bloc de texte animé
Allez dans Plugins » Ajouter dans votre tableau de bord WordPress et recherchez « Animated Text Block ». Cliquez sur Installer maintenant, puis sur Activer.
Le plugin fonctionne immédiatement sans aucune configuration requise après l'activation.
Étape 2. Ajouter le bloc à votre page
Ouvrez n'importe quel article ou page dans l'éditeur de blocs Gutenberg. Cliquez sur le bouton d'insertion de bloc +, recherchez « Animated Text », et ajoutez le bloc à votre zone de contenu.
Placez-le là où vous souhaitez que votre titre animé apparaisse, par exemple en haut d'une section de page ou à l'intérieur d'un bloc de couverture.
Étape 3. Configurer votre animation
Avec le bloc sélectionné, tapez votre texte animé directement dans le bloc. Utilisez le panneau des paramètres à droite pour choisir un style d'animation, régler la vitesse et contrôler si l'animation se répète.
Le plugin prend en charge plusieurs styles, y compris les effets de frappe, de fondu, de rebond et de glissement. Commencez par « frappe » ou « fondu » pour un look subtil et professionnel sur la plupart des sites.
Étape 4. Prévisualiser et publier
Cliquez sur Aperçu pour voir votre animation avant qu'elle ne soit mise en ligne. Lorsque vous êtes satisfait de l'effet, cliquez sur Publier ou Mettre à jour pour enregistrer vos modifications.
FAQ sur les animations de texte dans WordPress
L'animation de texte fonctionne-t-elle avec l'éditeur de blocs Gutenberg ?
Oui. Le plugin Animated Text Block ajoute un bloc Gutenberg natif pour les effets de texte animés. Une fois installé et activé, trouvez le bloc dans l'outil d'insertion et déposez-le dans n'importe quel article ou page. Il prend en charge plusieurs styles d'animation et fonctionne sans shortcodes ni constructeur de page séparé.
Les animations de texte nuiront-elles à mes Core Web Vitals ou à la vitesse de ma page ?
Les animations basées sur CSS sont légères et n'affectent généralement pas les Core Web Vitals lorsqu'elles sont utilisées avec parcimonie. Le risque vient de l'animation de trop d'éléments sur une seule page, ce qui peut déclencher des changements de mise en page ou retarder le rendu. La plupart des navigateurs modernes prennent en charge la requête média prefers-reduced-motion, qui réduit ou désactive les animations pour les utilisateurs qui la préfèrent.
Quelle est la différence entre un titre rotatif et une animation de défilement dans WordPress ?
Un titre rotatif fait défiler des mots ou des phrases au chargement de la page, généralement dans une section principale. Une animation de défilement se déclenche lorsqu'un élément spécifique entre dans la fenêtre d'affichage pendant que l'utilisateur fait défiler la page. Ce guide couvre les effets de titres rotatifs et mis en surbrillance qui s'exécutent au chargement. La fonctionnalité de révélation par défilement de SeedProd gère les animations déclenchées par le défilement séparément.
Ai-je besoin de SeedProd Pro pour utiliser le bloc Animated Headline ?
Oui. Le bloc Animated Headline est une fonctionnalité Pro et n'est pas disponible dans la version gratuite de SeedProd. Si vous avez besoin d'animations de texte sans plugin payant, utilisez le plugin Animated Text Block pour l'éditeur de blocs Gutenberg ou le plugin Animate It! pour l'éditeur classique. Les deux sont gratuits.
Comment ajouter une animation de texte dans WordPress sans plugin ?
Vous pouvez utiliser des animations CSS par keyframes appliquées via le panneau CSS additionnel de votre thème (Apparence » Personnaliser » CSS additionnel). Écrivez une règle @keyframes, assignez-la à votre élément de texte en utilisant la propriété animation, et ajoutez la classe dans un bloc HTML personnalisé ou le balisage de votre thème. Cette approche nécessite des connaissances CSS de base et convient mieux aux développeurs qu'aux débutants.
Prêt à commencer à ajouter des animations de texte à vos pages WordPress ? Essayez SeedProd et utilisez le bloc Animated Headline pour faire ressortir vos titres principaux en quelques minutes.
Vous pourriez également aimer ce guide sur la création d'une page de destination dynamique dans WordPress.
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
