Curved Text sets a line of words along a curve: an arc that bends up or down, a full circle (like a round badge), a wave, or a curve you shape yourself. The words can repeat to fill the curve and can scroll along it. They stay real text, so visitors can select them and screen readers and search engines read them.
The Design panel ends with Spacing and Animations & Effects. Those work the same on every widget, so they're explained once in Widget design panel basics and Animations and effects.
How to add it
- Click Add, open Effects, and drag Curved Text onto the page. You can also search the Add panel for "curved text", "text on path", "circle text", "wave text" or "arc".
- Click Edit Text on the toolbar, type your words, and click Save.
- Click Edit Design to pick the shape, size, style and motion.
Edit Text
- Text: one line of words, up to 300 characters. Line breaks become spaces. Save stays grayed out until there's some text.
- Screen readers read the words once, even when Repeat shows them many times.
Shape
- Shape: Arc, Circle, Wave or Custom. Default Arc.
- Curve (Arc): −100 to 100%, per screen size. Default 40. Above 0 bends up like a rainbow, below 0 bends down like a smile. 100 is a half circle and 0 is a straight line.
- Start angle (Circle): 0 to 359°. Default 0. Where the words sit on the ring: 0° is the top, 90° the right, 180° the bottom. Picking Circle sets the width to 320 px if you hadn't changed it, and going back to another shape puts 600 px back.
- Wave height (Wave): 0 to 200 px, per screen size. Default 24. How far each wave rises and falls from the middle.
- Number of waves (Wave): 1 to 10. Default 2.
- Custom: a small box shows your curve with points on it. Drag a point to reshape the curve. Filled points are the two ends, and hollow points pull the curve into a bend. You can also click a point and move it with the arrow keys (hold Shift to move it further). The change shows on the page when you let go.
- Reset curve (Custom): puts back the starting curve.
Size
- Width (called Width (circle size) for a circle): 120 to 1600 px, per screen size. Default 600. How wide the drawing is; for a circle it's the ring's size.
- Text size: 8 to 200 px, per screen size. Default 28.
- In a box narrower than the width, such as on a phone, the whole drawing shrinks to fit. Nothing runs off the screen.
- Straight line on phones: off by default. On phones the words sit on a straight line instead of the curve. Tablets and desktops keep the curve.
Settings marked "per screen size" can be different on desktop, tablet and phone. See Responsive breakpoints.
Text Style
- Font: any site font or font from the list. Theme default uses your theme's heading font.
- Text color: none by default, which uses the theme text color: dark on light sections and light on dark ones, so it's always readable. Click Clear to go back to it.
- Weight: 100 to 900, in steps of 100. Default 700.
- Letter spacing: −5 to 40 px. Default 3.
- All capitals: on by default.
- Italic: off by default.
- Position along the curve: Start, Center or End. Default Center. Where the words sit on the curve. Not used while Repeat or Scroll is on, because the words then fill or travel the whole curve.
Repeat & Scroll
- Repeat the text to fill the curve: off by default. Repeats the words until the curve is full. On a circle the copies are spaced to close the ring with no gap.
- Between repeats (Repeat on): up to 8 characters shown between copies, such as • or ★. Default •. Leave it blank for a plain gap.
- Scroll — the text moves along the curve: off by default. The words travel along the curve, in the editor and on the live site.
- Speed (Scroll on): 5 to 300 px a second. Default 40.
- Direction (Scroll on): Forward or Backward. Default Forward. Forward follows the curve: left to right, or clockwise round a circle.
- Pause on hover (Scroll on): on by default. The words stop while the pointer is over them.
Visitors whose device asks for less motion see the words still, and so do visitors who press Pause motion on a page that has that button. Scrolling also stops while the widget is off screen.
Examples
- A bakery: "Fresh bread every morning" on a Circle with Repeat on and ★ between copies, as a round badge beside the hero photo.
- A surf school: "Ride the wave" on a Wave with 3 waves and Scroll on.
- A wedding photographer: names on an Arc bent up, with Straight line on phones on so they read easily on small screens.
Limits and what it can't do
- One line of words, up to 300 characters.
- Text color is one solid color (no gradient).
- In Custom you move the curve's points (two ends and two bend points to start with); you can't add new points.
- The words can't be connected to a collection with Connect to Data.
- Long words on a short curve are drawn smaller so none are cut off, rather than wrapping to a second line.
Who can use it
Anyone with the Mount Olympus tool. Client people need Editor to add the widget or change its design. Widget content lets them change the words with Edit Text.
Zeus can add and change Curved Text too: ask for "circle text saying…" or "make the curved text scroll". See Zeus in the editor.
Troubleshooting
- "No text — use Edit Text to add some.": the widget has no words yet. Click Edit Text.
- The words look smaller than the Text size I set: the words are longer than the curve. When the widget is selected it says "The text is longer than the curve, so it's drawn smaller." Shorten the words, raise Width, or lower Letter spacing.
- The text looks smaller on phones: the whole drawing shrinks to fit narrow screens. Set a bigger Text size for phones, or turn on Straight line on phones.
- The words don't scroll: check Scroll is on in Repeat & Scroll. Move the pointer off the widget if Pause on hover is on. If the device asks for less motion, or Pause motion was pressed, the words stay still on purpose.
- Position along the curve does nothing: it isn't used while Repeat or Scroll is on.
- The text is hard to read: click Clear next to Text color to use the theme text color, which follows the section's background.