1. Home
  2. Docs
  3. Content management
  4. Shortcodes
  5. Writing effect

Writing effect

What is it for

Writing effect shortcode will make your text appear like it is just typed on keyboard. This fun way to make user focus on your introduction. Text can be looped or just printed out once.

You can check example use here.

Shortcode and its parameters

First lets see some examples:

[a13fe-writing-effect color="#ffffff" bg_color="#000000" loop="0"]My name is James|James Bond|Aston Martin?[/a13fe-writing-effect]
[a13fe-writing-effect]My name is James|James Bond|Aston Martin?[/a13fe-writing-effect]
[a13fe-writing-effect loop="0"]Text 1|Text 2|Last Text that stays visible[/a13fe-writing-effect]

So shortcode is named a13fe-writing-effect. Texts that should be typed are divided by pipe char | .

Shortcode has following parameters that you can use:

  • loop – (default 1) should text be looped forever. 1 for yes, 0 for no.
  • color – (no default value) color of typed text in correct CSS value.
  • bg_color – (no default value) background color of typed text in correct CSS value.

Also interesting effect is to use it with static text, where last words changes. Try this Example:

I am [a13fe-writing-effect]perfect|creative|Designer![/a13fe-writing-effect]

Using it with page builder plugins

When shortcode is entered in page builder with live preview, like Elementor, you will not see result right away. However after save, and visiting your page you should see effect fine.

This is caused by “partly refreshing” in those tools, however we are working on better integrations.

Displaying effect on Mobiles

It is good to disable this effect on mobiles to save CPU of your user device. Also if your text loop forever your user can experience “jumping screen” effect on smaller screens, cause text is entered and deleted.

You have to decide depending on how you use it. You can switch mobile view on & off in Appearance → Customize → Miscellaneous Settings → Writing effect.

Was this article helpful to you? Yes 1 No