Animated Headline (Pro)

The Animated Headline widget allows you to create attention grabbing headlines that either rotate or include highlighted animation.


Content

Headline

Style: Choose Highlighted or Rotating style

If Highlighted style is chosen, the following options become available:

  1. Shape: Choose the shape of the highlight, including Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, and X
  2. Before Text: Type the headline text that will appear before the highlighted text
  3. Highlighted Text: Type the text that will be highlighted
  4. After Text: Type the headline text that will appear after the highlighted text
  5. Infinite Loop: Set 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.
  6. Duration: Set the amount of time in milliseconds that the animation takes for one loop.
  7. Delay: If Infinite Loop is set to Yes, this option becomes available. Set the amount of time in milliseconds between each loop.
  8. Link: Enter the URL for the item’s link. Click the Link Options cog  to set more link options.
  9. Alignment: Set the alignment of the headline, Left, Center, or Right
  10. HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph

If Rotating style is chosen, the following options become available:

  1. Animation: Choose the animation of the rotating text including Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, and Slide Down
  2. Before Text: Type the headline text that will appear before the rotating text
  3. Rotating Text: Enter the list of rotating text, in the order of rotation
  4. After Text: Type the headline text that will appear after the rotating text
  5. Infinite Loop: Set 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.
  6. Duration: Set the amount of time in milliseconds that the animation takes for one loop.
  7. Link: Enter the URL for the item’s link. Click the Link Options cog  to set more link options.
  8. Alignment: Set the alignment of the headline, Left, Center, or Right
  9. HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph

Style

Shape (option only available if Highlighted type is chosen)

  1. Color: Choose the color of the highlighted shape
  2. Width: Set the width of the highlighted shape
  3. Bring to Front: Slide to Yes to Bring the shape to the front
  4. Rounded Edges: Slide to Yes to round the edges of the shape

Headline

  1. Text Color: Choose the color of the headline’s before and after text
  2. Typography: Set the typography options for the headline’s before and after text

Animated Text

  1. Text Color: Choose the color of the animated text
  2. Typography: Set the typography options for the headline’s animated text

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Animated Headline widget

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page