How To Create A Typing Effect In Elementor - A Beginners Guide

In this tutorial, we’ll learn how to create a custom CSS text animation effect using Elementor. If you have any questions or feedback on this article, please leave it in the comments below!

How To Create A Typing Effect In Elementor - A Beginners Guide


Elementor is an advanced drag-and-drop WordPress theme framework with powerful options, endless customization, and a huge range of features. One of the many abilities that Elementor has is the ability to create Custom CSS. This means you can add an animation effect that appears like a text is being typed inside it automatically. Not only does this look cool, but it's also a great way to gain more style to your website headings. Here’s how you can make a typing effect in Elementor!

In this tutorial, we’ll learn how to create a custom CSS text animation effect using Elementor. If you have any questions or feedback on this article, please leave it in the comments below!

How to Make a Typing Effect

Elementor is a drag and drop WordPress theme framework, so it's super simple to customize. Let's say you want your website headings to have an animation effect and have text appear in them. If you're not sure how to do this, the process is actually quite simple.

Step 1: First, we'll make sure that Elementor is installed.

If you haven't already installed it, Elementor can be found and installed here.

Step 2: Once Elementor is installed, we'll move on to adding the typing effect to a specific page.

Step 3: To do this, we'll first need to open the page where we want the effect to appear.

Step 4: With Edit with Elementor selected, we're ready to add the typing effect.

Now here's where the magic happens.

Step 5: Elementor gives us a ton of options for customizing pages, fonts, styles and everything else in between.

Step 6: Add the Text or Header Widget in the required place or edit the Existing Text.

Step 7: Now you can add content to the Content field. Add a div class before and after the text, like “typing-wpcreato”.

In order to add the typing effect however, we'll need to head into Elementor > Advanced > Custom CSS.

In this menu, you’ll see the option to add your Custom CSS for this element, which is exactly what we need.

Step 7: Let's add the following styles to our text box in order to preview how it will look with the typing effect added.

  .typing-wpcreato {    animation: typing 2s steps(22), blink .5s step-end infinite alternate;    white-space: nowrap;    overflow: hidden;    border-right: 3px solid;    font-family: monospace;  }    @keyframes typing {    from {      width: 0    }  }        @keyframes blink {    50% {      border-color: transparent    }  }

Why use Typing Effects on Texts?

There are a few different reasons why you might want to add typing effects to your texts.

For one, it's a great way to make text appear like it's being typed in real time and creates an effect that draws attention.

Since the animation only appears when someone is actually viewing it, this can help create an impactful effect without wasting too much time or energy on the animation itself.

It's also a great way to make your texts stand out from the rest of your content, as text is often overlooked and hard to find in a busy website. By adding a typing effect, you're likely to catch a few more eyes with it!

The Bottom Line

Regardless of whether you want to make a typing effect for aesthetics or as a marketing technique, there's no doubt that adding an animation to your text can be a great addition.

That's all there is to it! We hope that you've learned how to create a typing effect in Elementor and that you'll be able to apply it your own designs. If you want to check out more of Elementor, take a look at this!

If you have any questions or feedback on this article, please leave it in the comments!

About Author

DCreato Team

  • 85 Post
  • 0 Recent Post

Entrepreneur | Designer | SEO & SMM Expert

Latest Comments 0 Responses

Login/ Register to Comment
Back