Introducing Animated Headline: New Pro Widget to Attract Your Visitor Attention

Today we are introducing a new Pro Widget: Elementor Animated Headline. Create attention grabbing headlines that highlight or rotate the most important part of the headline, delivering your main message in the clearest and most effective way.

In any website, the main headline has a tremendous influence over effectively delivering the message across to the visitor. Headlines should draw the visitor in, convincing them to either read more or opt-in to your service.

Top brands use creative animated and highlighted headlines to further draw the attention of the visitor to the headline. Now, you too can add animated and highlighted headlines, using Elementor's new Pro widget: Animated Headline

Highlighted headlines

Put the focus on the important part of your headlines with the following options of highlighted and animated shapes.

Rotating Headlines

Rotating Headline lets you take better advantage of your website real estate, delivering more than one message under the same space.

Typing

Clip

Rotating

Swirl

Blinds

Drop-In

Wave

Slide

Slide Down

Style Settings for the Headlines

You can designate a separate style for the animated text and the rest of the headline. Set different color and typography for each section of the headline.

If you choose the highlighted style, you can set the marker color, the stroke width, as well as rounded edges for the marker. You can also bring the line to front, to cover over the headline.

Special Uses of Animated Headlines

We covered the main uses in the video above, but here are some special uses of Animated Headlines, along with a short explanation how to set them.

Headline with marker effect

With this feature, you can create a marker effect, as if the headline is a line in a page that is highlighted by a marker.
  • Set a centered marker
  • Increase the stroke size to 100
  • Set the color to yellow

Remove the before or after text

The widget is flexible enough as to allow you to remove the before, after or both text parts, and just leave the animated part.
  • Leave the before and after text blank
  • Set the rotating or highlighted effect for the middle text

Heading with two separate styles

You could use this widget not only for animated headlines, but for headlines with two separate colors and typography.
  • Under the Style tab, set a different typography or color for the animated text and the rest of the text,

Why Use Animated Headlines

You might be wondering what are the scenarios that would be the best fit for using animated headlines. Here are just a few benefits of using this feature:

Increase conversion rate

The most obvious place to use this feature is on landing pages and homepages, where conversion rates matter the most.

In KlientBoost's post about conversion optimization, they mention 3 design principles targeted at increasing conversions. Two of these principles can be achieved using animated headlines: creating visual emphasis and using guiding horizontal lines.

Focus visitors on what's important

If you run a business, there is usually one benefit or pain point that should get the biggest focus and have the most relevance for your audience.

For a lawyer business, that focal point might be trust. For a plugin developer, it might be superior support. 

Using highlighted headlines lets you bring more focus to that specific benefit, by underlining the single word that targets that benefit.

This way, you increase the chances your site visitor gets that specific message across. 

Deliver more messages within the same space

Long form content is all the rage right now, and you can hardly find articles shorter than 2,000 words these days.

The problem is that long form content tends to bore users, so the likelihood of someone reading past the first 200 words is slim. You can use animated headlines to create an interesting break in the flow of content. This method is used by one of my personal favorite blogs, the Outline. They have headlines with top and bottom curly lines, that make the whole blog design more engaging and fun to read. It's animated, so you don't feel like you're reading a Wikipedia article.

You can also check out how brands like SendGrid and Hotjar use highlighted and rotating headlines for their homepages to get their users more engaged.

Create a break for long copy articles

If you run a business, there is usually one benefit or pain point that should get the biggest focus and have the most relevance for your audience.

For a lawyer business, that focal point might be trust. For a plugin developer, it might be superior support. 

Using highlighted headlines lets you bring more focus to that specific benefit, by underlining the single word that targets that benefit.

This way, you increase the chances your site visitor gets that specific message across. 

What's Next

Using any one of the options in animated headlines can result in some unique and spectacular headline designs. Customizing the headline animation is easy and visual, so you can experiment and create a headline design that suits your style and audience.

With the recent additions of Animated Headlines and Text Shadow Headlines, you now have a whole spectrum of new design possibilities to explore.

Animated headline is the first of several upcoming Pro releases, so stay tuned to get a lot more from your Elementor Pro.

Test this feature yourself and see how it affects your landing page conversion rate and engagement.

Let me know how you are planning to use it in the comments below.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time when it was only used to blog.

69 Responses

  1. Wow! Is there any future of all wp themes out there after elementor? I dont think so! BEST THING HAPPENED TO WORDPRESS EVER!! Bravoo!

  2. hi ben

    real nice addition, there are many third party widgets now available, i was thinking could you spend alot more time on the back end, like being able to add and remove the widgets you dont need as the widget area can be cluttered, also like adding a more varied color pallette using different web color pallettes such as flat pallette etc, also fix things like not being able to add json templates through the zip file, if you can make the pro solid technically i think many independants will be able to add widgets, so you guys should spend more time on the framework and just small technical things such as the mail chimp integration which will make the pro a real superior product

  3. Simply the best!!! It is a pleasure to be an elementor customer.

    a doubt!

    Any possibility of cololcar a function to download the custom templates?

    Hugs

  4. thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you

  5. I’m new in Elementor Pro community, and I love all the features It offers.

    All what I’m waiting for is:

    1- Headline gets/pull post or page title automatically.

    2- Text element to get/pull post or page author, category, tags, comments … automatically.

    3- Image element or background image (of a section/column) to get featured image automatically.

    4- Posts slider.

    5- Parallax effect for background images.

  6. Yay! This is cooler than you can imagine, and such great implementation too. Now we can start building nostalgic websites with flashing whatsits, like we did back in the 90’s! (but seriously, this is really cool. Even if just for the implementation of Typed.js alone!)

  7. Team Elementor does it again!!! Really impressive new features!!

    Something caught my eye in the “Remove the before or after text” section where you use different fonts (Poppins and Playfair Display) on the same line “MAKE Build & Design MORE EFFECTIVE”.

    Will this option be available for headlines in the future (or is something that we can use now without animating the text)? It’s been near the top of my wish list for a while.

    Thanks!

  8. elementors just great.
    everything on board for styling stunning sites and pages – in no time and easy as ever before. really, really great job guys… but… (sorry for this)

    … now it seems to me that the time has come to not add more fancy features for more optical purposes but for content and functions! (at least for a while!)

    we can style sites well, but we really need to push the content and function side – because thats what makes the strength of wp.
    so head up to:

    – enable the use of cpt custom fields (from acf, wptypes or our own)!
    – enable custom queries for posts and cpts in your widgets (veeery !important)
    – allow styling of archive pages and such

    the first two already would be a great step forwards to bridge some remaining gaps between elementor and its competitors!!

    got what i am after? go for it! 🙂

  9. Maybe its just me but I’m having some minor glitches. 1st is the alignment for the rotating text, it does not center. 2nd is when you have multiple words per line for the rotating text it makes the all the words one long word.

  10. Wow! That is amazing. You guys are knocking it out of the park. This will change the way AB testing is done on Headlines. I just wished you connected to all the ThriveTheme widgets.

  11. I am fairly new to wordpress and themes/plugins.. but from what I can tell elementor is awfully close to taking over the whole thing? I’m not really sure what themes offer at this point, other than more customization with headers/footers like sticky, side bars etc. (which wouldn’t be difficult for you to fix with a couple new features). Unless of course a person wants a premade theme/website then yes, but assuming we are starting from scratch, elementor is basically its own builder that has the plug ins you need already built in to do nearly anything. Am I correct or just a newb?

  12. Ben, I’ve tried the animated headline and love it. It would be awesome if there was a way to control the speed of the transition (I know – so needy!).

    Question: How does this index? If it’s an H1 how does having multiple versions affect SEO?
    Thanks.

  13. That looks great but don’t you think the headline of current post should have animated too or any link where it can be seen for real. The web is getting simpler, and not everyone is as creative as you in font selection, and choosing the right background. All in all, I like that.

Leave a Reply