Want text that curves around a logo, a badge or a round image?
The Circular Text option of the Advanced Typography widget from The Plus Addons for Elementor bends your text into a circle or an arc, without any code.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.
- Widget to enable: Advanced Typography, switched on under The Plus Addons > Widgets.
Steps
- Add the Advanced Typography widget, keep Select Option on Normal and type your text. End it with a space or a separator such as “ – ” so the start and end don’t touch.
- Open Content > Circular Text and turn on Enable/Disable. The text curves into a circle.
- Optional: turn on Custom Radius and set Select Value for a wider arc.
- Optional: turn on Reverse Direction to curve the text the other way.
Settings
| Setting | What it does |
|---|---|
| Enable/Disable | Curves the text into a full circle |
| Custom Radius / Select Value | Sets the radius in px (0 to 800). A value larger than the circle bends the text into a wider, flatter arc. A smaller value (60 px in our test) left the circle unchanged |
| Reverse Direction | Curves the text the other way, like the bottom of a badge |
| Auto Responsive | Meant to adjust the circle when the window is resized (see Limitations) |
The result on the page:
Limitations
- Auto Responsive currently has no effect on the published page. In our test, the circle looked the same with and without it on a narrow screen.
- Circular Text is not available for items in Multiple mode.
Troubleshooting
The start and end of the text overlap
Add a space or a separator at the end of the text, or shorten it.
Select Value doesn’t change anything
The radius only has a visible effect when it is larger than the circle your text already makes. Try a higher value.
