Comment ajouter une animation au texte dans WordPress

Les styles de texte fantaisistes attirent rapidement l'attention des téléspectateurs. Les propriétaires de sites Web WordPress demandent souvent comment ajouter une animation au texte. Absolument, vous trouverez plusieurs méthodes pour concevoir les textes de votre site WordPress. Vous pouvez ajouter manuellement des effets HTML CSS qui nécessitent un peu plus de code. Mais le codage est un excellent moyen d’ajouter une animation personnalisée à votre site. Encore, un plugin avec le meilleur widget est relativement pratique, efficace et aussi populaire.

Cependant, nous avons essayé de couvrir les deux techniques aussi facilement que possible. Si vous exploitez un site WordPress, prenez le temps de lire le blog et de comprendre les processus. Suivre correctement les étapes et les instructions vous permettra de personnaliser votre propre animation en douceur.

Comment ajouter des effets de texte animé dans WordPress

Les effets de texte animés peuvent être utilisés pour ajouter du style et de la personnalité à votre site WordPress. Dans ce didacticiel, nous allons vous montrer les manières d'ajouter ces effets ; mais avant cela, il faut avoir une idée claire sur un texte animé et son rôle ; apprenons!

Qu'est-ce qu'un effet de texte animé et comment apparaît-il ?

Les effets de texte animés sont un excellent moyen d'ajouter un peu de plaisir et d'excitation à votre articles et titres également. Lorsque vous choisissez d'utiliser un effet de texte animé sophistiqué, vous pouvez créer divers effets. Certains effets sont simple comme changer la couleur ou la taille du texte, tandis que certaines sont des animations détaillées telles que texte clignotant ou clignotant.

Le texte animé est un peu différent du texte normal. Généralement, ce type de texte ne bouge pas tout seul. Au lieu de cela, il a un effet qui donne l’impression qu’il se déplace sur l’écran. Ainsi, les textes fantaisistes rendent les gens plus susceptibles de cliquez sur le contenu, les liens ou ouvrez les emails.

Le rôle des textes animés dans votre site Web

Il existe différents types d’effets de texte animés disponibles dans les thèmes WordPress, mais ils partagent tous les mêmes fonctionnalités de base. Ils changent la couleur ou le style du texte et changent simplement un style de test. Par exemple, vous pouvez modifier un bouton « appel à l'action » avec un fond rouge et un texte blanc qui dit "Cliquez ici!" lorsqu'on clique dessus.

Le titre animé ou section héros avec des textes fantaisistes joue les rôles suivants-

• Rend vos créations visuellement plus intéressantes.
• Mettez en avant les offres spéciales et les informations importantes.
• Rend les fonctionnalités de votre produit visibles.
• Rend un site Web plus interactif et fait la promotion de l'entreprise.

Les moyens les plus simples d'ajouter des effets de texte animés

Utiliser un plugin WordPress

Le marché actuel vous propose différents types de plugins pour faciliter les tâches de style de texte. ElementsKit est un plugin tellement puissant ainsi qu'un module complémentaire pour le constructeur de pages Elementor. Avec ElementsKit, vous aurez tout sous un seul capot.

Le texte animé fantaisie est un widget impressionnant présenté par ElementsKit pro. 

Se connecter à votre tableau de bord -> Sélectionnez n'importe quelle page ou publication -> Cliquez sur Modifier avec ElementsKit -> Recherchez le widget de texte d'animation fantaisie ElementsKit -> Faites glisser et déposez le widget

Section Contenu

La partie s'appelle le Partie texte fantaisie, il contient les champs suivants-

Savez-vous pourquoi ElementsKit est si populaire ? 🤔
Vérifier ici 👉 Les sites Web les mieux classés au monde créés avec ElementsKit

Animation

• Style d'animation – Ici les deux options sont Texte ou SVG, toutes deux permettent de réaliser différents styles d’animation.
• Type d'animation – En fonction de votre type d’animation, vous aurez ici différents choix.
• Révéler la durée (ms) – Vous pouvez définir la durée de l'animation en millisecondes à l'aide de la zone d'option.
• Révéler le délai d'animation (ms) – Ajustez ici le temps de retard de l’animation. Il spécifie qu'une animation peut démarrer plus tard, immédiatement dès son début, ou instantanément et à mi-chemin de l'animation.

Contenu

• Texte du préfixe – Vous devez écrire ici le contenu du préfixe que vous souhaitez afficher. Cela signifie qu'il sera écrit avant l'animation sophistiquée.
• Listes fantaisie – Ajoutez des éléments ici pour une animation sophistiquée.
• Texte du suffixe – Écrivez le contenu du suffixe que vous souhaitez afficher. Cela sera donc précisé après l'animation fantaisie.

• Balise HTML de titre – Sélectionnez ici la balise HTML du contenu.
• Lien (facultatif) – Ajoutez n’importe quel lien si vous souhaitez que les utilisateurs soient redirigés vers un autre emplacement.

Section Styles

• Texte du titre – Utilisez ce champ pour ajuster l’alignement du titre, la typographie, la couleur, etc.
• Listes de textes fantaisistes – Utilisez ce champ pour ajuster la typographie, la couleur et le remplissage.
• Curseur fantaisie – Vous pouvez donner au curseur un aspect sophistiqué avec la couleur, la largeur et la hauteur en utilisant ce champ.

Après avoir modifié et stylisé toutes vos instructions requises, cliquez sur Mettre à jour et voyez les modifications depuis le front-end. Un exemple est -

Application de CSS

Lors de la création d'animations CSS dans WordPress, conservez les éléments suivants choses fondamentales mais importantes à l'esprit:

• Définir un bon nom d'animation - C'est le nom qui sera affiché sur un élément lorsqu'il sera déplacé par une animation CSS. Par exemple, si vous avez un bouton avec une animation nommée « fadeIn », ce serait la valeur que vous utiliseriez pour cette propriété.
• Durée de l'animation – Il s'agit du nombre de secondes qu'il faudra à une animation pour se terminer. Vous pouvez également définir cette valeur sur aucun ou sur 0 pour qu'une animation dure indéfiniment ou jusqu'à ce que quelque chose d'autre se produise (comme le chargement d'une page).
• Fonction de synchronisation d'animation - Cela contrôle la façon dont l'élément se déplace d'un endroit à un autre en fonction du temps qu'il faut pour une durée spécifique (en millisecondes). Par exemple, si vous définissez cette propriété sur easy-out, alors votre élément commencera à se déplacer lentement puis accélérera à la fin de sa durée avant de recommencer au début.
• Retard d'animation – Il s'agit d'une valeur qui spécifie le nombre de millisecondes qui doivent être ajoutées après la fin d'une animation avant qu'elle ne redémarre (par exemple, 1 s).
• Nombre d’itérations d’animation – C'est le temps dont vous avez besoin pour lire l'animation. En utilisant la propriété CSS, vous pouvez compter cette itération.
• Animations-réalisation – C'est l'ordre ou la direction dans laquelle une animation doit être jouée. Cela peut être normal, inversé, alternatif et alterné-inverse.
• Mode de remplissage d'animation - Ces valeurs spécifient comment un élément doit être affiché. Cela peut être avant et après qu’une animation lui ait été appliquée.
• Connaître @keyframes – Il spécifie les propriétés de l'animation qui changent au cours du parcours ainsi que les valeurs que ces propriétés doivent prendre. Par exemple: 

Exemple de @keyframes { 0% {couleur de fond : rouge ;} 25% {couleur de fond : jaune ;} 50% {couleur de fond : bleu ;} 100% {couleur de fond : vert ;} }

Généralement, des pourcentages sont utilisés pour indiquer le timing de l'animation. L'image clé ci-dessus montre que la couleur d'arrière-plan de l'élément se transformera de 25 % du rouge au jaune, tout au long de l'animation.

Cependant, de et vers peut être utilisé à la place de 0% et 100%, respectivement.

Un segment « chronologique » joue un rôle important pour attirer l'attention des clients et les inciter à visiter votre site Web ! Lire la suite 👉 Ici!

Création d'un fichier animer.css

Vous devez d'abord créer un fichier séparé avec toutes les propriétés nécessaires, dans l'éditeur de texte dans lequel vous travaillez. Vous pouvez choisir le images clés pour toute animation. Ensuite, vous devez les assembler avec des classes CSS particulières à appliquer à n’importe quel texte de votre site WordPress.

Commencez par écrire un code simple dans votre fichier CSS. Un exemple de code pour un texte d'animation peut ressembler à :

```@keyframes MyAnimation { from { opacity: 0; transformation : rotation (20 degrés) ; durée de l'animation : 3 s ; } en {opacité : 1 ;} transformation : rotation (0deg); } }

Maintenant, pour lier cette image clé à une classe CSS, nous avons défini un texte nommé MonAnimation. Donc, juste après le code ci-dessus, vous devez mettre le code ci-dessous dans le fichier.

.MonAnimation { nom-animation : MonAnimation ; }

Vous pouvez trouver toutes les connaissances de base de l'animation CSS et pratiquer le codes ici!

Vous pouvez répéter cette procédure pour créer autant d'animations que possible selon vos besoins. Ensuite, enregistrez le fichier sous animate.css. Alternativement, vous pouvez télécharger le fichier Animate.css. Il s'agit d'un fichier très apprécié qui contient les images clés et les classes CSS pour des tonnes de conceptions d'animation populaires. De plus, l’utilisation du fichier réduira la difficulté de coder l’animation complexe.

Le code ci-dessus animera le texte de votre balise h1 'MonAnimation'. Vous pouvez modifier la durée de l'animation en modifiant le "3s" à une valeur différente. Vous pouvez également modifier les couleurs en modifiant les valeurs hexadécimales. Une fois le fichier CSS enregistré, vous pouvez apporter d'autres modifications à l'apparence de votre site Web, vous pouvez modifier le fichier CSS. Vous pouvez modifier la police, la taille du texte et la couleur du texte en modifiant le fichier CSS. Vous pouvez également modifier la couleur d'arrière-plan et la taille de l'en-tête en modifiant le fichier CSS.

Chargement de votre fichier animate.css sur le site WordPress

Une fois que vous avez terminé le travail sur le fichier, téléchargez-le dans le répertoire de votre thème. Nous avons divisé l'ensemble du processus en trois étapes,

Étape 1

Accédez au site en utilisant Protocole de transfert de fichiers (FTP) -> Choisissez le client FTP (FichierZilla, WinSCP, Cyberduck, etc.) -> Sélectionnez les informations d'identification nécessaires dans votre compte d'hébergement.

Étape 2

Accédez à votre répertoire public_html -> Accédez à wp-content – > Thèmes -> Sélectionnez le dossier du thème actif ou enfant

Étape 3

Maintenant, recherchez un sous-répertoire nommé css. Si vous l'obtenez, téléchargez votre fichier animate.css ou animate.min.css à partir du fichier Animate.css avec le sous-répertoire. 

Cependant, si vous ne disposez pas du dossier du sous-répertoire, vous pouvez facilement en créer un nouveau. Pour cela, juste après avoir chargé le fichier faites une simple édition pour créer le nouveau fichier et le tour est joué.

Appelez la feuille de style Animate via function.php

Vous trouverez le fichier function.php dans votre dossier de thème actif. Maintenant, vous devez ajouter cet extrait de code pour appeler la feuille de style Animate :

add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Souviens-toi, si vous avez utilisé le fichier animate.min.css d'Animate.css, vous devrez écrire animate.min.css dans la ligne de fin au lieu d'animer.css. Après avoir enregistré toutes les modifications, accédez à votre tableau de bord WordPress.

Appliquer des animations à l'aide de classes CSS

Il est désormais possible d'appliquer n'importe quelle classe dans le fichier animate.css pour voir différents effets d'animation dans les articles et les pages. De plus, le fichier Animate.css vous permet de référencer une liste complète de tous.

Enfin, Sélectionnez un article ou une page dans l'éditeur classique -> Basculez vers l'éditeur de texte -> Ou cliquez sur l'icône à trois points dans la barre d'outils de bloc s'il s'agit d'un éditeur de blocs -> Sélectionnez Modifier en HTML -> Ajoutez la classe animée et la classe de votre animation dans la balise element -> Aperçu

Ce sont deux techniques efficaces pour ajouter du texte animé à votre site, et elles peuvent vous aider à rendre votre site plus engageant et visuellement attrayant. En utilisant l’une de ces techniques, vous pouvez ajouter du mouvement et de l’intérêt à vos pages.

Cependant, appliquer CSS peut être un peu difficile si vous n'avez aucune idée du codage. Il est donc recommandé de faire appel à l’aide d’un expert pour créer des animations CSS dans WordPress. Alternativement, le texte animé fantaisie ElementsKit est un widget intelligent qui vous aide à concevoir rapidement n'importe quelle animation élégante. Avec le widget, vous pouvez transformer les textes choisis en animations fantaisistes.