Text Path
Short text written along a curve, circle or your own path.
On this page
The Text Path widget writes short text along a shape: a wave, an arc, a circle, an oval, a line, a spiral or your own SVG path. Use it for round badges (“Book a free consultation • …”), optionally spinning, for curved captions and for decorative titles. Keep the text short; long copy belongs in a Heading or Text widget.
Add text on a path
Insert it
Open Insert in the left panel, find Text Path under Basic (or type
curvedin Search widgets) and click it or drag it onto the canvas.Type the text and pick a shape
Type the Text and choose a Path. For a circle badge, repeat the text with a separator, such as
Book a call • Book a call •, until it goes all the way round.Size and position it
On the Design tab, set Shape → Size; the text scales with the drawing. Use Starting point and Text alignment to move the text along the path.
Make it spin
Turn on Spin continuously in Design → Shape for a rotating badge.
Use your own path
Choose Custom SVG path and paste the d attribute of an SVG <path> into Path data, for example from a design tool's SVG export. Set the View box to the drawing area of that path (min-x, min-y, width, height); the width is the natural size in pixels.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The Text and Link support dynamic tags (see Dynamic tags).
Content tab
| Setting | What it does |
|---|---|
| Text | The text that follows the curve. Keep it short. For a round badge, repeat it with a separator, such as “Book a call • Book a call • ”. Supports dynamic tags. |
| Path | The shape the text follows. Options: Wave, Arc, Circle, Oval, Line, Spiral, Custom SVG path. Default: Wave. |
| Path data | The d attribute of an SVG <path>, drawn inside the view box below. Shown when Path is Custom SVG path. |
| View box | The drawing area of your path: min-x, min-y, width and height. The width is the natural size in pixels. Shown when Path is Custom SVG path. |
| Link | Makes the text a link. Supports dynamic tags. |
| Text alignment | Where the text sits on the path: at its start, middle or end. Options: Start of the path, Middle of the path, End of the path. Default: Middle of the path. |
| Starting point | Moves the text along the path, as a percentage of its length. |
| Reverse direction | Runs the text the other way along the path. On circles and ovals the text then sits inside, centered at the bottom. |
| Text position | Puts the text on top of the path, centered on it or below it. Options: On top of the path, Centred on the path, Below the path. |
| Show the path | Draws the path line itself. |
Design tab
| Setting | What it does |
|---|---|
| Typography | Text style or font, size, weight and spacing of the text. |
| Normal › Color | Color of the text. |
| Hover › Color | Color of the text on hover. |
This section shows when Show the path is on.
| Setting | What it does |
|---|---|
| Color | Color of the path line. |
| Width | Thickness of the path line. |
| Dashed | Draws the path line dashed. |
| Setting | What it does |
|---|---|
| Size | Width of the drawing. The text scales with it. Per device. |
| Alignment | Aligns the drawing. Options: Left, Center, Right. Per device. |
| Rotation | Rotates the drawing. |
| Spin continuously | Turns the drawing continuously, best with circles. It stays still for visitors who prefer reduced motion. |
| Seconds per turn | Seconds for one full turn. Shown when Spin continuously is on. |
| Spin counter-clockwise | Spins counter-clockwise. Shown when Spin continuously is on. |
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Fill the circle. If a circle shows a gap, add a word or adjust the letter spacing in Typography; if the text overlaps itself, shorten it.
- Text inside a circle. Reverse direction runs the text the other way; on circles and ovals it then sits inside the shape, centered at the bottom.
- Reduced motion. A spinning badge stays still for visitors who prefer reduced motion.
- Readable at size. Small text on a tight curve is hard to read; test the widget on mobile.