Elementor’s Animated Headline Element: How to Use It Effectively To Get Reader’s Attention

Facebook
Twitter
LinkedIn

Animated headlines are a great design method for grabbing the reader’s attention. Usually, it is done to put emphasis on a single word or phrase. This element is one of Elementor’s best features. However, it is only available with Elementor Pro. So if you run the free version of Elementor, you won’t have access to it.

In this article, we will go over how to craft a successful headline animation using Elementor Pro. We’ll focus on the type of animation, timing, and content used in the headline. Let’s get started!

How to Use Animated Headlines Effectively

The first thing you need to know about using animated headings effectively is that it needs to stand out color-wise. If it blends in with your page and/or your website, you are not using it effectively. Because the point of animating part of your headline is to focus the readers on a specific word or phrase.

To stand out, red is always a good color to give your readers a sense of urgency. Other good colors include blue and orange. But the specific colors don’t matter as much as how the colors look compared to the rest of your website. You want to pick high-contrast colors.

While picking colors, also think about accessibility. Search engines advise website owners to think about accessibility when designing websites. While Google has said that accessibility is not a direct ranking factor in their search algorithm they do highly advise webmasters to design sites with accessibility in mind. What does that mean for color contrasts? Well the Web Content Accessibility Guidelines (WCAG) recommends a color contrast ratio of at least 4.5:1. You can use this site to check the contrast ratio of your colors.

The second piece of advice on animated heading is to not overdo it. That means many things—it means don’t go trigger-happy with the element and use it for virtually every heading on your page. That would defeat the purpose of animating your headline for attention. It also means don’t overdo it with the effects either. Along with animating the headlines, there are some advanced effects you can employ with your headline (such as blurring, zooming, rotating, etc). But just because you can do it doesn’t mean you should. There is such a thing as too much animation. If the design effects are over-the-top, your animated heading becomes tacky instead of cool.

Types of Styles and Animation Available

Elementor currently has two styles of animated headlines: rotating and highlighting. Each style then has a subset of animations that goes with it.

Rotating Style

The rotating style cycles through a list of words you provide. So if you want the headline to rotate through the words Bigger, Faster, Better—it will do that.

The animation options for the rotating style are:

  • Typing
  • Clip
  • Flip
  • Swirl
  • Blinds
  • Drop-in
  • Waves
  • Slide
  • Slide down
Highlighting Style

The highlighting style picks one word or phrase to highlight using animation.

The options for animation of the highlighting style are:

  • Circle
  • Curly
  • Underline
  • Double
  • Double Underline
  • Underline Zig Zag
  • Diagonal
  • Strikethrough
  • X

How to Use Elementor Pro’s Animated Headline

Step 1 – Drag Animated Headline element onto page
Find the animated headline element, then drag and drop it to the page.

Step 2 – Customize the headline using the left sidebar. 

Choose what style you want for your headline highlighted or rotating. Next, choose the shape for your headline.

Enter the text here in the before text, then enter the highlighted text. Same here in the after text. You can place a link in the link box.

Set the alignment for the headline and input the heading size.

Step 3 – Go to Style tab to style your heading

You can change the color for the shape, drag the slider to change the width of your animation or input the pixel number in the text box.

If you want to bring the animated shape in front of the text, you can enable the toggle “Bring to Front” and also the rounded edges around the end in the headline.

It is in this tab you can also change the color of your animated shape.

If you want to style the headline, click Headline in the Style tab.

This is what a pixel width of 100 looks like for an animated circle headline.

Step 4 – Advanced Options

It is in this tab that you can further customize your animated headline with custom CSS, motion effects, and a bunch of other effects.

If you have Elementor add-on plugins that allow for further customization of your elements, they would also show up here. For example, we have Elementor Essential Add-ons so Conditional Display is available in the Advanced tab.

How to Do Elementor’s Animated Heading with Red Marker

To do Elementor’s red marker animated heading, take the following steps:

Step 1 – Choose Highlight and Underline

Step 2 – Change color and width in Style tab
The hex code for the color red is #FF0000.

How To Change Animated Headline Speed

The speed of your animation is something you have to think about. You don’t want it too fast because the readers won’t be able to read it fast enough. You don’t want it too slow either as they could browse through the rest of the page before seeing the animation. So you need to check the animation speed yourself and make necessary changes. The default is 2500 milliseconds (ms). But you will need to adjust it longer or shorter depending on your headline length.

Changing the animation speed is pretty simple. In the Content tab of your Animated headings element, go down to Duration to set the time. It is in milliseconds. So 2500 milliseconds is 2.5 seconds.

Advanced Settings for Animated Headlines You Didn’t Know About (Probably)

Aside from the normal settings of your animated headline, you can further customize your headline using Elementor’s Advanced tab in your animated headings element. Below, you can see the three settings that you can use to further customize your animated heading: Motion Effects, Transform, and Mask.

Motion effects are a great way to give your animated headline a bit of character. Motion Effects are special effects that happens when the user scrolls or moves their mouse over to the element. It is here that you can set the entrance effect of your animated headline too (such as fade in/fade out, bounce, etc).

Transform effects are visual effects that rotate or cross the x/y axis of the screen.

Masking effects are simply effects that mask part of your headline.

How to Add the Blur Effect to Your Animated Headline

The blur effect is a Motion effect. It is a scrolling effect. If you turn this on, the headline will start off blurred. But as the user scrolls closer to the headline, it will unblur to reveal the headline. To enable this effect, you simply need to turn the scrolling slider on and adjust your settings.

We hope that this article helps with explaining how to use the animated headings element in Elementor. For more Elementor tutorials, head to our tutorial section.

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer

Crafting Hero Section in Brizy

Understanding the Importance of a Hero Section Introduction to Hero Sections A hero section is the prominent and visually striking part of