How To Use The Circle Info Widget By Atomic Addons

The Circle Info widget by Atomic Addons sets a row of icons around a circle. When a visitor points at or clicks an icon, its title and text appear in the middle of the circle. It suits services, process steps or features that belong together. You can let the ring turn on its own, and on phones the circle can become a simple list. This guide covers adding the widget, filling in the items and setting up the circle.

Enable the Circle Info Widget

Circle Info is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Circle Info. You can also open the Content category.

4. 4

   Turn the Circle Info widget on.

5. 5

   Click Save Settings.

Add the Circle Info Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Circle Info. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Circle Info Items

Open the widget and go to Content → Circle Info. The list starts with six items; each one is an icon on the ring. Use Add Item to add more — the icons spread evenly around the ring however many there are. Each item has two tabs. The Content tab:

1. 1

   Title: The heading shown in the middle when the item is chosen. It also names the item in the list.

2. 2

   Details: The text under the title, written in the text editor.

3. 3

   Icon: The icon on the ring. Pick one from the icon library or upload an SVG.

4. 4

   Link: Optional. With a URL, the title becomes a link. Turn on Link On Icon (see below) to make the icon a link as well.

The Background tab gives the item its own background — a color, gradient, image or video — that fills the middle of the circle while the item is shown.

Title, Details and Link accept Dynamic Tags. The first item is shown when the page loads.

Additional Info

Content → Additional Info sets up the circle:

1. 1

   Layout (Mobile Mode): How the widget looks on phones (below 768px). List, the default, drops the ring and shows every item as a row with its icon beside the title and text. Circle keeps the circle on phones too.

2. 2

   Circle Size: The width and height of the circle, 400px by default (200 to 1500px). Use the device icon to set a smaller circle for tablets and phones.

3. 3

   Title HTML Tag: The title’s markup: H1 to H6, div, span or p. span by default.

4. 4

   Custom Margin: Turn it on to set your own Margin around the circle, in place of the default space above and below it.

5. 5

   Icon Area Size: The size of the round icon buttons on the ring, 56px by default.

6. 6

   Icon Size: The size of the icon inside each button.

7. 7

   Select Event: What shows an item: Hover (the default) or Click. Moving to an icon with the keyboard also shows its item.

8. 8

   Link On Icon: Makes the icon open the item’s Link. Items without a URL keep a plain icon.

9. 9

   Auto Mode: Turns the ring on its own: every few seconds it rotates one step and shows the next item. Visitors who ask their system for reduced motion see the items change without the spinning.

10. 10

    Time (ms): Shows when Auto Mode is on: the time between steps in milliseconds, 3000 (3 seconds) by default, from 1000 to 10000.

Style the Circle Info

Everything below is on the Style tab.

• Content — the middle area in Normal and Hover states: background, padding, border and border radius. Glassmorphism blurs what lies behind it, with a Blur Level.
• Icon — the icon buttons in Normal, Hover and Active states (the active one is the item being shown): color, background, border, shadow and a Glassmorphism blur.
• Title and Text — color and typography, with a hover color.
• Additional — the two rings: Border 1 is the solid ring the icons sit on, Border 2 the dashed outer ring. Each has its border style, width and color.