Key Features

• Circular orbit layout with customizable Orbit Size
• Add unlimited child items
• Choose Click or Hover interactions
• Optional Autoplay
• Tooltip support
• Arrow navigation & pagination indicators
• Customizable inner-circle content (title, text, button)
• Individual styling controls for thumbs, active thumbs, dots, tooltips, inner circle, icons & more
• Fully responsive and animation-friendly

1. Child Modules (Orbit Items)

Each node around the circle is a child module.
You can:

• Add new
• Edit
• Duplicate
• Reorder
• Delete

Child modules contain:

• Title
• Description
• Icon (optional)
• Link (optional)
• Tooltip (optional)

2. Orbit Settings

This section controls how the circle behaves.

Orbit Layout

Choose how interaction works:

• Tab Style → Click to reveal center content
• Hover Style → Reveal content on hover

Animation Type

Controls animation behavior when switching between thumbs:

• Fade
• Spring
• Elastic
• Bounce
• Smooth

Use Spring or Elastic for playful visuals; Fade for subtle transitions.

Tooltip (Toggle)

Enable tooltips on hover for quick info.

Autoplay (Toggle)

Automatically cycles through orbit items.
Perfect for presentations or automatic sliders.

Orbit Size

Controls the entire circle diameter.

• Larger size → thumbs spread out widely
• Smaller size → tight circle

Recommended defaults:

• Desktop: 500–700px
• Tablet: 350–450px
• Mobile: 280–340px

Thumb Size

Controls the size of each orbit item.

Thumb Opacity

Adjust transparency for inactive thumbs.

Use Arrow Navigation

Enable/disable next/previous arrows.

Use Pagination

Enable/disable dots at the bottom for navigation indicators.

3. Background

Set a background color, gradient, or image behind the entire Interactive Circle module.

4. Admin Label

Rename the module for easy identification in the Divi Builder.

Design Tab

The design tab gives you deep customization for every part of the Interactive Circle.

Title Text

Style the main title inside the inner circle:

• Font family
• Size
• Weight
• Alignment
• Color

Content Text

Controls the inner-circle description text.

Thumb Title

Style the text inside orbiting thumbs (if enabled).

Button

If a button is included inside the inner content, style:

• Background
• Text
• Border
• Shadows
• Hover effects

Single Thumb

Style default (inactive) thumb items:

• Background
• Border
• Size
• Color
• Spacing

Active Thumb

Customize the currently selected thumb:

• Highlight color
• Glow/shadow
• Size variation
• Border emphasis

Tooltip

Style:

• Tooltip background
• Text color
• Padding
• Border radius

Inner Circle Design

Style the central circle area:

• Background color/gradient
• Padding
• Max width
• Shadow
• Border radius

Icon

If using icons in thumbs:

• Size
• Color
• Hover style

Arrow

Customize arrow navigation:

• Color
• Size
• Background
• Hover effects

Dot / Dot Active

Style pagination dots:

• Size
• Color
• Active color
• Spacing

Spacing

Adjust margin and padding across the module.

Border

Add borders to the outer circle, inner circle, or thumbs.

Box Shadow

Add depth with outer/inner shadows:

• Soft shadows recommended for modern designs

Filters

Use for subtle visual enhancements:

• Brightness
• Contrast
• Saturation

Transform

Create dynamic motion effects:

• Scale
• Rotate
• Skew
• Translate

Animation

Entrance animations for the entire module:

• Fade
• Slide
• Zoom
• Flip

Recommended duration: 250–400ms