Are you bored of using the same bland headings on your Elementor website? Now you can create awesome animated headings with hundreds of effects/features using Animated Heading widget for Elementor. Create highly engaging headings and immerse your audience into a unique experience. The widget lets you add image or GIF masking, 23+ animations on your titles, add icons, dual colors, gradient fills, separators, shadow text, and much more. There’s no end to the creativity you can push using your Animated Heading widget. Leave an amazing impact on your site visitors and stand apart from the rest of the competition by distinguishing punch lines and titles of your website.
You need to install and activate the Pro version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Animated Heading Widget is enabled so you can find it in the Elementor editor.
To enable the widget, simply follow these steps:
Click on the Xpro Addons option available on the WordPress Dashboard Menu.
From the Xpro Addons Dashboard, click on the Widgets Tab, find the Animated Heading widget, and finally, toggle the button ON to enable it.
How to Use Xpro Animated Heading Widget for Elementor
You can create amazing animated headings for your websites in minutes with our Animated Heading Widget. Grab your site visitors’ attention and get instant engagement on your content. It’s simple, fun, and time-saving! Here’s how to use our modern Animated Heading Widget for Elementor.
Click on the Xpro Addons – Pro section available in the Elementor Editor.
Search for Animated Heading in the search bar and drag’n’drop the widget on your desired page location.
How to Add & Style Heading Titles using Xpro Animated Heading Widget
Our Animated Heading widget for Elementor gives you the freedom to design awesome heading titles exactly the way you want. You can create highly engaging headings by using advanced features of the module. Let’s try those features!
Drag and drop the Animated Heading widget on the desired page.
Go to the Content Tab and enter your pre-title text in the Title Before field. This text cannot be animated so enter any punchline you want to appear before the animated text. In the Content section, you can set the Title text in three different fields (before, animated, after). We will try the Animated Title later on. You can also add up a Link to your heading and set an HTML Tag for your heading, by default it is set as H2. The heading alignment option is available in the Style tab under the General section.
Now click on the Style tab and design your heading title the way you want. From here you can change the typography of your title, add text shadow, set text color of your choice, and more. You can also add a nice background & border to glamorize your heading title and make it more prominent.
How to Add & Style Animated Headings in Elementor
Once you’ve entered the word in the Animated Title field under the Title section, you can now design it from the Style section. You can play around with your creativity and add slick animations to your titles to make them more attractive for site visitors. In the Content section, you can set the Title text in three different fields (before, animated, after). Now enter the text you want to animate in the Animated Title field. Now pay attention, if you want multiple words to appear one-by-one in your animated heading then you need to separate the words by a comma “,” in the Animated Title field. Otherwise, if you want to animate a single word then enter that word in the Animated Title field.
With comma separated words, your animated title will appear like this:
Now let’s design your animated heading. Click on the Style tab and open the Animated Title section. Here you will find exciting options to turn your boring headings into memorable ones. You can choose from 20+ Text Animations, add a type cursor you want, change the animation speed, and much more. Similarly, you can change the typography, add shadow, border, and background to your animated titles just like we did above with the heading title.
After designing your animated heading title according to your desired colors, a nice eye-popping animated title will be created just like this:
How to Add Icon & Set Alignment in Animated Heading Widget
Add an interactive icon to your headings and explain more with fewer words. An icon can convey a meaningful message to your site visitors about your content. To do this, first, you need to toggle the icon option to Show.
- Go to the Content Tab and find the Icon section in the dropdown menu.
- Turn the ‘Show Icon’ button ON
- Choose an icon from the default Elementor library or Xpro Icons. You can also upload your own SVG.
- Set icon position as top, float, inside, or behind.
Once the icon is added, go to the Style tab to design your icon beautifully. Set custom size and color for the icon and the icon background. You can also add gradient on the icon background and a box shadow too, just like we did here:
You can play around with your creativity by perfectly aligning the icon with your heading. To do this, first, you need to go back to the Content tab and change the position of the icon to Behind.
Now go to the Style tab and click on the edit icon in front of the Transform option under the Icon section. Here you can set transform-origin, rotate the icon, set horizontal & vertical offset to perfectly align your icon with your heading!
Your icon will look pretty good if you adjust it accordingly like this:
How to Add & Style Separator for Your Elementor Headings
Give a sleek look to your headings by adding a Separator to them. Distinguish the content with an elegant separator, you can choose from 8 styles including our four pre-defined shapes and any icon from our library. You can also set a simple text or double-lined separator. First, you need to toggle the separator option to Show. For this, go to the Content Tab and find the Separator section in the dropdown menu.
Now, turn the ‘Show Icon’ button ON and choose a separator of your choice from the Style option (choose from 4 unique shapes, simple text, icon, or simple/double dashed). Here I’ll try ‘Shape 2’. Position the separator as per your liking (before or after the title)
Once the separator is set from the Content tab, you can then fully design it from the Style tab. Under the separator dropdown, set the size and color for the shape as you like. You can also adjust the margin too.
How to Apply Image / GIF Masking to Your Headings
One of the coolest features of Xpro Animated Heading Widget is the masking option. This awesome feature lets you add an interactive image or GIF to your heading as a mask. Let’s get to know how you can add image or GIF masking to your heading. Click on the Style tab and go to the Title section. Set the Background Type as classic and upload your desired image or GIF. In this demonstration, I’m going to add a GIF for masking purposes.
Once the Image/GIF is uploaded, turn the Masking Option ON, set the position, attachment, and size of the image/GIF.
The final output will be an amazing heading like this:
That’s it from the Animated Heading widget. Head over to the Xpro Advanced Heading widget for Elementor and explore more exciting features/effects for your website headings.