The Typewriting effect looks pretty attractive and can be used to showcase your Services or whatever you want to show. And creating a Typewriting effect in Divi was not possible before the release of our Divi Typing Effect Module you can use this module to easily create a Typing effect in Divi without any coding and the best thing is that this Module is Free and can be found in Divi Supreme Lite.

So In this short tutorial, we’ll see how to use this Free Module to create an attractive Typing effect in Divi.

Let’s get started

First of all, Enable the Divi Builder on the Page you want and choose the location where you want to show the Typing Effect and then simply insert the module.

Now in the content tab you’ll need to set up the text you want to show to the visitors.

• Before Text – Add some text here that will be shown before the Typing text
• Typing Effect Text – This is where you’ll need to add text the will have the Typing effect. You’ll need to write each line with a Separator “|”
• Typing Text on a New Line – Will move the Typing text to the new line below the Before Text, Enable it If you want.
• After Text – Add some text here that will be shown after the Typing text/
• After Text on a New Line – Will move the Typing text to the new line below the Typing Text, Enable it If you want.

After you’re done with Setting up the Text, you can now scroll down a bit to Typing Options to play with Typing Text’s Speed and more.

• Use Loop – If enabled the Typing Effect Text will always keep Looping/Typing.
• Typing Speed – Enter the value in ms to control the speed of the Typing Text when Typing.
• Typing Backspeed – Enter the value in ms to control the backspace speed when removing the text to show another one.
• Back Delay – Enter the value in ms to add a delay to the Backspace.
• Use Fade Out – Will remove the backspace animation with Fade.
• Use Shuffle Letter – Enable to shuffle your Typing Effect text strings and it will type the text randomly.
• Cursor Character – Change the character that is shown as a Cursor to your own one.

And after you’re done making changes here you can now move to the Design tab to make some design changes to the Text.

Main Text

In the Main Text panel, you’ll be able to make changes to the Text that will affect the Before/After and Typing text.

Before Text

The changes you’ll make here will affect the Before text.

After Text

The changes you’ll make here will affect the After text.

Typing Styles

This is where you’ll be able to make changes to Typing text, you’ll be able to change the Cursor Color, Change Background color and you can even add Padding and much more.

So that’s, that’s how easy it is to create a Typing Effect in Divi for Free. Here’s a quick look

So that’s it for today’s’ very short tutorial let us know what you think about this awesome freebie for Divi in the comment section below. Have a great day!