Circle Hub

How to use Circle Hub Widget of Sky Addons for Elementor

The Circle Hub widget of Sky Addons turns a list of features, services or process steps into a slowly turning ring of icons around a centre panel. As each item reaches the top of the ring it becomes the active one and the panel swaps to that item’s image or icon, title, description and call to action — so the section tells its story on its own, and a visitor can hover, click or drag the ring to jump anywhere in it. Items can sit on one ring or two, the panel is fully styleable, and the whole thing shrinks to fit a phone without collapsing into a list. This documentation will guide you through building and styling the Circle Hub widget on your website.

Key Features

1. One or two rings – assign each item to a ring; the second ring turns the opposite way
2. Always-on smooth spin – a continuous rotation with the speed and direction under your control
3. Upright icons – the ring turns but every icon stays the right way up
4. Drag to spin – grab the ring and throw it; the orbit keeps turning underneath
5. Hover or click to focus – pick which gesture swaps the centre panel
6. Entrance animation – items fly out from the middle to their slot on the ring, one after another
7. Per-item colours – any single item can override the shared style without touching the rest
8. Optional chip rail on phones – keep the ring by default, or swap it for a swipeable row below 768px
9. No animation library – the spin runs on CSS, so it stays smooth even on a busy page

Insert Circle Hub Widget

1. Open the page in the Elementor editor and search for “Circle Hub” in the widget panel. Searching for “circle info” or “orbit” also finds it.
2. Drag the widget into a container. Give that container enough height and side padding for the ring to breathe — it is a circle, so it needs room on all four sides.

Build Your Items

Each row of the Items repeater is one chip on the ring and one panel in the middle. Open a row and you get a Content tab and a Style tab of its own.

1. Media Type – Icon or Image, then pick the Icon or the Image below it.
2. Title – the panel heading. It also names the chip for screen readers, so never leave it empty.
3. Description – the panel body. Keep it short; the centre is a circle and clips what does not fit.
4. CTA Text and CTA Link – an optional button at the bottom of the panel.
5. Ring – Ring 1 (inner) or Ring 2 (outer). A ring only appears when an item actually uses it, and the second ring turns the opposite way.
6. Custom Style – on the row’s Style tab. Turn it on to give this one item its own icon, chip, panel, title, description and CTA colours. Anything left empty falls back to the widget’s Style tab, so you can recolour a single item without rebuilding the rest.

Configure the Center Panel

1. Show Media – display the active item’s icon or image inside the panel.
2. Show CTA – display the button. Turn it off for a purely informational hub.
3. Title HTML Tag – the heading level the panel title uses. Pick one that fits the page outline rather than one that looks right; size is a Style control.

Configure Layout

Every control here is responsive, so the ring can be one size on desktop and another on a phone.

1. First Ring Radius – how far the inner ring sits from the centre.
2. Gap Between Rings – the distance out to the second ring. Keep it larger than the item size or chips on adjacent rings will overlap as they pass each other.
3. Item Size – the diameter of each chip.
4. Center Panel Size – the diameter of the middle disc. Raise it when a description is being clipped.
5. Collapse to Rail – Never keeps the ring at every width (the default; it simply shrinks to fit). Below 768px swaps it for a swipeable chip rail with the panel underneath.
6. Rail Gap – spacing between chips in rail mode.

Configure Motion

1. Seconds per Full Turn – higher is slower. The panel swaps as each item passes the top of the ring, so this also sets how long each item stays on screen.
2. Spin Direction – Clockwise, Counter Clockwise, or Auto Alternate, which spins every second Circle Hub on the page the opposite way.
3. Entrance Animation – items fly out from the middle to their slot when the widget first appears.
4. Pause on Hover – stops the ring while the cursor is over it.
5. Drag to Spin – lets a visitor grab the ring and offset it; the orbit keeps spinning underneath.
6. Focus Trigger – Hover or Click. Click always works either way, which is what makes the widget usable on touch.

Style Your Circle Hub

The Style tab holds the shared look. Anything you set here applies to every item unless that item turned on its own Custom Style.

1. Rings:
   The thin guide line each ring is drawn on — its colour and thickness. One setting covers every ring.
2. Orbit Item:
   The chips. Icon size, background, border, radius and shadow, with separate Normal, Hover and Active states plus a scale for the active chip.
3. Center Panel:
   The middle disc — background, padding, border, radius, shadow, and the size and colour of the media inside it.
4. Title:
   Typography, colour and spacing for the panel heading.
5. Description:
   Typography, colour and spacing for the panel body.
6. CTA Button:
   The panel button, with Normal and Hover states.

The active chip needs to be obvious at a glance — that is the whole point of the ring parking one item at the top. Give the Active state a clearly different background or a scale bump rather than a subtle shade.

Save and Preview

1. Click “Publish” or “Update” to save your changes.
2. Preview the page and let the ring make a full turn, then check it at tablet and phone width — the layout controls are responsive and worth setting per device.

Best Practices

1. Six to eight items per ring. Past about ten the chips start touching, and the section stops reading as a ring of distinct things.
2. Keep descriptions to a sentence or two. The panel is a circle, so it clips rather than growing. If you need more room, raise Center Panel Size before cutting text.
3. Use a slow turn. Around forty seconds per revolution gives a visitor time to read each panel. A fast spin looks busy and nothing gets read.
4. Use the second ring for grouping, not for volume. Two rings work when they mean something — core services inside, extras outside. Twelve items split across two rings just to fit is harder to read than six.
5. Give the container real height. The ring is as tall as it is wide; a short container crops it.

Troubleshooting

1. Chips on the two rings overlap: raise Gap Between Rings until it is comfortably larger than Item Size, or move some items onto one ring.
2. The description is cut off: the centre is a circle and hides the overflow. Raise Center Panel Size, shorten the text, or reduce the description font size.
3. The second ring disappeared: a ring only renders when at least one item is assigned to it. Check the Ring field on the rows you expected to be on the outside.
4. The ring is cropped on the sides: the parent container is too narrow for the radius. Lower First Ring Radius for that device, or widen the container.
5. Nothing moves for some visitors: a device set to reduce motion gets a still ring on purpose. Hover, click and drag all still work.

Frequently Asked Questions

How do I build a rotating circle of services in Elementor?

Drop in the Circle Hub widget, add one Items row per service with an icon, title and description, then set Seconds per Full Turn in the Motion section. The ring spins on its own and the centre panel follows whichever item is at the top.

Can I put items on two rings?

Yes. Each item row has a Ring field — choose Ring 1 (inner) or Ring 2 (outer). A ring only appears once something is on it, and the outer ring turns the opposite way to the inner one.

How does Circle Hub behave on a phone?

By default it keeps the ring and shrinks it to fit — the layout controls are responsive, so you can set a smaller radius, item size and panel size for mobile. If you would rather have a swipeable row of chips with the panel beneath, set Collapse to Rail to “Below 768px”.

Can one item have a different colour from the rest?

Open that item’s row, switch to its Style tab and turn on Custom Style. Only the fields you fill in there override the widget’s Style tab, so you can recolour a single chip or panel and leave everything else alone.

Will the spinning slow my page down?

No. The rotation is a CSS animation with no animation library behind it, so the browser runs it off the main thread and it stays smooth while the rest of the page works.

Related Documentation

• Info Box
• Step Flow
• Content Switcher
• Card

Conclusion

The Circle Hub widget by Sky Addons for Elementor gives a services or process section something a static grid cannot — motion that leads the eye and a centre panel that explains one thing at a time. Keep the item count honest and the turn slow, and it carries a whole section on its own. If you have any questions while building yours, the Sky Addons support team is happy to help.