Pro Widgets

⌘K
  2. Home
  4. Docs
  6. Pro Widgets
  8. Best Elementor Pro Addons...
  10. Animated Headline

Animated Headline

How to Configure and Style the Animated Headline Widget for Elementor

Low engagement due to static headings? And visitors scroll past without noticing key messages. With the Elementor Animated Headline widget, you can turn simple headings into dynamic, eye-catching elements that improve user interaction and keep visitors engaged.

The Animated Headline widget for Elementor by Xpro allows you to create interactive headings with 20+ animation styles, image or GIF masking, icons, gradient text, separators, and shadow effects. Whether you’re building an anime website or a fully animated website with Elementor, it’s a simple way to highlight key messages, improve readability, and make your website stand out.

A complete YouTube tutorial for this widget is also available, offering a step-by-step visual guide to help you follow along more easily.

Requirements

To use the Elementor Animated Headline widget, install and activate the Xpro Elementor Addons Pro plugin. After installation, ensure the widget is enabled in your dashboard so it appears in the Elementor editor.

Step 1: Enable the Animated Headline Widget

  • Go to your WordPress dashboard.
  • Click on Xpro Addons
  • Open the Widgets tab
  • Find the Animated Headline widget
  • Toggle it ON

How to Use Elementor Animated Headline Widget

Once enabled, you can quickly add the Animated Headline widget for Elementor to your pages and start creating engaging headings.

Step 1: Add the Widget

  • Open your page in Elementor
  • Go to Xpro Addons – Pro
  • Search for Animated Headline
  • Drag and drop it onto your page

How to Add and Style Heading Titles

The Elementor Animated Headline widget gives you full control over how your headings look and behave.

Step 1: Add Heading Content

  • Go to the Content tab
  • Enter text in the Title Before field (static text)
  • Add your main text in the heading fields (before, animated, after)
  • Set the HTML tag (default H2)
  • Add a link if needed
  • Adjust alignment from the Style tab

You can then move to the Style tab to customize typography, text color, background, border, and shadow effects.

How to Add Animated Text in Elementor

Animated text helps highlight key words and makes your headings more engaging.

  • Enter your text in the Animated Title field
  • Use commas ( , ) to add multiple words that rotate one by one
  • Add a single word if you want a fixed animation

Styling Options

  • Choose from multiple text animations
  • Adjust animation speed and type
  • Customize typography, color, background, and borders
  • Add cursor effects for typing animations

This helps create visually appealing and interactive headings that attract user attention.

While designing your headings, you can also enhance your website using a free Elementor theme builder to customize headers, footers, and layouts. You can speed up your workflow with free Elementor templates and extend functionality using advanced Elementor addons like Xpro.

How to Add Icons and Alignment

Icons help communicate meaning quickly and improve visual appeal.

  • Enable the Icon option
  • Choose an icon or upload SVG
  • Set position (top, float, inside, behind)

From the Style tab, you can:

  • Adjust size and color
  • Add background and gradient
  • Apply box shadow
  • Fine-tune alignment using transform settings

How to Add and Style Separator

Separators help organize content and improve layout clarity.

  • Enable the Separator option
  • Choose from shapes, icons, or lines
  • Set position (before or after heading)

Then style it by adjusting:

  • Size and color
  • Spacing and margin
  • Border styles

How to Apply Image or GIF Masking in Animated Headline Widget

Masking is a powerful feature of the Elementor Animated Headline widget that allows you to fill text with images or GIFs.

  • Go to the Style tab
  • Upload an image or GIF as background
  • Enable masking
  • Adjust size, position, and attachment

This feature is especially useful when designing a modern animated website with Elementor or a visually rich anime website.

Why Use Animated Headline Widget Over Other Elementor Addons?

Compared to other Elementor addons like Essential Addons or Premium Addons, the Animated Headline Widget in Xpro focuses more on flexibility and creative control.

  • More animation styling options
  • Better control over text structure (before, animated, after)
  • Advanced design features like masking and dual colors
  • Cleaner UI for faster workflow

This makes it a strong choice for users who want more than just basic heading animations.

For even better results, you can combine the Animated Headline Elementor feature with the Elementor Advanced Heading widget and a free Elementor Heading widget to create a complete heading design system for your website. This approach helps you mix static and animated headings effectively across your animated website Elementor layout.

How can we help?