Tutoriel d'animation de texte en fondu enchaîné avec Elementor

Dans la conception de sites web.Animation de texteCela peut conduire à une expérience de site web plus engageante et interactive pour les utilisateurs. Dans cet article, je vais vous expliquer comment implémenter du texte dans Elementor.Effet d'animation ligne par ligne.

Pourquoi utiliser une animation en fondu ?

Les animations en fondu enchaîné ne rendent pas seulement le contenu de la page plus attrayant.vivementet attire l'attention de l'utilisateur sur le contenu essentiel. En affichant le texte ligne par ligne, vous évitez de surcharger l'information et améliorez l'expérience de l'utilisateur.

Étapes de la mise en œuvre d'une animation en fondu ligne par ligne

1. installer et activer Elementor

Avant d'utiliser une fonctionnalité d'Elementor, assurez-vous que le plugin Elementor est installé et activé. Vous pouvez l'installer en suivant les étapes ci-dessous :

1. Connectez-vous au backend de WordPress.
2. Naviguez vers "Plugins > Installer un nouveau plugin".
3. Rechercher "Elementor"Cliquez ensuite sur "Installation en cours".

4. Une fois l'installation terminée, cliquez sur "activer".

Si vous avez installé le logiciel Elementor ProL'animation est également disponible avec des fonctions d'animation plus avancées.

2. ajouter des widgets de texte

1. Ouvrez ou créez un nouveauPages/ArticlesUtilisez ensuite Elementor pour le modifier.
2. Dans le panneau des widgets à gauche, faites glisser le bouton "éditeur de texte"à n'importe quel endroit de la page.

3. utiliser les fonctions d'animation d'Elementor

1. Sélectionnez la zone de texte ajoutée, puis dans le panneau d'édition à gauche, cliquez sur "niveau élevéOnglet ".

2. Faites défiler vers le bas jusqu'à "effet de mouvement"Cliquez pour agrandir.

3. Dans "Aller à l'animation"Dans le menu déroulant, sélectionnez "s'effacer"(Fondu enchaîné).

4. effet de fondu enchaîné

Afin d'afficher le texte ligne par ligne, le contenu du texte peut être traité par segmentation :

1. texte descriptifdivisé en plusieurs lignesChaque ligne peut être placée individuellement dans leDans différents widgets de texte.
2. Définissez l'animation d'entrée séparément pour chaque widget de texte, en veillant à ce que chaque zone de texte soit définie sur "s'effacer".
3. En réglant leTemps de retard pour chaque zone de textepour obtenir l'effet d'affichage ligne par ligne. Sélectionnez les widgets de texte l'un après l'autre, dans le menu "effet de mouvement", définissez les paramètres appropriés de l'optiondélai d'animation(par exemple 0,2 seconde(math.) genre0,4 secondeetc.), de sorte que le texte s'affiche de manière séquentielle, ligne par ligne.

5. effet de fondu avancé (obligatoire) Elementor Pro)

Si vous disposez d'Elementor Pro, vous pouvez également définir des effets d'animation plus détaillés pour chaque paragraphe de texte. Exemple :

1. Ouvrez".effet de mouvement"Partie.
2. Activer"effet de défilement", sélection de la transparence "s'effacer".

3. Ajustez la vitesse, la direction et le point de déclenchement de l'animation pour que le texte s'estompe ligne par ligne au fur et à mesure que l'utilisateur fait défiler le paragraphe.

6. prévisualisation et publication

Une fois que vous avez terminé tous les réglages de l'animation, cliquez sur le coin inférieur gauche de la page "avant-premièresCliquez sur le bouton " " pour vérifier que l'effet est conforme aux attentes. Si tout va bien, cliquez sur le bouton "poste"pour mettre en ligne une page avec une animation de texte ligne par ligne.

résumés

Avec Elementor, il est facile de mettre en œuvre des animations de fondu-enchaîné de texte ligne par ligne visuellement attrayantes qui améliorent l'expérience de l'utilisateur. Cet effet est particulièrement adapté aux pages qui doivent afficher un contenu important, comme les descriptions de services, les pages marketing et les pages d'atterrissage. Une bonne utilisation de l'animation peut rendre votre site web plus dynamique et accroître l'attention de l'utilisateur pour le contenu de la page.