BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Interactive Circle Widget for Elementor Pro

Items around a ring that show their content in the centre

Overview

What Interactive Circle does

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.

Live demo

See it in action

Strategy

Short description shown in the centre of the circle.
Features

What it can do

  • Items are spaced evenly around the circle, however many you add.

  • Content opens on hover or on click.

  • Autoplay steps through the items at an interval you set.

  • The ring can rotate so the active item moves to the start position.

  • Labels can sit below the icon, inside the item, or stay hidden and show as a browser tooltip.

  • Four centre content effects: Fade, Zoom, Slide Up and None.

  • The circle can switch to a tabs layout on mobile, or on tablet and mobile.

  • Each item can have its own accent color, centre image and button.

Use cases

When to use it

Service overview

Put each service on the ring and describe it in the centre, with a button to the full page.

Process cycle

Show steps that repeat, such as plan, build, launch and improve, and turn on autoplay to walk through them.

Product features

Give each feature an icon and a short label, and let visitors explore them one by one.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Interactive Circle widget onto the page and open the Items section.

  2. For each item choose an Icon, type a Short Label, then fill in the Title and Content that should appear in the centre.

  3. Add a Centre Image or a Button Text with a Button Link to any item that needs it.

  4. Set Active by Default (item number) to the item that should be open when the page loads.

  5. Open Circle Settings and choose Activate On, then turn on Autoplay or Rotate Circle to Active Item if you want movement.

  6. Pick how Labels are shown and when to Switch to Tabs Layout On smaller screens.

  7. In the Style tab set the Circle Size, the Centre Size (%) and the Normal, Hover and Active look of the items.

FAQ

Questions and answers

How many items can the circle hold?

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.

Does it work on touch screens?

Yes. A tap always opens an item, even when Activate On is set to Hover.

Can it be used with a keyboard?

Yes. The arrow keys move to the next or previous item, and Home and End jump to the first and last item.

Can the first item start somewhere other than the top?

Yes. Change Start Angle in Circle Settings. It accepts values from -180 to 180 degrees.

Bright Addons Pro

Get Interactive Circle with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 51 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.