Animated Text

Introduction

Animated text in Elementor addon lets users easily add dynamic text effects like fades, slides, and bounces to their website, enhancing visual appeal and engagement with minimal effort.

Key Use Cases for Animated Text in Elementor Addons

• Use animated text to highlight key messages, create engaging headers, or add emphasis to call-to-action buttons.
• Enhance page introductions, promotional banners, or event announcements with dynamic text effects.

Prerequisite

• Elementor
• Animation Addons for Elementor

Note: Ensure that the Animation Addons for Elementor plugin is installed and activated. Then, enable the Animated Text Widget toggle from the plugin settings.

How to Activate an Image Widget ?

To activate the Animated Text Widget, navigate to Animation Addons → Elements in the admin dashboard. Then, select the Widget tab, search for the Animated Text Widget, and toggle it on. The widget will be activated immediately.

How to Configure the Animated Text Widget in Animation Addons?

After enabling, create a new page by navigating to Add New Page. Enter your desired title, select the template as Elementor Full Width, and then publish it. You can also adjust other options if needed. 

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

Upon selection, the Elementor editing panel will appear, providing all the necessary tools and customization options for building your page. And here you will find the interface after selecting the Elementor editing panel. 

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the ‘Animated Text Widget,’ drag and drop it into the section, then customize the animation style, timing, and text in the widget settings.

Here’s the interface where you can configure the settings and customize the Animated Text Widget across various tabs.

Configuring Animated Text Widget: A Step-by-Step Guide

The Animated Text widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

The Content section lets you choose your preferred image, adjust its resolution, and set the alignment.

• The Content section in Elementor lets you add and customize text, paragraphs, and other content types to your page.
• It’s used for adding main body text for blog posts, landing pages, or other written content.
• Elementor’s text editing options allow easy styling and formatting to match your site’s design.

Text Animation

• And, explore the optional Text Animation section to apply effects for smooth transitions. 

      Note: Animations require the Pro version of the plugin.

—————————————————————————————————————————–

Style Settings

The Style section in Elementor allows you to customize the appearance of your text. 

• You can adjust the text color, set typography options (font family, size, weight), add text shadows for depth, and configure link styles, including their hover color. 
• These options help refine the visual design and ensure the text complements the overall look of your site.

So, you’ve completed all the customizations! Here’s the final output:

———————————————————————————————-

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

—————————————————————————————————————————–

Final Outcome

That’s it! You’ve now learned how to configure the Animated Text Widget in Elementor to effectively customize and display dynamic text on your website.

If you need further assistance, feel free to reach out to our support team!