Add This Stunning Typing Text Effect in Elementor – (No Pro Needed!)
A typing/typewriter text effect — where letters appear one at a time as if someone were typing them live — is one of the easiest ways to make a hero section feel more dynamic without touching a single line of custom JavaScript. Here are three ways to add it in Elementor, from easiest to most flexible, all of them free.
The Short Version
- You do not need Elementor Pro to get a typing effect — free plugin widgets handle it fully
- Essential Addons for Elementor’s “Fancy Text” module is the fastest no-code option
- The Plus Addons offers a similar “Heading Animation” widget with typewriter support
- A pure Custom CSS approach exists for anyone who wants to avoid adding another plugin
- Best fit: hero sections, taglines, and any short rotating-phrase headline
Method 1: Essential Addons for Elementor (Easiest)
This is the most beginner-friendly route and works entirely for free:
- Go to Plugins → Add New, search for “Essential Addons for Elementor,” install and activate it
- In the plugin’s settings, make sure the “Fancy Text” element is toggled on
- Edit any page with Elementor, search for “Fancy Text” in the widget panel, and drag it onto your page
- In the widget settings, add your rotating phrases, choose the “Typing” animation style, and adjust typing speed and pause duration to taste
This is the right choice if you want a working effect in under five minutes without thinking about code at all.
Method 2: The Plus Addons “Heading Animation” Widget
If you’re already using The Plus Addons for Elementor for other widgets on your site, its Heading Animation widget includes a typewriter-style option, so you can add the effect without installing yet another plugin just for this one feature. The setup pattern is nearly identical: drag the widget in, add your text variations, and select the typing animation style from the widget’s settings panel.
Method 3: Pure Custom CSS (No Extra Plugin)
If you’d rather not add a plugin just for one effect, Elementor’s built-in Custom CSS panel (Advanced tab → Custom CSS on any text element) can produce a typing-style reveal using CSS animation properties like steps() combined with a blinking-cursor border animation. This method takes more trial and error to get the timing right, and it works best for a single static phrase rather than multiple rotating phrases — for rotating text, a plugin widget is genuinely simpler.
Choosing the Right Method
| Method | Best For | Rotating Phrases? |
|---|---|---|
| Essential Addons Fancy Text | Fastest setup, no plugins yet installed | Yes |
| The Plus Addons Heading Animation | Sites already using The Plus Addons | Yes |
| Custom CSS | Avoiding an extra plugin, one static phrase | No (single phrase only) |
A Realistic Example
A freelance designer’s homepage hero often reads better with a rotating headline — “I build websites that convert. / That load fast. / That your clients love.” — than one static sentence. Using Essential Addons’ Fancy Text widget, each phrase is added as a separate line in the widget settings, and the plugin handles typing each one in, pausing, then erasing and typing the next automatically.
Troubleshooting Common Issues
- Effect doesn’t appear at all — check that the Fancy Text (or equivalent) element is enabled in the plugin’s global settings; some addon plugins ship with individual widgets toggled off by default to keep page load lean.
- Text jumps or flickers — usually a font-loading timing issue; setting an explicit width or min-height on the text container prevents the layout from shifting as characters type in.
- Animation restarts oddly on mobile — some widgets restart the typing animation every time the element re-enters the viewport during scroll; check for a “trigger once” or “play once” setting in the widget’s animation options.
- Effect conflicts with page caching — if you’re using a caching plugin, make sure animation-related JavaScript isn’t being minified or combined incorrectly; excluding the relevant script from aggressive JS optimization settings usually resolves it.
When a Typing Effect Helps vs. Hurts
A typing animation draws the eye — that is exactly why it works well in a hero headline and exactly why it becomes annoying almost everywhere else. It is most effective used once per page, near the top, on a short phrase a visitor will read in full anyway. It becomes a liability when used on body text a visitor is trying to scan quickly (the animation forces them to wait for text that would otherwise be instantly readable), or when used more than once on the same page, where repeated animation competes with itself for attention instead of guiding it.
Accessibility Considerations
- Respect reduced-motion preferences — visitors with `prefers-reduced-motion` enabled in their OS settings are typically sensitive to on-screen animation; a well-built implementation should check for this setting and skip the typing animation for those users, showing static text instead.
- Never put critical information only in the animated text — if a screen reader or a visitor with JavaScript disabled cannot see the animation play, make sure the underlying text is still present in the page’s HTML rather than generated purely by script, so the content remains accessible either way.
- Keep animation speed readable — a typing speed that is too fast defeats the purpose (nobody can actually read it as it types) and one that is too slow becomes an obstacle to visitors trying to get to the content below.
Testing the Effect Across Devices
CSS and JavaScript-based typing animations can render slightly differently across browsers, and mobile devices in particular sometimes show timing quirks that do not appear on desktop. Before considering the implementation finished, check it specifically on a real mobile device (not just a browser’s responsive-mode simulator) and in at least two different browsers, since animation timing bugs are one of the more common places where desktop testing misses a real mobile-only issue.
Will this work if a visitor has JavaScript disabled?
Method 3 (pure CSS) will typically still show the text, just without the typing animation itself, since CSS does not depend on JavaScript execution. Methods 1 and 2, which rely on a plugin’s JavaScript-driven widget, may not render the text at all without JavaScript — worth keeping in mind if accessibility for JS-disabled visitors is a specific concern for your audience.
Can I combine the typing effect with other animations, like a fade-in?
Technically yes, but it is rarely a good idea — stacking multiple animation effects on the same element usually looks busy rather than polished, and it compounds any performance cost. If you want extra visual interest, apply a secondary animation to a different nearby element (an image or button) rather than layering effects on the same headline.
How do I stop the animation from replaying every time the page is scrolled back into view?
Most plugin-based implementations (Methods 1 and 2) include a “play once” or trigger-on-load setting rather than re-triggering on every scroll-into-view — check the widget’s animation settings for this option. For the pure CSS method, this is controlled by whether the animation is tied to page load versus a scroll-triggered class, so review how the CSS keyframes are being triggered if it is replaying more than intended.
Frequently Asked Questions
Does this slow down page load?
The plugin-based methods add a small amount of JavaScript, similar to any other Elementor widget plugin — noticeable mainly on already-slow hosting. Pairing your theme with a lightweight base like Astra keeps the overall page weight low enough that this effect alone won’t meaningfully hurt load times.
Can I use a typing effect on more than just headlines?
Yes, though it’s best reserved for short, punchy text — subheadings, taglines, or short rotating value propositions. Using it on full paragraphs tends to feel slow and gimmicky rather than engaging.
Do I need Elementor Pro for any of these methods?
No — all three methods described here work on the free version of Elementor.
Which plugin is better, Essential Addons or The Plus Addons?
Both offer a comparable typing-effect widget. If you’re not already using either for other features, Essential Addons has a broader free feature set overall, making it the more general-purpose pick.
Can I change the typing speed?
Yes — both plugin widgets expose typing speed and pause-duration controls directly in the widget settings panel, no code required.
The Bottom Line
A typing text effect is one of the highest-impact, lowest-effort animations you can add to an Elementor site, and none of the three methods above require Elementor Pro. For most sites, a free plugin widget like Essential Addons’ Fancy Text is the fastest path to a polished result — save the Custom CSS route for the rare case where you specifically want to avoid adding another plugin.
