Info Circle

Meet the Pixel Info Circle module for Divi! Arrange your services, features or process steps as icons around a circle — hover or click an icon and its content animates into the center. A rotating, interactive alternative to plain blurb grids that instantly draws attention.

View Demo →

With the Pixel Info Circle module you can:

1. Place any number of items around a circle, each with its own icon or image
2. Reveal each item’s title, description, image and button in the circle’s center
3. Trigger items by hover or click, or let Auto Mode cycle through them
4. Auto-rotate the whole circle in a loop with configurable speed and angle
5. Choose from 19 content animations — fades, bounces, flips, zooms and more
6. Fall back to a simple list layout where the circle doesn’t fit

How the module works

The Pixel Info Circle is a parent/child module. Each child item has two parts: the Info Image & Icon shown on the circle’s edge, and the Content (icon/image, title, description, button) revealed in the center when the item activates.

How to add the Info Circle module

1. Open a page with the Divi Visual Builder
2. Click the + (Add New Module) button
3. Search for Pixel Info Circle and click it to insert the module
4. Add a child item for every point on the circle and fill in its content

Settings

The parent Settings group controls the circle’s geometry and behavior:

1. Circle/List Size — the diameter of the circle (default 400px)
2. Icon Area Offset — nudge the icon ring inward or outward (−100 to 100px)
3. Start Angle — where the first item sits on the circle (0–360°)
4. Select Event — activate items on Hover or Click
5. Icon & Image Animation — animate the edge icons on activation
6. Content Animation Type — how the center content appears: fades, zooms, bounces, flips, rotations and more (19 presets)
7. Show as list — render the items as a vertical list instead of a circle

Auto Mode

1. Auto Mode — automatically cycle through the items every Auto Time milliseconds (default 3000ms)
2. Auto Rotate Mode — rotate the circle itself: None, Loop or Repeat
3. Auto Rotate Time / Auto Rotate Angle — the speed and step of the rotation
4. Reverse Animation Direction — flip the rotation direction

NOTE: The circle layout needs room. On narrow screens enable Show as list, or reduce the Circle/List Size responsively, so the items stay usable on mobile.

Child Items

Each child item’s Content tab has two groups:

1. Info Image & Icon — the marker on the circle’s edge: enable Use Icon and pick an icon, or upload an image
2. Content — what appears in the center: an optional icon/image, Title, rich-text Description and an optional Button

Design Settings

1. Circle & List (parent) — the circle’s visual styling
2. Info Image & Icon — size, color and background of the edge markers, with separate hover and active states (parent defaults, overridable per item)
3. Content Image & Icon / Content Text / Content Button (items) — styling for the center content

Design Ideas

1. Services wheel — 6 services around the circle, Select Event Hover, FadeIn content animation.
2. Process steps — numbered icons around the circle with Auto Mode cycling every 4 seconds — a self-playing explainer.
3. Team circle — member photos as edge markers, bios and a profile button in the center, activated by Click.