Encore un effet que l’on rencontre couramment sur de nombreux sites (et même sur la page d’accueil de Divi Community !), l’effet machine à écrire permet d’animer du texte, un titre, des mots-clés… pour les mettre en valeur et dynamiser ses pages.
Voyons comment nous pouvons réaliser simplement cet effet dans Divi.

 

Pour débuter

Pour la petite histoire, cette animation de texte est issue d’une librairie JavaScript créée par Matt Boldt et nommée Typed.js. En suivant ce lien, vous pourrez découvrir différentes variantes de cet effet et trouver les indications nécessaires si vous souhaitez implémenter la librairie “à la main”.
Mais en ce qui nous concerne, dans cet article nous allons nous simplifier les choses en installant le plugin gratuit Typing Effect disponible sur le repository de WordPress.org.

Commencez la configuration

Un fois le plugin Typing Effect installé et activé, vous verrez apparaitre dans le menu de WordPress, un élément nommé… Typing Effect !

Cliquez dessus pour afficher la page d’options du plugin et découvrir les réglages qui, vous allez le voir, sont très simples.

 

Ajoutez du texte

Pour commencer, il vous faut définir le texte que vous souhaitez animer.
Par défaut, 2 champs sont disponibles mais vous pouvez en ajouter d’autres en cliquant sur Add Row ou alors en supprimer en cliquant sur Remove.

 

Générez un aperçu de l’effet

En cliquant sur le bouton Generate Shortcode, dans la première metabox intitulée Preview et située à droite de la page d’options, vous pourrez déjà avoir un premier aperçu de votre texte animé.
Je reviendrai plus tard sur la seconde fonctionnalité de ce bouton.

 

Affinez les réglages

Je vais maintenant vous détailler les divers réglages possibles et accessibles via la seconde metabox nommée Settings.

Notes :

• Les réglages temporels sont définis en millisecondes. C’est-à-dire que si vous souhaitez préciser 1 seconde, vous devez inscrire 1000 dans le champ de saisie.
• Si vous désirez voir le rendu de chaque réglage, il vous faudra à chaque fois cliquer sur le bouton Generate Shortcode pour actualiser l’aperçu.

• Type speed : réglez la vitesse d’apparition des lettres
• Start delay : définissez un délai avant que ne début l’effet
• Back speed : réglez la vitesse à laquelle le curseur efface le texte
• Back delay : définissez un délai avant que le curseur efface le texte
• Loop : choisissez si l’animation doit être jouée une ou plusieurs fois
• Loop count : précisez le nombre de fois que l’animation doit être jouée
• Shuffle : animez aléatoirement vos différents textes (nécessite que vous ayez rempli a minima 2 champs de texte)

 

Générez le shortcode

Sans surprise, vous l’avez compris, en cliquant sur le bouton Generate Shortcode, un shortcode est généré dans les encarts jaunes.
Le premier encart contient un shortcode à insérer dans les champs texte -> contenu des modules de Divi (c’est donc celui-ci qui va nous intéresser).
Le second encart serait à utiliser si vous souhaiteriez injecter l’effet directement en PHP dans un fichier de template de votre thème enfant.

 

Ajoutez votre effet de texte animé dans les modules du Divi builder

 

Dans le module Texte

Dans la plupart des cas, vous allez très certainement utiliser le module texte de Divi pour ajouter votre effet de texte tapé à la machine à écrire.
Pour ce faire, il vous suffit de copier/coller votre shortcode dans l’onglet Illustration de la rubrique Contenu du module texte.

Notez que le style (corps, graisse, couleur…) de votre texte animé dépendra des réglages de votre module texte.
Vous pouvez donc utiliser tous les réglages à votre disposition, niveaux de titres inclus.
Par contre, vous ne pouvez pas faire de lien sur les textes qui seront animés.

 

Dans le module Diapo

Ce type d’effet fonctionne également très bien dans un slider. Dans ce cas d’utilisation, sachez que le shortcode ne peut pas s’insérer dans le champ Titre du module. Vous devez donc le placez dans le champ Contenu et lui attribuer un niveau de titre.

SI vous souhaitez voir l’exemple animé de la capture d’écran ci-dessus, c’est par ici. Dans ce cas de figure, vous constaterez que j’ai uniquement animé un mot.

 

Pour conclure

Encore un effet fun et super facile à utiliser dans vos sites Divi grâce à un plugin gratuit qui vous permet d’implémenter une librairie JavaScript sans avoir à mettre les mains dans le code.
Amusez-vous bien et n’hésitez pas à poster dans les commentaires des sites sur lesquels vous utilisez cet effet machine à écrire.

Partager