Animations Title

Introduction

Want your titles to pop? The Animated Title Widget adds animations to your text, making it more engaging and fun for your website visitors.

Key Use Cases for the Image Widget in Elementor:

• Use the Animated Title widget to create eye-catching headlines for your homepage or landing pages.
• Highlight key services or promotions with dynamic animated text to engage visitors.

Prerequisite

• Elementor
• Animation Addons for Elementor

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

How to Activate an Image Widget ?

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

How to Configure the Animated Title Widget in Animation Addons?

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as 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. 

After selection, the Elementor panel appears with all tools and customization options.

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 Title”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

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

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

The Animated Title 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.

This is the Content section of the Animated Title Widget in Elementor. Here’s what each option does:

• Title: Enter your desired text. You can highlight parts of the text by enclosing them in square brackets [ ].
• Show Prefix: Toggle this option to display or hide a prefix before the title.
• HTML Tag: Choose the appropriate HTML heading tag (H1, H2, H3, etc.) for SEO and design structure.
• Alignment: Adjust the title’s alignment to left, center, right, or justified for proper positioning on the page.

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

Animation text

• 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 includes two sections: Title and Prefix.

This is the Style section of the Animated Title Widget in Elementor. Here’s what each option does:

Title Styling

• Text Color: Defines the title text color, allowing customization for better visibility and design consistency.
• Typography: Controls font properties, including style, size, weight, and letter spacing for enhanced readability.
• Text Stroke: Applies an outline effect to the text, improving emphasis and contrast.
• Text Shadow: Adds shadow effects to create depth and highlight the text.
• Blend Mode: Determines how the text interacts with the background for seamless integration.

Prefix

• Color: Choose a color to highlight specific words in the title.
• Background Type: Select a solid color or gradient for the highlight.
• Typography: Customize the highlighted text font style.
• Text Stroke: Apply an outline effect to the highlighted text.
• Text Shadow: Add shadow effects for better contrast.
• Blend Mode: Adjust how the highlight blends with the background.

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 Title Widget in Elementor to effectively customize and display images on your website.

If you need further assistance, don’t hesitate to reach out to our support team!