Text Path Element
The Text Path Element sets a short text along a line: an arc, a circle, a wave, a spiral, a star, a heart or a path from your own SVG file. It turns a phrase into a graphic detail, for example a circular badge, a curved caption or a wavy headline.
The text stays real text, not an image. You style it with the usual typography options and can make it move: the text can run along the path like a ticker, and the path itself can scale, rotate, slide or wiggle.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Text Path Element
Add the Text Path Element to any column, pick a Path Type and enter the Text. With Custom, upload an SVG file in Custom SVG; the first path in that file is used. Add a Link with its Link Target if the text should be clickable, and set Alignment and Text Direction.
On the Design tab, Path Width sets the size of the whole shape, Rotate Path turns it and Text Starting Point moves the text along the path. Style the text with Typography, Font Color, Text Shadow, Text Stroke and Word Spacing. Show Path draws the line itself, with its own stroke width, stroke color and fill color.
Text Animation moves the text along the path, from left to right, right to left, as a news ticker or between a custom start and end offset, and can also grow and shrink it with Text Animation Font Size Factor. Path Animation moves the whole shape with a scale, rotate, slide or wiggle effect. Both animations repeat continuously at the duration you set.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
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, for example #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, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| 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. |
Tips
- Keep the text short. Long texts are cut off where the path ends; lower the font size or choose a longer path such as a circle or spiral.
- With Lock Font Size on Yes the text keeps the size from Typography whatever the Path Width. Set it to No if the text should grow and shrink together with the shape.
- A Path Rotation Angle of 360 makes the path spin endlessly in one direction; any other value swings back and forth.
- Continuous animations draw attention and can distract. Use them for one decorative detail, not for important text.
- For a custom shape, use a simple SVG with a single path. Only the first path in the file is used.