by Adam Preiser updated July 29, 2019

How To Add Animated Text To Elementor Keep Visitors Focused On Your Message


Share on facebook
Share on twitter
Share on linkedin

If you need your website to grab your visitors attention, then having animated text could be just what you need.

For example, look at my homepage, notice anything? That's right, animated text. I have been using animated text since 2016, but up until now, it has been hard to do.

And a newly released Elementor feature will make it incredibly easy to do.


Elementor is a WordPress page builder that has taken WordPress web design by storm. It has the deepest feature set, yet is very easy to use and master. Elementor is the most full-featured free page builder. There is also a Pro add-on to add additional developer features.

Key Elementor Features:

  • Live Front End Page Editor
  • Website Personalication Features
  • Template & Block Library
  • Extensive Mobile Responsive Options
  • Most Powerful Popup Builder
  • PRO Create Custom Headers / Footers
  • PRO Create Post Type Layouts

Elementor is the strongest page builder currently available. They consistently release new features that are in line with current design trends. This means you will be able to keep your website relevant.

Elementor Pro is an incredible value considering all the additional modules and power features that it includes.

If I were starting a new website project today, Elementor would be the page builder that I would choose. I consider it a must have WordPress page builder that is a pleasure to use.

Check Out Elementor

Video Transcript

How To Add Animated Text To Elementor Keep Visitors Focused On Your Message

In this video and show you how to do this
what you see right here on my website this

scrolling animated text I want to show you
how to do it with Elementor in this video

hi my name is Adam from permit
WordPress videos for non-techies if you enjoy

the content in this video consider clicking
on the subscribe button and if you’d like

video notifications there’s a little bell
off to the right if you click on that YouTube

let you know when I upload a new video now
I get this question maybe once a week twice

a week hey Adam how do you do the scrolling
text that you have on your homepage using

Elementor and up until today I didn’t have
an answer for it because it’s a little complicated

to implement and the Elementor gods decided
hey this is something people want this is

something people are asking for they probably
read my mind or maybe the reading my emails

I don’t know but for some reason they decided
that they wanted Elementor Pro to have this

as an option and I’m gonna show you how to
use it and set it all up in this video now

first of all you might want to ask yourself
why the heck would someone want some scrolling

text on your website anyway in there’s a lot
of reasons why number one for me I’m trying

to get my point across without taking up so
much space with text because nothing is worse

when having a text heavy website and so for
me I’m trying to have my point come across

without having as text heavy of a website
and it also is visually attractive right when

you see that animation of the word change
in your eyes are kind of drawn to it and you’re

able to have your it’s I am able to have your
attention on what I want to have you to have

your attention on and that’s what scrolling
and those words that are scrolling there actually

give you a real world example here is a webpage
that I’m putting together we have this headline

when it comes to reliability we are the one
you need and then we scroll down this is a

very nice-looking webpage okay so don’t get
me wrong there but it is what it is so with

just a few minutes of using this new element
that Elma Elementor approaches added it’s

gonna look like this so I’m at the top and
now when you’re looking at the headline watch

what happens it’s because I’m not can refresh
the page I’m in Elementor right now you see

someone hit your page that lines going to
go across exactly where you wanted to go across

and that is one way of using this animation
so what’s the difference when someone sees

this their eyes are drawn to what that word
reliability and if you have a local business

and made your an electrician a plumber carpet
cleaner anyone that would go to someone’s

house people want what reliability and that’s
why I chose to underline the reliability it’s

a very subtle thing there that your eyes are
immediately drawn to write there’s another

example of it if I scroll down right here
we have this little bit of text and you can

see what’s happening the old word on the end
is changing this is the effect that’s a very

similar to what you see on my website it’s
changing so you’re able to not take up more

space with text get your message across and
draw people’s attention to your unique selling

proposition and that’s experience hard work
of mastery in this headline that I have right

here this is an amazing thing that you can
add to your website and I could do it very

easily with Elementor so many use my Elementor
hotkey when we control P and that’s gonna

take it out a preview mode and here it is
so when you update to the latest version of

Elementor Pro you’re going to see a new Pro
element right here called animated headline

and that’s what were going to use in order
to create these animated headlines so let

me show you it in action actually here let
me show you so, click on this one that I already

created and when you start using this feature
of this is what you’re going to see you have

two different option styles you have highlighted
and you have rotating so this one right here

is highlighted in this right here is rotating
so those are the differences and each of those

styles are going to have different shapes
as the word is here actually one of that word

shape changes when I go like that Arcadia
shapes and animations okay so here we go we

have our shape and I like this underline one
because why it’s subtle a lot of these features

that Elementor are giving us if they’re very
powerful but if you overuse it it doesn’t

become subtle anymore and your website becomes
a little heavy tailed to look at an experience

that’s what you want to avoid you want to
implement these in a subtle way so what I

wanted to do is I like this underline one
but there’s another one so if you have a more

fun website here’s the curly option check
this out just as a cute little curly line

underneath it we also have the circle option
which I think is also would be very good here

as well it stands out just a little bit more
than the underlying did and we have more and

more we’ve got double underlines we’ve got
strikethrough’s we’ve got the X now the X

is actually really cool obviously we wouldn’t
want to use X in this headline but if you

would say have a page of cells page you have
a headline on it or some kind of visual thing

were you drawing people’s eyes to maybe some
kind of a negative thing that there they’re

used to feeling and then you strike that negative
word out and then you show how your product

or service solves that problem these are nice
little subtle things that are pretty pretty

nice and very powerful when used right so
you have these options before text the highlighted

text or the text that’s can I have this animation
apply to it and then you have the after text

and you can do alignment your HTML tag let’s
take a look at the style options we have because

they’re pretty awesome so first of all you
can choose the colors of everything the fonts

of everything the sizes all of that so for
this I chose this yellow for the animation

because it went good with the blue meaning
it would stand out your eyes would immediately

be drawn into this yellow and that’s why I
like to do that and that’s also probably why

highlighter uses the color yellow okay so
we can do some rounded edges old here we go

we can make change the thickness of itself
I wanted it really thick I could go like that

so you have that option as well and for the
headline you have your fun options and that’s

pretty much what we have there so let me go
back to I don’t like that X because I want

to underline reliability very go accent, like
it better with the thick it looks like it

was a highlight or just underlining it right
there and I think if anyone came to this site

and they were looking there I would immediately
be drawn to this one word this one word in

the headlines without it this is what someone
would be looking at and there’s nothing that

says what you will look here there’s nothing
that says look at me but the minute you do

this and you put that underlining in there
it saying look at me and it’s a positive word

reliability that you want associated with
you that is the power of this new feature

get out a preview mode and show you the text
options and here we go as well so we have

these different animation options so we have
the typing I don’t like the typing that much

because you see it’s gonna do the backspace
and then the front part kind of collapses

in II don’t like that that much I think that
would probably work if the text was left aligned

but this is center so it doesn’t really work
that well we have a clip this is another option

let’s see what this is going to look like
it looks very similar here’s the flip option

and that’s going to just flip the rotation
of the words in like that swirl I think that’s

a little too much for me let’s take a look
at some world actually that is not that bad

swirls the letters in so there’s these various
options that you have here that was actually

kinda cool as well so let’s see what was the
one that I was using it it was I think it

might’ve been that are the slide down that
was what I was using slide down that is what

I would use so with this one your rotating
Texas so you have the bit of text before and

then you have the bit after but what’s a sandwich
in between this is where you’re going to enter

your different words or phrases or whatever
you wanted rotating you probably don’t want

that main word that you want people’s eyes
to be focused on and so that’s the option

we have there we have similar styling options
here we can change the color of just the highlighted

word that’s rotating so we can put what we
want there the animated text and you can full

control over all the styling of this here
so this is actually a big development if you

ask me I think this is pretty huge that they
added this and honestly I’m thinking man the

cost of Elementor Pro just for this feature
to me is actually worth it if you have the

money because elemental pros really cheap
anyways only 50 bucks and it will add so much

to your website but this is something that
is really to make your website stand out it’s

good to make your website a lot more memorable
so anyways this is this tool I think to hear

how you think is best to use this down in
the comments section below I have a bunch

of Elementor videos coming up I want to do
one on creating landing pages compared to

other landing pages builders as well if you
don’t have Elementor Pro I do have a link

in the video description box I also have a
course called Elementor essentials if you

did purchase Elementor Pro through that link
I will give you access to Elementor essentials

as a thank you or you could purchase the course
it’s only hundred and $49 so anyways this

is this new awesome feature coming to Elementor
finally now when someone goes to my website

and they see I got this rotating text and
they asked me I finally have an answer for

them all you need is Elementor probe that
animated text module that they just added

that actually David features that I wish I
had for this I love that underlined feature

that is the feature for me so anyways I want
to hear how you think it’s best to use this

how you plan on using animated text module
down in the video description be low I’ll

see you in the next video

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

Your email address will not be published. Required fields are marked *

  1. I have a static header that stays at the top of the screen when you scroll. However, when I add an animated headline, that text “rides” over the header when I scroll down. Is there a solution to this?

    1. You have to use something called z-index to prevent this from happening. So increate it for your header or lower it for the animated text.

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.