You can use Auto Type element if you want to add an animated text typing as we did on the Agency demo homepage or the contact page of this demo.
If you want to do the same on your site please just follow this simple procedure:

1. Make sure that you have clicked Backend Editor button on the WPBakery Page Builder (formerly Visual Composer) area.
2. Click on the Add Element button to continue.
3. Then when the Add Elements area appear just click the Laborator tab
4. Choose Auto Type element.
5. Auto Type Settings popup will appear and the options to choose are those:

 

AutoType Settings

• Content — Enter the content to display with typing text. You can apply HTML markup too. (read more below)
• Show more options — If you choose Yes on this area then some other animation options will show, and they are:
• Character for cursor* — Default character is “|“, you can change it or leave empty to remove the blinking cursor.
• Iteration loop* — Write how many times the animation will loop. Leave empty for single loop only, or set -1 for infinite loop.
• Type speed* — Speed when entering the text. We wrote 10 on our demo. (Unit are on milliseconds)
• Back speed* — Back speed when removing the text. We wrote 20 on our demo. (Unit are on milliseconds)
• Start delay* — Set delay before starting text typing.We wrote 0 on our demo. (Unit are on milliseconds)
• Back delay* — Set back delay after text is typed. (Unit are on milliseconds)
• Extra class name — If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your Custom CSS area. This field appear on every WPBakery Page Builder element.

* Parts marked with the asterisk are shown only when Yes is selected on the Show more options area.

 

Content area

Now we will write more about what you can include on the Content area that we mentioned earlier and those are the rules:

• Text within * will be animated. Example: *Sample text*.
• Text separator is ; (semicolon). Example: *First sentence; second sentence*
• Pausing inside texts: ^1000 in milliseconds unit. Example: *Hey, ^800 how are you?;Well, ^2000 I am Fine!*

 

Examples

For example on the Agency demo homepage we wrote something like this:

Clear thinking at the
wrong moment can stifle <span class=”block”>*imagination;inspiration;talent;creativity*</span>

On the Contact page of the agency demo we did this:

<h3>Why not say *Hi;Hola;Salut;Hej;Merhaba;العربية;Ahoj;您好;Ciao;Hello*</h3>

also on the Character for cursor area we added “?” character.

 

And that’s all that you need to create your auto type text. We can’t wait to see what you can create with this element 🙂