Studio Editor: Adding and Customizing Text on Path
Add flair to your designs with a text on path element, customizable to fit any creative vision. Choose from preset path shapes or upload your own, and apply a colorful background with adjustable thickness and edges. You can apply movement to the text while customizing its speed and direction to make the element as engaging as it can be.
Adding a text on path element
Head over to the Add Elements panel to add a new text on path element. Select a design you like, drag it onto the page and change the text to whatever this element should say. You can always customize the path shape, movement and design later.
To add text on path:
Click Add Elements
on the left side of the editor.
Click Text.
Click Text on Path.
Drag the desired design onto the page.
Change the text:
Select the text on path element.
Click Change Text.
Enter the text you want to appear.
Customizing the path and movement
Design your text on path element in the Inspector panel. Choose a path that reflects your design vision by selecting a preset or uploading a custom shape. Add a background to your path with customizable thickness, color, and edge styles to make it stand out.
You can also add movement to the text, controlling its speed, direction, and hover behavior for an interactive and eye-catching effect.
To customize the path and movement:
Select the text on path element.
Click the Open Inspector icon
at the top right of the editor.
Under Design, choose how to customize the element:
Choose a different path (preset or your own)
Click Path and decide what to do next under Choose a path:
Select another shape from the gallery.
Click the first shape on the left of the top row to access the Media Manager. Discover many more free suggestions from Wix, or upload your own SVG to set the shape.
Apply background
Click Path and enable the Apply background toggle to add a background color to the path:
Click the color box to change the color and drag the slider to adjust the opacity.
Use the Thickness slider to set the size of the background, making the path thicker or thinner.
Decide whether the edges of the path should be squared or rounded under Cap.
Control the movement
Click Movement and enable the Apply movement toggle to animate the text.
Use the Speed slider to make the animation faster or slower.
Change the animation Direction - left-to-right or right-to-left.
Select the Pause on hover checkbox to make the movement stop when visitors hover over the element.
Tip: This is a great way to make your client's site more accessible.
Formatting the text
Adjust the font, spacing, alignment, and other formatting settings to ensure your design fits seamlessly into your client’s site.
To adjust the text formatting:
Select the text on path element.
Click the Open Inspector icon
at the top right of the editor.
Click Text under Design.
Adjust the available formatting settings:
Change the font, color and size. You can also make the text bold or italics.
Choose how the text fills the path under Text Mode – Fill, Regular or Repeat.
Tip: When the mode is set to Regular, you can decide where the text appears on the path using the Offset slider.
Switch the Capitalization style (e.g. all capital letters, all lowercase, etc.)
Change the Orientation to 'Top' to make the text face outward along the curve, or 'Bottom' to flip the text inward toward the center of the curve.
Accessibility tip:
If this text on path element is purely decorative, meaning it does not include important information for screen readers, select the checkbox next to Decorative.
