Text Path Element

Last Update: August 20, 2025

The Avada Text Path Element is a creative Avada Design Element that lets you present text along a curved or custom-defined path, adding an innovative, eye-catching touch to your typography. There are 11 Text paths to choose from: Wave 1, Wave 2, Arc, Arc Bottom, Circle, Oval, Spiral 1, Spiral 2, Star, Heart, and a Custom path to create clever text shapes.

Watch the video below for a visual overview of the Element, view the Avada Text Path Element page for some live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Avada Builder Elements!

How To Use The Text Path Element

The Text Path Element comes with ten predefined custom SVG paths, and a further option for a custom one. The idea of this Avada Element is that you choose or add an SVG path and then add some text, and the text follows the path. It’s a versatile element that can be used in many ways. There are several options to customise the Element, including design and animation options.

It’s a very visual element, and there is not just one way to use it, but hundreds. Watch the above video for a visual ‘how to,’ and check out the Avada Text Path Element page for more examples of its use.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Alert. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Path Type		Select the path type.
Custom SVG		Upload a custom SVG.
Text		Add the text that should be aligned to the path.
Link		Set the URL the text path will link to.
Link Target		Set how the link will open.
Alignment		Select the text alignment.
Text Direction		Select the text direction.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Path Width		Set the overall width of the path. In pixels.
Rotate Path		Set the rotation angle of the path. In degree.
Text Starting Point		Set the starting point of the text on the path. In percentage.
Lock Font Size		Set to yes, to lock the font size to the values set in Typography option. If set to no, the font size will also change with the Path Width (based on the 250px default width), because of the SVG coordinate system.
Typography		Controls the text typography.
Font Color		Controls the color of the text, ex: #000.
Text Shadow		Set to "Yes" to enable text shadows.
Text Shadow Position		Set the vertical and horizontal position of the text shadow. Positive values put the shadow below and right of the text, negative values put it above and left of the text. In pixels, ex. 5px.
Text Shadow Blur Radius		Set the blur radius of the text shadow. In pixels.
Text Shadow Color		Controls the color of the text shadow.
Text Stroke		Set to "Yes" to enable text stroke.
Text Stroke Size		Set text stroke size. In pixels.
Text Stroke Color		Controls the color of the text stroke.
Word Spacing		Set the spacing between the words. Leave empty for normal spacing.
Show Path		Set to "Yes" to show the path.
Path Stroke Width		Set the width of the path stroke. In pixels.
Path Stroke Color		Controls the color of the path stroke.
Path Fill Color		Controls the fill color of the path.
Text Animation		Set to "Yes" to enable text animation along the path.
Text Animation Along Path Direction		Select the text animation direction along the path.
Text Animation Start Offset		Set the start offset of the text animation along the path. In percentage.
Text Animation End Offset		Set the end offset of the text animation along the path. In percentage.
Text Animation Font Size Factor		Set the text animation font-size factor. In em. Leave at 1, if you don't want to animate the font-size.
Text Animation Duration		Set the text animation duration. In seconds
Path Animation		Set to "Yes" to enable path animations.
Path Animation Type		Select the text path animation type.
Path Scale Factor		Set the scale factor of the path animation.
Path Wiggle Factor		Set the wiggle factor of the path animation. In degrees of skewing.
Path Slide Elongation		Set the path slide elgongation in percentage of the path width.
Path Rotation Angle		Set the path animation rotation angle. If 360deg are used, it will keep spinning, without ever going in the reverse direction.
Path Animation Duration		Set the path animation duration. In seconds
Padding		Set the element padding.
Margin		Enter values including any valid CSS unit, ex: 4%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.