Auto Type element

How Can We Help?

Auto Type element

Print
You are here:

You can use Auto-Type element if you want to add an animated text typing as we did on the Promo Page on the Multilingual Section.

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. Choose Auto Type element.
  4. 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 in 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 an 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 the text is typed. (Unit are on milliseconds)

Extra class name — If you wish to style a 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 appears 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