Please, enter a valid email!
00 days
00 hours
00 minutes
00 seconds

Elementor Text Editor: Step-by-Step Tutorial to Create Animated Text with Free & Pro Versions

Times of the faceless and static websites are over. What’s really valuable – personality, originality, boldness.

The websites that grip the world’s attention often have gradients, rule-breaking typography, 3D & artistic illustrations, quite apart from the Parallax Effect and overlapping layers. Extraordinary UX/UI design is undoubtedly a must-have nowadays.

Elementor text editor on notebook

But the realization of the complex design solution is not always possible due to financial reasons or the lack of technical skills. One of the simplest ways to spice up the design is to create an animated text.

It’s a cherry on top that doesn’t overburden the page but adds dynamic and vivacity. A homepage with animated text looks way more interesting and catchy. Plus, adding this effect is not a big deal for WordPress users.

So, if you work with Elementor and want to brush up your website, this tutorial can be handy!

Regardless of your technical skills and Elementor version, you will learn how to create two animated text effects with Elementor text editor in less than one hour. So, make yourself comfortable, run Elementor, and let’s add some icing on the cake! 🙂

Here's a video-tutorial if you prefer watching over reading. Alexandra will teach you how to create text animations with motion effects in Elementor PRO and free.

Elementor Tutorial: How To Make Animated Text With Elementor Free and Elementor Pro

How to Create Text Animation in Elementor Text Editor

In this tutorial, we will create two text animations: one with a free version and one with a Pro. So, regardless of the Elementor version, you will be able to mix up your website with a professionally-looking effect.

Two headings roll from different sides and start scaling up as you reach the middle of the page, which looks amazing. This scrolling effect is customizable – you can change pretty much everything.

This effect is also available within a free version, and still looks interesting – the text slides up from nowhere. This is an entrance animation, so it doesn’t reoccur. It appears the second time only when you reload the page.

Both animations will work on mobile.

How to Animate Text with Elementor Pro

If you already have a theme for your website, you can proceed to the next step. Otherwise, pick up a theme first. This marketplace has dozens of Elementor themes, templates, and plugins for different purposes and pockets. Once you download the product, it automatically appears in Elementor.

elemrntor marketplace

Now, open Elementor > Elements > Heading and drop the widget to the workspace. Add a new section with a heading with a default style. Give it a title – the same title will appear on the website.

Now, duplicate the widget, create the second heading, and give it a title. You can play with the location of the headings – go to Advanced and change the Margin. Check out the difference:

change the margin

change the margin again

As we brought the second heading a little bit up, the elements of the composition started looking more unified.

Now, set the first heading to slide from the left (or whatever you find appealing): Advanced > Motion Effects > Scrolling Effects > enable (make sure you selected the first heading only).

enable scrolling effect

Then, configure the Horizontal Scroll. By default, you have a speed set to 4 and the Viewport goes from 0% to 100%. If you set the Viewport values from 0% to 50%, the first heading will slide from the left and stop in the middle of the page as you scroll down.

If you leave it at 100%, the heading will keep on sliding as you scroll down and it will look weird.

It’s important to set Effects relative to the Viewport to “give a signal” to the effect to stop the scrolling right at the point that is set in the Viewport.

Now, let’s do the same thing with the second heading. Click on it > Scrolling Effects > Horizontal Scroll (to left) > Viewport (0% - 50%).

As the two headings slide to the middle of the page, they form one heading – one comprehensible sentence.

It already looks pretty good but let’s make it more complex and interesting 🙂

Select the second heading > Scale. By default, you have the same settings as for the Horizontal Scroll. It means that the heading starts scaling right from the start. But it would look more interesting if the second heading started scaling once it reaches the first heading and forms the comprehensible sentence.

To check out if the assumption is correct, grab the Viewport slider and move it from 0% to 50%. Now, the second heading will grow, once it reaches 50% of the Viewport.

The tricky thing about this tweak lies in keeping the balance, so the elements don’t look disproportional. Speed will help us to overcome it but let’s apply the Scale effect to the first heading.

Select the first heading > Scale > Viewport (50% - 100%). From now, when the sliding animation stops, the scaling one begins.

Now, as you scroll, the first heading starts getting bigger first, then the second joins in. But it doesn’t really look good because the second heading grows a little bit faster and overlaps with the first one:


You can fix it in two ways:

  • change the Margin of the second heading (-30 or -35 instead of 40):
    second heading margin
  • change the speed of the scale (Advanced > Motion Effects > Scale > Speed (less than 4).

In this case, 4 is indeed suitable, so we will leave it like that. But now, the first heading starts scaling up before the second reaches the middle of the page. To fix it, go to the Horizontal Scroll of the second heading and play around with the settings – slow down the speed and tweak the Viewport slider.

It’s impossible to name exact parameters because you customize a completely different website with other designs, fonts, sizes, etc. So, just experiment on that and see which settings make the effect look the most appealing.

So, if you keep track of the steps made in this tutorial, you now created an awesome scrolling effect. Congrats!

How to Animate Text with Free Elementor Version

A great thing about the Elementor text editor is that you can apply a wide range of effects even with a free version. So, let’s try it out!

To animate text, we will use Entrance Animation – the only available Motion Effects animation in the free version. There are several available variations but we will use Slide in Up.

So, create a new section: go to Elements > Heading, drop it to the workspace, and title it (this title will appear on the website).

Our goal lies in creating an effect when the text appears underneath a covered space, like out of nowhere.

For that, we will need to customize the background but the Elementor text over image option isn’t available, so we can’t work with a background image or with gradients. In this case, we can work with a solid color only as a background but first things first.

Now, create a second section with a simple structure right down the first one. Then, go to Style, set the color to white, change the Height to Min Height in the Layout, and set it to 90.

Now, let’s move the section up a little bit: go to Advanced > Margin and set it to -2%. Note that there are both pixels and percents, so if you are uncertain working with pixels, just use percents.

You can also play with margin because again, the layouts, styles, fonts are different and parameters used in this tutorial might not apply to your website at all, so don’t follow the numbers blindly.

Well, time to apply the Entrance Animation. Go to Motion Effects > Entrance Animation > Slides in Up > Animation Duration (fast, in this case).

To create the second level of the animation, duplicate the section with the text and the section with a white background that serves as a cover for our text. Then, select the second line, go to Advanced, and change the negative Margin somewhere to -102 to bring it up a bit.

Now, the composition looks like a single thing – two lines look connected.

connected lines

If you feel confused working with so many layers, use the Navigator (the second bottom left icon). There, you can easily access all Sections and the elements they contain.

Also, you might face difficulties if your cover sections don’t overlap the text but are underneath it. To fix it, use Advanced > Z-index that determines the exact position of the section and works pretty much the same as a Photoshop layers system. The object with a higher Z-index is going to be on the object with the lower index.

The section that has to cover the first heading has Z-index of 1 and, obviously, it also covers the second line of our heading.

z-index 1

To bring it back up, we need to set the higher index, which is 2. But there is one more section (second white background) that has to cover the second text section, so let’s give it an index of 3.

mobile view

As you see, the gap between the first and the second lines is too big and the text is too small. The issue appears in mobile devices and invisible in the desktop version. So, to fix it, switch to the mobile view (fourth left bottom icon).

Go to Advanced and check out if the Margin value should be changed (probably, there shouldn’t be any Margin at all). Also, you can go to Style > Typography and change its size. Apparently, different types and sizes of typography look good for mobile and desktop versions.

In this tutorial, you familiarize yourself with the conception of creating animated text in the Elementor text editor but all websites with their themes and templates are unique, so, in most cases, you have to play with the values and parameters.

Don’t be afraid of it because the best result is often reached by trial and error.

And don’t be afraid to ask any questions in the comments! We will try to help you ASAP 🙂

Elementor text animation FAQ

? What is Elementor?

It is a page builder app that makes website creation even more simple than it is with the help of WordPress. It allows you to compose every page of a website like a puzzle – by dragging elements and dropping them to the page.

? What is an animated text?

It is a type of animation that looks like a text that appears and floats through the page from someplace beyond the borders of the screen.

? Why do I need an animated text?

Static websites are outdated. Modern sites are dynamic and use lots of animations. Text animation is an original and cool way to step out of the line.

Read Also

How To Add A Background Video To Your Pages With Elementor: Elementor video background Tuts

Create a Responsive WordPress Website with Elementor [Free Webinar]

Elementor Menu Tutorials: How to Create a Hamburger Menu & How to create Elementor Mega Menu

20+ Best Elementor Add-ons 2020 Free & Premium

Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Alma Diaz

A freelancer, who is nuts about traveling, art, and learning foreign languages. Excited about exploring new cultures. Particularly jazzed about conveying ideas with words in an outstanding way. Instagram

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

27 responses to “Elementor Text Editor: Step-by-Step Tutorial to Create Animated Text with Free & Pro Versions”

  1. AlvenTus says:

    Awesome write ups. Appreciate it. research dissertation how to write an descriptive essay

  2. Apalley says:

    Cheap Viagra Pill canadian pharmacy cialis Propecia Similares

  3. Brianseade says: meds online without doctor prescription

  4. Gwjjth says:

    order imitrex 25mg generic – order imitrex 50mg generic sumatriptan 25mg tablet

  5. 40 mg levitra order levitra online levitra professional generic when does levitra go generic

  6. orphenadrine mixed zanaflex zanaflex capsule cost 4mg zanaflex can you overdose how to plug zanaflex

  7. fbzmgjwg says:

    modafinil 100mg tablet cost modafinil 100mg modafinil 200mg ca

  8. RobertAppem says:

    The next step to obtaining your Class A commercial driver’s license is to apply for a CDL instruction permit at your local DMV. Like your non-commercial driver’s license, you first need to obtain this permit to practice operating a Class A vehicle. You’ll be given study materials before returning to the DMV to take a series of written exams. Every state has its own regulations regarding commercial driving permits. However, in most states, Class A licenses are required for driving “any combination of vehicles weighing over 26,001 lbs., provided the towed vehicle or vehicles weighs more than 10,000 lbs.” Class A CDLs allow you to drive tractor-trailer rigs across state lines. So, Class D is the biggie. It’s the license most people have. But there are a ton of others that you can get. Check ’em out on Ohio’s BMV website. Vehicles designed to travel 25 mph or less and horse-drawn vehicles are required by law to display a fluorescent orange triangle surrounded by red bands. When you see this symbol on the rear of any vehicle, slow down immediately and maintain a safe following distance. The agency recognizes that, because of the possibility of physically significant differences between vehicles within a model line, it is not practical to consider all vehicles of the same make model to be the same for the purposes of the pedestrian alert sound. The agency therefore has decided to grant the Alliance Global and Honda petitions with respect to this aspect of the “Sameness” requirement. We are amending the final rule so that alert sounds can vary across different vehicle trim levels and also by vehicle body type, in addition to varying by make, model, and model year as provided in the final rule.

  9. RitPieva says:

    Baccarat is a popular choice for mobile casino gamers, but for some reason it isn’t as common as roulette or blackjack when it comes to playing punto banco on mobile. Serious players enjoy serious games, and when it comes to Casinos, it does not get any more serious than Baccarat. This is one of the oldest games played on the casino, and in some casinos it is considered a game reserved only for their VIP players. Many people think of baccarat as something mysterious or intimidating. In fact, baccarat is simply a good fun card game that anybody from any walk of life can play and enjoy. The betting minimums are low, so you don’t have to be an aristocrat or a jet-setter to play mobile baccarat. If you look around you, you will notice that a lot of people use their phones for basically everything money-related – shopping, paying bills, etc. Mobile gambling is the future of online gambling and more people prefer to play online casino games on the go rather than on the desktop. All reputable operators in the Philippines are giving their users the possibility to experience gambling on the go and have fun anywhere in the world. Looking for the best mobile casinos? We have picked them according to our strict criteria: You may opt-out at any time by clicking the unsubscribe link included in our emails. 18+ only, Privacy policy. The coolest thing about Viggo is the welcome package. At first it looks like an average 100% match bonus on your first deposit. BUT, that bonus has no wager applied! You can cash out everything with out having wager anything from the bonus. With your registration on Viggoslots you will get a three part welcome bonus, they will be explained to you below. They also offer you cashback, the “game of the month” and a “Monday freespins“. As with many online casinos, they will also offer you a VIP program. 200 FREE SPINS! Copyright В© Casino Bonus Checker. You must be 18+ and legally allowed to gamble in your location, if you are not please leave now. Gambling can be addictive, please gamble responsibly.

  10. Embemntum says:

    MEDICINE AND THE MIND LUNATICS TOWER Viennas fortresslike Narrenturm Lunatics Tower built in had cells in which the mentally ill were incarcerated.

  11. Zewheebra says: – can you drink on prednisone

  12. Stromectol says:

    Cialis Authentique Prix

Leave a Reply

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