In this tutorial, we will go over the animated headline widget in Elementor. We will create and style an animated headline for a landing page.
This tutorial will cover:
✔︎ How to add an animated headline widget to your web page
✔︎ Content options in animated headlines
✔︎ How to customize the styling options in animated headlines
✔︎ And much more!
Hey there. It’s Aviva from Elementor. Today I’ll show you how to use the Animated Headline widget in Elementor.
Animated headlines help guide your visitors’ attention and can be used on website and landing pages alike, creating emphasis on content you wish to highlight.
The Animated Headline is one of the most popular Pro widgets in Elementor, and with good reason: It offers a wide variety of customizable options, for unique and eye-catching headlines.
So let’s get started and see how you can create and customize Animated Headlines for your website.
Content
Here we have a Landing Page design for a DIY website. We’ll create an animated headline, to encourage visitors to subscribe to the newsletter.
Start by dragging in the animated headline widget.
Let’s first change the text. Type in your Before Text…Highlighted text…and after text, if you’d like. Each text field also has a dynamic tags option.
Now that we have the text, let’s check out the style options. There are two main Styles – Highlighted and Rotating. We’ll take a look at each of them, in depth.
For the Highlighted style, we have a number of attention-calling shape options…
Circle, curly, underline, double, double underline, underline zigzag, diagonal, strikethrough, and X. Just click any one to preview it. Cool!
I’ll go with Underline for this headline.
Next, are the animation options. Animation Duration controls the speed of the animation, and Delay controls the amount of time between animations. Toggle Infinite Loop to No, if you’d only like to run the animation once.
You can add a link to the headline, here. Below that is the alignment. Let’s change it.
And last is the HTML Tag.
Let’s style the Highlighted Headline.
First choose the shape color. You can change its width by dragging the slider, or typing in a value.
Toggle Bring to front, to bring the highlight shape in front of the text. And Rounded Edges to round the ends. Nice!
Next are the Text options.
You can change the text color … and typography. And you can change Animated Text color …and typography options as well.
Let’s go Back to Content…and check out the Rotating text options. Update the display Text first. Create a list of Rotating Text values, and be sure to hit enter between each one.
As you can see, we now have a variety of fun animation options available: Typing, Clip, Flip, Swirl, Blinds, Drop-In, Wave, Slide, and Slide down. I’ll select Typing.
As with Highlighted text, there are Infinite Loop and Duration options, as well Link, alignment, and HTML.
Now go to Style. Once again, we can change the Text Color…and Typography.
As well as the Animated Text color…and typography, if desired.
Under Selected Text, selection color controls the color of the selection, and Text color controls the color of the type while it’s selected. And we’re good to go.
Let’s Publish and Preview. Looks great!
Let’s check out some other examples of Animated Headlines.
PURPLE
In this example, I used Rotating Style, together with Flip Animation.
PRICING
Here I’ve again selected Rotating. To get this sliding arrow effect, I chose Slide Animation, and typed multiple glyph arrows for the Rotating text.
HIGHLIGHTER
To get this highlighter effect, I selected Highlighted Style, with the Strikethrough shape, and set the width to 120.
TEACH TOMORROW
And for this page, I’ve used not one, but TWO Animated Headlines with Rotating and Wave for an extra special effect.
And there you have it. Now you know how to use the Animated Headline widget to draw your visitors’ attention to important content on your website and landing pages.
So go ahead, play with all the options, and create striking Animated Headlines, with Elementor. We can’t wait to see what you come up with.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit the notifications bell.
