Comment ajouter une animation au texte dans WordPress

Les styles de texte sophistiqués attirent rapidement l'attention des 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 une fois, 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. En suivant correctement les étapes et les instructions, vous pourrez personnaliser votre propre animation en douceur.

Comment ajouter des effets de texte animés 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 comment ajouter ces effets ; mais avant cela, vous devez 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 également un excellent moyen d'ajouter un peu de plaisir et d'excitation à vos articles et titres . Lorsque vous choisissez d'utiliser un effet de texte animé fantaisiste, vous pouvez créer divers effets. Certains effets sont simples comme la modification de la couleur ou de la taille du texte , tandis que d'autres sont des animations détaillées telles que le texte clignotant ou clignotant .

Le texte animé est un peu différent du texte normal. Habituellement, ce type de texte ne bouge pas tout seul. Au lieu de cela, il a un effet qui le fait apparaître comme s'il se déplaçait sur l'écran. Ainsi, les textes fantaisistes incitent les gens à cliquer sur le contenu, les liens ou les e-mails ouverts .

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 "call-to-action" avec un fond rouge et un texte blanc indiquant "Cliquez ici !" lorsqu'on clique dessus.

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

• Rend vos conceptions visuellement plus intéressantes.
• Mettez en évidence les offres spéciales et les informations importantes.
• Rend les caractéristiques de votre produit perceptibles.
• 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 offre différents types de plugins pour faciliter les tâches de style de texte. ElementsKit est un plugin aussi puissant qu'un addon pour le constructeur de pages Elementor. Avec ElementsKit, vous aurez tout sous un même capot.

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

Connectez-vous à votre tableau de bord -> Sélectionnez n'importe quelle page ou publication -> Cliquez sur Modifier avec ElementsKit -> Recherchez le widget ElementsKit Fancy Animation Text -> Faites glisser et déposez le widget

Rubrique Contenu

La partie s'appelle la partie Fancy Text , elle contient les champs suivants-

Animation

• Style d'animation - Ici, les deux options sont Texte ou SVG, les deux vous permettent de créer 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 case d'option.
• Révéler le délai d'animation (ms) - Ajustez ici le délai d'animation. Il spécifie qu'une animation peut commencer plus tard, immédiatement à partir de son début, ou instantanément et à mi-chemin de l'animation.

Contenu

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

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

Rubrique Style

• Texte de l'en-tête – Utilisez ce champ pour ajuster l'alignement de l'en-tête, la typographie, la couleur, etc.
• Listes de texte fantaisie – Utilisez ce champ pour ajuster la typographie, la couleur et le remplissage.
• Curseur fantaisie – Vous pouvez donner au curseur un aspect fantaisiste avec la couleur, la largeur et la hauteur à l'aide de ce champ.

Après avoir modifié et stylisé toutes vos déclarations requises, cliquez sur mettre à jour et voir les modifications depuis le front-end. Un exemple est -

Appliquer CSS

Lors de la création d'animations CSS dans WordPress, gardez à l'esprit les éléments de base mais importants suivants :

• Définition d'un nom d'animation droit - C'est le nom qui sera affiché sur un élément lorsqu'il est 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'une animation prendra pour se terminer. Vous pouvez également définir ceci sur aucun ou 0 pour faire durer une animation indéfiniment ou jusqu'à ce que quelque chose d'autre se produise (comme un chargement de page).
• Animation-timing-function - 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 un laps de temps spécifique (en millisecondes). Par exemple, si vous définissez cette propriété sur easy-out, votre élément commencera à se déplacer lentement puis accélérera à la fin de sa durée avant de recommencer au début.
• Délai d'animation - Il s'agit d'une valeur qui spécifie le nombre de millisecondes à ajouter après la fin d'une animation avant qu'elle ne recommence (par exemple, 1 s).
• Animation-iteration-count - Il s'agit du temps dont vous avez besoin pour jouer l'animation. En utilisant la propriété CSS, vous pouvez compter cette itération.
• Animations-direction - C'est l'ordre ou la direction dans laquelle une animation doit être jouée. Il peut être normal, inverse, alterné et alterné-inverse.
• Animation-fill-mode – 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 cours ainsi que les valeurs que ces propriétés doivent prendre. Par exemple:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

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

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

Création d'un fichier animate.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 les images clés pour n'importe quelle animation . Ensuite, vous devez les associer à des classes CSS particulières à appliquer avec n'importe quel texte sur 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; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

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

 .MyAnimation { animation-name: MyAnimation; }

Vous pouvez trouver toutes les connaissances de base en animation CSS et pratiquer les codes ici !

Vous pouvez répéter cette procédure pour créer autant d'animations que possible en fonction de vos besoins. Ensuite, enregistrez le fichier sous animate.css. Alternativement, vous pouvez télécharger le fichier Animate.css . C'est 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 votre peine de coder l'animation complexe.

Le code ci-dessus animera le texte de votre balise h1 ' MyAnimation '. Vous pouvez changer la durée de l'animation en changeant le "3s" à une valeur différente . Vous pouvez également modifier les couleurs en modifiant les valeurs hexadécimales. Une fois que vous avez enregistré le fichier CSS, 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 le protocole de transfert de fichiers (FTP) -> Choisissez le client FTP (FileZilla, 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 n'avez pas le dossier de sous-répertoire, vous pouvez facilement en créer un nouveau. Pour cela, juste après avoir chargé le fichier faites une simple retouche pour créer le nouveau fichier et c'est fait.

Appelez la feuille de style Animate via functions.php

Vous trouverez le fichier functions.php dans le dossier de votre 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'); }

N'oubliez pas que si vous avez utilisé le fichier animate.min.css de Animate.css, vous devrez écrire animate.min.css dans la ligne de fin au lieu de animate.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 donc maintenant possible d'appliquer n'importe quelle classe dans le fichier animate.css pour voir différents effets d'animation dans les publications 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 de la barre d'outils du bloc s'il s'agit d'un éditeur de bloc -> Sélectionnez Modifier en HTML-> Ajouter l'animation class et la classe de votre animation à la balise element -> Preview

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

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