How to Make Animated Text Circle in Elementor

We will walk you through the steps involved in creating animated text effect, and you will be able to apply it to your own website in no time!

How to Make Animated Text Circle in Elementor


In this blog post, we will show you how to create an animated text circle in Elementor. This is a great way to add some extra flair to your website and catch the eye of your visitors. It's also a great way to showcase your brand or logo. We will walk you through the steps involved in creating this effect, and you will be able to apply it to your own website in no time!

To create an animated text circle in Elementor, you will need to use the Text path widget. This widget allows you to add a variety of shapes to your text, including circles. You can also animate the shapes so that they move around on the screen. To add a Text path widget to your page, simply drag and drop it into the desired location.

Steps to create Animated Text Circle

Step 1: First edit or create the page you wish to add the animated text circle.

Step 2: Next, Move on to section you wish to add the circle.

Step 3: In the sidebar, search for Text path and drag and drop to the desired location.

Step 4: Now, in the content field of text path, change the text and wish.

Step 5: Next, in the path type, select as circle.

Step 6: In the alignment field choose as centre or wherever you wish.

Step 7: Now, in the styles tab, select the size as 250px.

Step 8: Next, in the typography field, edit it and change the size and style as you wish.

Step 9: Now, drag and drop the image widget from the elementor sidebar and select the image or logo.

Step 10: Now in the styles tab of the image, select the width as 220 or 210px. (Must be lesser than the size of text path).

Step 11: Go to Advanced tab of the image and set the margin as -200px or wherever the image fits in center of the text path.

Step 12: Now edit the text path section and go to advanced tab and move to bottom custom CSS field.

Step 13: Add the following custom CSS.

  selector svg{      animation: rotate 25s linear infinite;    }    @-webkit-keyframes rotate {     0% {      transform: rotate(0deg);     }     100% {      transform: rotate(360deg);     }    }    @keyframes rotate {     0% {      transform: rotate(0deg);     }     100% {      transform: rotate(360deg);     }    }

Now you will start to see the circle started to rotate. You can also turn on the Show path toggle in the text path field to make the circle more visible.

That's all there is to it! You now know how to create an animated text circle in Elementor. Now we will see one by one on the above CSS code.

In the first line, we are targeting the selector which is the text path.

The animation property is used to call @keyframes function and rotate it for 25 seconds in a linear fashion and infinite times.

@-webkit-keyframes is used for Safari browsers whereas @keyframes is used for all other browsers. If you want to target only Safari, you can use only -webkit-keyframes function.

In the @keyframes function, we have defined two properties 0% and 100%. The 0% property is used to define the starting position of our element whereas 100% defines the ending position. In our case, we are rotating it from 0deg to 360deg i.e. full circle.

You can also use the animation-delay property to add a delay before the animation starts and animation-iteration-count to set how many times you want it to run.

Where to use this

This can be used in the header or footer area of your website to showcase your brand or logo.

You can also use this in the About section to introduce your team members.

You can use this on your pricing page to highlight the different features of your plans.

You can use this on your blog to show CTAs.

The possibilities are endless!

The Bottom Line

That's all there is to it! You now know how to create an animated text circle in Elementor. This is a great way to add some extra flair to your website and catch the eye of your visitors. It's also a great way to showcase your brand or logo. We hope you found this blog post helpful, and if you have any questions, please feel free to leave a comment below! Thanks for reading!

About Author

DCreato Team

  • 109 Post
  • 0 Recent Post

Entrepreneur | Designer | SEO & SMM Expert

Latest Comments 0 Responses

Login/ Register to Comment
Back