In this guide, we’ll show you how to add a “Typewriter Text Effect widget” to your Elementor website. The Typewriter Text Effect widget lets you display dynamic, animated text that mimics the look of real-time typing, ideal for creating eye-catching headlines and rotating phrases that capture attention. This free widget adds movement and personality to your content, making it perfect for highlighting key messages or engaging visitors with smooth, animated transitions.
Let’s explore the customization options available in the “Typewriter Text Effect widget” for Elementor below.
Add a Typewriter Text Effect to Elementor
This widget requires “Unlimited Elements Pro” version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Typewriter Text Effect" in the widget library.
Hover over the widget and click Install.
Add a Typewriter Text Effect Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Typewriter Text Effect" in the widget panel.
Drag and drop the “Typewriter Text Effect” widget into the container.
Elementor Typewriter Text Effect Widget General Settings
Before Text
Displays static text before the typing animation begins.
After Text
Displays static text after the typing animation ends.
Loop
Enables or disables continuous repetition of the typing animation.
Typing Speed (ms)
Controls the speed at which each character appears.
Next String Delay (ms)
Sets the delay before the next string begins typing.
Show Cursor
Toggles the visibility of the blinking cursor.
Cursor Character
Defines the character used as the cursor.
Viewport Trigger
Starts the animation only when the widget enters the viewport.
Trigger Delay (ms)
Sets a delay before the animation starts after the widget becomes visible.
Define Typed Strings
Input and manage the text that will be animated by the typewriter effect.
Add New Strings
Add more text entries to the typing sequence.
Duplicate Strings
Create copies of existing text strings.
Remove Strings
Delete specific text strings from the list.
Elementor Typewriter Text Effect Widget Style Settings
Align
Sets the horizontal alignment of the text.
Beginning Text Typography
Controls font and style for the text before the animation.
Typewriter Typography
Controls font and style for the animated typing text.
Ending Text Typography
Controls font and style for the text after the animation.
Beginning Text Color
Sets the color of the text before the animation.
Typewriter Color
Sets the color of the typing animation text.
Ending Text Color
Sets the color of the text after the animation.
Typewriter Text Effect Widget Design Examples For Elementor
Here are some live use cases for the Typewriter Text Effect widget.
Ajax Search with an Animated Typewriter Text Effect.
Team Member Carousel with Typewriter Text Effect.
Thank you for using the Typewriter Text Effect widget for Elementor! This free widget brings your text to life with real-time typing animations and rotating phrases, allowing you to create engaging, attention-grabbing headlines. It’s a simple yet effective way to add motion and personality to your site’s content. Need help or inspiration? Visit our demo page to see the widget in action and explore creative examples.
