Another effect commonly found on many sites (and even on the Divi Community homepage!), the typewriter effect allows you to animate text, a title, keywords... to highlight them and make your pages more dynamic.
Let's see how we can simply achieve this effect in Divi.

 

To start

For the record, this text animation comes from a JavaScript library created by Matt Boldt and named Typed.js. By following this link, you can discover different variants of this effect and find the necessary indications if you want to implement the library "by hand".
But as far as we are concerned, in this article we will simplify things by installing the free Typing Effect plugin available on the WordPress.org repository.

Start the configuration

Once the Typing Effect plugin is installed and enabled, you will see an item called ... Typing Effect! appear in the WordPress menu.

Click on it to display the options page of the plugin and discover the settings which, as you will see, are very simple.

 

Add text

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.

 

Generate a preview of the effect

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.

 

Refine the settings

Typewriter Text Effect Settings for Divi

I will now detail the various possible settings accessible via the second metabox named Settings.

Notes :

  • The time settings are defined in milliseconds. That is to say, if you wish to specify 1 second, you must enter 1000 in the input field.
  • If you want to see the rendering of each setting, you will have to click on the Generate Shortcode button each time to refresh the preview.
  • Type speed: set the speed at which the letters appear.
  • Start delay: set a delay before the effect starts
  • Back speed: set the speed at which the cursor erases text
  • Back delay: set a delay before the cursor clears the text
  • Loop: choose if the animation should be played once or several times
  • Loop count: specify the number of times the animation is to be played
  • Shuffle : animate randomly your different texts (requires that you have filled in at least 2 text fields)

 

Generate the shortcode

Generates shortcode typewriter text effect shortcode for Divi

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.

 

Add your animated text effect in Divi builder modules

 

In the Text module

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.

Add an animated text effect in the text module of the Divi builder

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.

 

In the Slide module

Add an animated text effect in the Divi builder's slide module

This type of effect also works very well in a slider. In this use case, please note that the shortcode cannot be inserted in the Title field of the module. You must therefore place it in the Content field and give it a title level.

If you want to see the animated example of the screenshot above, it's here. In this case, you will see that I only animated one word.

 

In conclusion

Another fun and super easy to use effect in your Divi sites thanks to a free plugin that allows you to implement a JavaScript library without having to get your hands into the code.
Have fun and feel free to post in the comments of the sites on which you use this typewriter effect.