Add This Stunning Typing Text Effect in Elementor – (No Pro Needed!)

Do you want a cool effect for your text that showcases multiple skills, services, and more like this? This is called the typing text effect. It keeps your hero section clean while creatively highlighting your message.

And you know what the best part is?
You can apply it to any heading even on multiple headings on the same page!

In this article, I’ll walk you through how to achieve this using the free version of Elementor along with a free plugin.

Can Elementor Free Do This?

If you’re using Elementor Free, here’s the thing:

• You need to use the Animated Headline widget to add the typing effect to your website.
• Bad news: This widget isn’t available in Elementor Free.
• Solution: Install a free plugin to access a similar widget.

Step 1: Install the Essential Addons Plugin

We’ll be using the Essential Addons plugin for Elementor.

To install:

• Go to your WordPress plugins library
• Search for Essential Addons
• Install and activate the plugin

Step 2: Add the Typing Text Effect

Now that the plugin is installed:

1. Go to Pages > Edit with Elementor
2. Search for the Fancy Text widget
3. Drag it to your page

You’ll see that the widget already includes a placeholder text with the typing effect.

Step 3: Customize the Typing Effect

Here are the customizable options:

• Prefix Text: This part of the heading doesn’t animate and remains the same.
• First, Second, and Third String: These are the texts that change with animation.
• Suffix Text: Optional text that appears after the animated part (you can remove it if not needed).

Step 4: Set Up Animation and Placement

Now, let’s do the animation and placement settings:

• Style: Keep it as Style 1 (Style 2 is available in Pro).
• Alignment: Set it to left.
• Animation Type: You can choose from different options:
  • Fade
  • Typing (we’ll stick with this one)

Replace the placeholder strings with your custom messages to personalize your design.

Step 5: Style the Typing Effect

Go to the Style Tab to customize:

• Color
• Typography
• Font Size
• Typing Cursor Color
• Spacing

Make a few basic adjustments until it fits your design.

Step 6: Final Layout Settings

Go back to the Layout Tab and click on Fancy Text Settings:

Here you can:

• Set the animation to loop
• Add a cursor effect
• Change the animation speed
• Set the delay between animations

Once you’re satisfied, preview your page — and you’ll see the typing text animation working perfectly!

Bonus: Elementor Pro Method

If you’re using Elementor Pro, the process becomes even easier:

1. Open your page and search for Animated Headline widget
2. Add it to your design
3. Use the same heading text as before
4. Choose the Typing animation style

With Pro, you can also explore extra effects like:

• Double underline
• Flip
• Swirl
• And many more!

Customize the text, align to left, set HTML tag to H2, and make your final style adjustments.

Final Thoughts

After publishing, your typing text effect should now work smoothly and bring life to your headings.

That’s not all — you can:

• Change animations
• Loop effects
• Customize text styles

Everything right from within Elementor.

Got Questions?

Comment below if you have any questions — I’ll help you out.

Also, check out the next article if you want to triple your site speed in just one minute.
Click here — you’re really going to thank me for this!