In this tutorial we will learn how to create, customize, and style text paths in Elementor. This tutorial will cover:
✔︎ The various types of text paths
✔︎ How to add your own custom SVG path
✔︎ How to style the text and path
✔︎ How to add a motion effect to the text path widget
✔︎ And much more!
Hey there. It’s Aviva from Elementor. Today I’ll show you how to use the text path widget, to create unique typographic designs, on your website.
Text on a path can be used in a variety of ways to draw attention to your website and engage your visitors.
For this tutorial, we’ll create this round seal, as a way to enhance the company’s authenticity…and we’ll give it a motion effect too, to really grab visitors’ attention.
In the Elementor editor, Search for the text path widget, and drag it in. A line of placeholder text will appear. Replace it with your own text. You can use standard glyphs in your text, if you’d like, such as the bullet symbols I’ve used here.
The dynamic tags icon here, indicates that dynamic content, such as your site tagline, can be selected by clicking the icon. The same is true for any other field displaying this icon.
As you see here, the text I’ve added doesn’t all fit on the path currently. We’ll take care of that shortly, in the Style tab. But first, we’ll go through all the content options.
I’ll toggle Show Path ON to better visualize the various text paths. We’ll switch it back off towards the end of the tutorial.
For the Path Type, there are a number of preset options to choose from…Wave, which is the default, Arc, Circle, Line, Oval, and Spiral. There’s also an option to upload your own custom text path by way of an SVG file. I’ll upload a file I’ve already created, and insert it.
You can add a link to the text here (to function like a button). Paste in a URL…or type in a page name from your website, and select the link when it displays. Click the gear to adjust the link options.
You can align the text path widget to the left, center, or right. I’ll align it to the center. There’s no visible change right now, because the default widget size of 500 pixels, takes up the whole column. The moment we change the size, however, you’ll be able to see the selected alignment.
To change the direction of the text, choose RTL for right to left text or LTR for left to right text.
Now go back to Path Type, and select Circle, in order to create the seal… Great, the text path content is all set. Now let’s style it.
Click the style tab.
You can use percentage or pixels for the size settings of the text path. Drag the slider, or type in a value to adjust the size. Notice that the center alignment, I set before is now visible.
Now use the slider to rotate the path. Or type in a value to set the exact angle.
Next, use the typography settings to fit the type to the path. I’ll select a global font, and then use the custom font settings to tweak it.
You can further tweak the type, by adjusting the word spacing … as well as the text starting point. As you can see, in this example the text gets cut off, but it can be useful for adjusting the position of shorter amounts of text on a path.
To change the text’s color, choose a custom…or global color. Nice. The text path is really taking shape.
Let’s add a hover effect to the text, to indicate that this element is interactive.
Choose the hover color…and a hover animation. Adjust the transition duration, if desired. Cool.
Last in the Style tab is the Path settings section. This only displays when Show Path, in the content tab, is toggled on.
Select the first color to add path fill color. Note that this option may be most fitting for closed paths, such as circles and ovals. Now select the path stroke color, and adjust its width. You can play around with these settings to get some interesting and fun effects, like this one. You can also add hover effects to the path settings, if you’d like.
I’ll go ahead back to Content, and toggle Show Path off
It looks great, and we could leave as is, but to really make it stand out, we’ll add a motion effect, so that the seal will rotate, when the page is scrolled. This will be sure to catch your visitors’ attention.
Click Advanced, and expand the Motion Effects section. Toggle scrolling effects on, and click Rotate. Change the direction, and adjust the speed.
Great. The last step is to optimize the design for mobile. Click responsive mode. Go back to Style, and adjust the size.
Perfect.
Switch to mobile view, and make the size slightly smaller. Keep in mind you can adjust the responsive settings for any element with a viewport icon.
Ok great. Exit responsive mode, and hide the panel to preview.
The seal really adds credibility to the brand. I’ll hover over it…and scroll down. Awesome!
And there you have it, you now know how to use the text path widget to design your own typographic compositions. Whether you use it playfully, or in a more authoritative manner, we trust in your creativity and can’t wait to see what you come up with.
How will you use the text path widget? Let us know in the comments below.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit the notifications bell.
