How to set up and style the Interactive Circle widget in Elementor.
Interactive Circle places your items evenly around a ring. When a visitor hovers or clicks an item, its title, text, image and button appear in the middle of the circle. Use it to present services, features or the stages of a process in a compact space.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Items | The list of items placed around the circle. |
| Icon | The icon shown in the item on the ring. |
| Short Label | A short name shown with the item, and used as its name in the editor list. |
| Title | The heading shown in the centre when the item is active. |
| Content | Rich text shown in the centre under the title. |
| Centre Image | An optional image shown above the title in the centre. |
| Button Text | Adds a button under the content when filled in. |
| Button Link | Where the button goes. |
| Accent Color | A separate accent color for this item. |
| Active by Default (item number) | The number of the item that is open when the page loads. |
| Option | What it does |
|---|---|
| Activate On | Chooses whether items open on hover or on click. |
| Autoplay | Moves to the next item automatically. |
| Interval (ms) | The time between autoplay steps, with a minimum of 1000. |
| Rotate Circle to Active Item | Spins the ring so the active item moves to the start position. |
| Start Angle | Where the first item sits on the ring. A value of -90 puts it at the top. |
| Labels | Shows labels below the icon, inside the item, or hides them. |
| Centre Content Effect | The effect used when the centre content changes. |
| Title Tag | Sets the HTML tag used for the centre title. |
| Switch to Tabs Layout On | Replaces the circle with a tabs layout on mobile, on tablet and mobile, or never. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
circle size, centre size, accent color, plus the ring color, style, thickness and an optional slow decorative spin.
item size, icon size, colors, background, border color, shadow and scale for Normal, Hover and Active states, border, radius, padding and label typography and colors.
background, border, shadow, padding, text alignment, image width, and typography, color and margin for the title and the content.
typography, icon spacing, colors, background, border, radius and padding for normal and hover states.
There is no fixed limit. The widget divides the full circle by the number of items, so they are always evenly spaced. Reduce the item size if they start to touch.
Yes. A tap always opens an item, even when Activate On is set to Hover.
Yes. The arrow keys move to the next or previous item, and Home and End jump to the first and last item.
Yes. Change Start Angle in Circle Settings. It accepts values from -180 to 180 degrees.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide