Animation Addons

Animation Addons

Animations Widgets

Animated Heading

Estimated reading: 3 minutes 98 views

Before setting up the Animated Heading, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Animated Heading—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Animated Heading 1

Introduction

The Animated Heading widget adds eye-catching titles with customizable animations and styles.

Key Use Cases for the Animated Heading in Elementor:

  • Use the Animated Heading widget to add dynamic and engaging titles to your website.
  • Customize the animation effects, fonts, and styles to grab attention and enhance the overall visual appeal of your content. Perfect for highlighting important headings or sections.

Prerequisite

  • Elementor
  • Animation Addons for Elementor

How to Activate the Animated Heading Widget?

  • Go to Animation Addons → Elements in your WordPress dashboard.
  • Find the Animated Heading Widget in the list.
  • Toggle it on to enable the widget.
  • Now, the Animated Heading Widget is ready to use!
Animated Heading 2

How to Add Animated Heading Widget in Elementor

  1. Open the page where you want to add the Animated Heading.
  2. Launch the Elementor editor.
  3. In the Elementor panel, search for “Animated Heading” .
  4. Drag the Event Slider widget to your desired section.
  5. The Event Slider widget will now be available for customization.

How to Configure the Animated Heading Widget

  • In the Elementor panel, search for the “Animated Heading Widget.”
  • Drag and drop the widget into your desired section.
  • Customize the heading settings using the available options in the Elementor panel.
Animated Heading 3

Your Animated Heading Widget is now ready to use! Configure the settings to create. dynamic, eye-catching titles for an engaging user experience.

Content Settings

You will find only one option there – Heading.

Animated Heading 7

Heading

Animated Heading 4
  • HTML Tag: Select the appropriate HTML tag for your heading (e.g., H1, H2, etc.).
  • Link: Add a URL to make the heading clickable.
  • Alignment: Choose the alignment of the heading (left, center, right).

These settings will allow you to create a structured, clickable, and well-aligned title for your element.

Style Settings

Now, style your Animated Heading’s animation, font, size, color, and alignment to create an engaging user experience.

Animated Heading 5

In the Animated Heading Animation section, you will find the following options:

  • Start Color: Set the color for the starting animation state.
    Typography: Customize the typography settings, such as font family, size, weight, etc.
  • Animation Colors: Customize the color codes for the animation effects & 
  • End Color: Set the color for the ending animation state.

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.

Animated Heading 6

Final Outcome:

Congratulations! You’ve now mastered configuring the Animated Heading widget in Elementor to create dynamic and attention-grabbing titles for your website.

If you need any further assistance or have any inquiries, feel free to reach out to our support team!

Share this Doc

Animated Heading

Or copy link

CONTENTS