help center

Search
Close this search box.
On this page

Animated Headline widget

Last Update: March 26, 2024

Add the widget

Animated Headline widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Animated Headline widget?

The Animated Headline widget allows you to create eye-catching and engaging website headlines. It enables you to animate headline text elements that rotate or include highlighted animation.

Additionally, this widget lets you easily customize the animation effects, speed, and styles to match your website’s design and branding.

Common use case

Matt is designing the homepage of a website for a trendy coffee shop. He wants to create an engaging headline that captures visitors’ attention and conveys the café’s unique atmosphere. Using the Animated Headline widget, Matt crafts a dynamic headline that reads, “Experience Coffee Culture: Sip, Savor, Socialize!”

With the widget’s animation effects, each word gently fades in, drawing the eye and inviting visitors to explore further.

Animated Headline widget 20

Additional use cases

  • Highlight product features.
  • Showcase testimonials.
  • Promote special offers.
  • Announce events or promotions.
  • Encourage newsletter sign-ups.

Add an Animated Headline widget: Step-by-step

  1. Add the Animated Headline widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under the Headline section, from the Style field, select either Highlighted or Rotating style.
    Animated Headline widget 11
  3. If Highlighted style is chosen, the following customization options become available:
    1. In the Shape field, choose the shape of the highlight, including Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, and X.
      Animated Headline widget 4
    2. In the Before Text field, type the headline text that will appear before the highlighted text.
      Animated Headline widget 19
    3. In the Highlighted Text field, type the text that will be highlighted.
      Animated Headline widget 16
    4. In the After Text field, type the headline text that will appear after the highlighted text.
      Animated Headline widget 7
  4. If Rotating style is chosen, the following customization options become available:
    1. In the Animation field, choose the animation of the rotating text, including Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, and Slide Down.
      Animated Headline widget 15
    2. In the Before Text field, add the headline text that will appear before the rotating text.
      Animated Headline widget 10
    3. In the Rotating Text field, add the list of rotating text, in the order of rotation.
      Animated Headline widget 18
    4. In the After Text field, add the headline text that will appear after the rotating text.
      Animated Headline widget 3
  5. Set the Infinite Loop field to Yes to have the animation loop endlessly or set to No to have it only play once and then remain frozen at the end of the animation.
    Animated Headline widget 2
  6. In the Duration field, set the amount of time in milliseconds that the animation takes for one loop.
    Animated Headline widget 8
  7. If Infinite Loop is set to Yes, and Highlighted style is chosen, the Delay field becomes available. Set the amount of time in milliseconds between each loop.
    Animated Headline widget 5
  8. In the Link field, enter the URL to make your headline clickable. Click the icon Animated Headline widget 17 to set more link options.
    Animated Headline widget 9
  9. Use the Alignment field to set the alignment of the headline. Options available are left, right, or centered.
    Animated Headline widget 6
  10. Use the HTML Tag field to define the type of HTML tag for your heading. Choices include H1 to H6, Div, Span, or Paragraph.
    Animated Headline widget 6

Settings for the Heading widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Animated Headline widget 1

Select either Highlighted or Rotating style for the headline animation.

  • Shape: Choose from various shapes for the highlight, such as Circle, Underline, Double, etc.
  • Before Text: Enter text to appear before the highlighted section.
  • Highlighted Text: Enter the text to be highlighted.
  • After Text: Enter text to appear after the highlighted section.
  • Animation: Choose from various animations like Typing, Flip, Slide, etc.
  • Before Text: Enter text to appear before the rotating section.
  • Rotating Text: Enter the list of texts to rotate through.
  • After Text: Enter text to appear after the rotating section.

Choose whether the animation loops endlessly or plays once.

Set the duration of the animation loop.

Set the delay between each loop.

Add a URL link to the headline. Click the icon Animated Headline widget 17 to set more link options.

Set the alignment of the headline text.

Choose the HTML tag for the headline.

Style tab

Animated Headline widget 15

Choose the color of the highlighted shape.

Set the width of the highlighted shape.

Slide to Yes to Bring the shape to the front.

Slide to Yes to round the edges of the shape.

Animated Headline widget 17 1 Animated Headline widget 22

Choose the color of the headline’s before and after text.

Set the typography options for the headline’s before and after text. For more details, see Typography.

Click the 🖋️ icon to apply a stroke effect to the headline before and after text. Learn more about Text Stroke.

Animated Headline widget 3

Choose the color of the animated text.

Set the typography options for the animated text. For more details, see Typography.

Click the 🖋️ icon to apply a stroke effect to animated text. Learn more about Text Stroke.

Advanced tab

The Advanced tab provides options to control the animated headline position, adjust the spacing, add custom code, and more.

Animated Headline widget 13 1 Animated Headline widget 25

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!