Dans la boîte à outils du web design, rien de tel qu’une animation bien placée pour ajouter une touche de magie à une page ou un article. Il est facile de comprendre pourquoi : l’animation peut donner vie à des éléments autrement statiques tels que du texte. Les choses qui bougent ont une façon d’attirer notre attention, donc l’animation est un excellent moyen d’attirer l’attention des téléspectateurs sur quelque chose. Tant que c’est fait avec goût, avec mesure et sens de la composition, l’animation peut être une aubaine pour votre site Web.
Le texte est un excellent exemple de l’utilité d’une animation. Les paragraphes peuvent apparaître sur une page d’une certaine manière. Des mots individuels peuvent également le faire – vous pouvez même définir des phrases entières pour qu’elles apparaissent une lettre à la fois, créant un effet de frappe élégant. Et bien qu’il soit certainement possible d’ajouter ces effets en utilisant HTML et CSS, nous avons créé un moyen plus simple pour vous d’ajouter du texte animé à votre site Web.
Notre plugin Qi Addons for Elementor – un ensemble de soixante addons Elementor personnalisés – contient exactement ce dont vous avez besoin. L’addon s’appelle le widget de texte animé, et c’est un excellent petit outil pour ajouter du texte animé dans WordPress. Dans cet article, nous allons vous montrer :
Si vous préférez regarder une vidéo plutôt que lire des articles, nous avons également un didacticiel vidéo pour le widget.
Parce que Modules complémentaires Qi pour Elementor est une collection de widgets pour Élémentor, Elementor doit être installé et activé sur votre site Web avant d’installer et d’activer le plug-in. Le constructeur de site Web est disponible en versions gratuite et pro – payante. Notre plugin ne nécessite pas la version pro. Une installation gratuite régulière est tout ce dont vous avez besoin pour profiter de tous les avantages des modules complémentaires Qi pour Elementor.
Une fois les modules complémentaires Qi pour Elementor installés et activés, vous remarquerez un nouvel ensemble d’éléments et de widgets dans votre panneau d’éléments Elementor. Pour commencer à créer votre effet de texte animé, recherchez « texte animé » dans le panneau latéral de gauche pour afficher le widget.
La prochaine étape devrait être de simplement faire glisser le widget vers une section de la page. Selon la conception de votre page, vous pouvez l’ajouter à une colonne dans une section à plusieurs colonnes. La disposition des sections que nous avons utilisée était celle par défaut, à une seule colonne.
Après avoir fait glisser le widget vers une section, l’onglet Contenu de l’addon s’ouvrira dans la section Options générales. C’est ici que vous pouvez modifier le texte par défaut du widget et ajouter le vôtre. Vous pouvez ajouter des mots simples, des phrases, des phrases ou des paragraphes entiers, quel que soit le texte que vous souhaitez animer.
Pour notre exemple, nous avons utilisé la phrase « Choisissez votre style d’animation ».
L’option suivante est la plus importante – Apparaître l’animation. C’est là que vous pouvez choisir quelles parties du texte – mots, lettres ou texte entier – se déplaceront ensemble dans l’animation. Vous pouvez également choisir la direction dans laquelle le texte apparaîtra sur la page et définir le délai d’apparition – combien de temps après que le visiteur a atteint la section de texte animé l’animation commencera.
Les options que nous avons choisies comprenaient la division du titre par lettre, l’apparition des lettres du haut et l’apparition de l’animation avec un retard de 200 millisecondes.
Vous pouvez combiner différents types de fractionnements et d’animations pour créer l’effet souhaité. Par exemple, si vous optez pour un effet de frappe, vous définirez le fractionnement « par lettre » et une animation « à partir de la droite ».
Une fois que vous avez choisi les options de titre et d’animation, vous pouvez passer au style du texte animé.
Les options de style dans le widget sont assez simples et faciles à naviguer. Pour commencer, certaines options vous permettent de choisir l’alignement et la balise de titre du texte. Pour cette démonstration, nous avons choisi l’alignement central et la balise title H3.
Les deux options suivantes concernent la couleur et la typographie du texte (famille de police, taille, poids, style, transformation du texte, décoration, ainsi que la hauteur des lignes et l’espacement des lettres). Nous n’avons pas changé la couleur du texte, mais nous avons apporté quelques modifications aux options de typographie. Nous avons changé la taille des lettres à 70 pixels et le poids à 400.
Nous avons choisi de ne pas modifier les options de remplissage du titre car nous ne voulions pas augmenter l’espacement autour de notre texte. Ainsi, notre exemple de texte animé était terminé et prêt à être affiché. Dans l’ensemble, la création n’a pris que quelques minutes et les résultats étaient superbes.
Finissons-en !
En ce qui concerne les options de conception auxquelles vous avez accès lors de la création de pages Web, plus c’est généralement mieux. Il n’en va pas de même pour leur utilisation, car de nombreuses options fonctionnent mieux lorsqu’elles sont soigneusement étudiées et ajoutées de manière à maximiser leur effet.
Pour l’animation de texte, cela signifie le laisser faire ce qu’il fait le mieux – attirer l’attention sur des morceaux de texte autrement statiques. Que vous l’utilisiez pour fondre des paragraphes entiers de texte ou pour créer des phrases en utilisant l’effet de frappe, Qi Addons for Elementor et le widget Animated Text seront les outils parfaits pour ajouter du texte animé dans WordPress.
Soutenez notre effort ❤️
Si vous avez apprécié cet article, pensez à laisser un pourboire pour nous aider à continuer à publier du contenu de qualité.
