Reference guide for creating animated circular layouts in Divi.
Overview #
Circular Animation arranges content in a circular layout with animated effects. Items can be positioned around a circle, with text or images in the center. The module supports entrance animations, scroll effects, mouse interactions, and 3D perspective transforms.
The module is organized into three tabs: Content (what appears and its behavior), Design (visual styling), and Advanced (CSS and positioning).
Content Tab #
Controls the content structure and interactive behavior of the circular layout.
Content #
Main content section controlling what appears in the module. Expandable to reveal additional content settings.
Center Content #
Defines what appears in the center of the circle. Can contain text, images, or other elements. Leave empty for no center content.
Circle #
Configures the circular arrangement of items.
- Number of Items: How many items arrange around the circle
- Radius: Distance from center to items in pixels
- Item Rotation: Rotation angle of each item around the circle
- Start Angle: Starting position in degrees (0-360)
Animation #
Dropdown to select entrance animation. Options include Fade, Slide, Rotate, and others. Set to None for no animation.
Animation plays when module loads or when triggered by scroll, depending on Entrance Animation settings.
Entrance Animation #
Controls when and how the entrance animation triggers.
| Option | Behavior |
| On Load | Animation plays when page loads |
| On Scroll | Animation plays when module scrolls into view |
| On Click | Animation plays when user clicks module |
Scroll Effect #
Enable to rotate the circle based on scroll position. When enabled, circle rotates as user scrolls the page.
Turn on for interactive scroll-linked circular rotation. Turn off for static or animation-only rotation.
Mouse Effect #
Enable to rotate the circle based on mouse position. Circle follows cursor movement.
Turn on for interactive cursor tracking. Useful for attention-grabbing effects.
Hover #
Configures what happens when user hovers over items in the circle.
- Hover Effect: Scale, Rotate, Color Change, or None
- Hover Speed: How quickly the hover effect responds
- Hover Scale: Size change on hover (1.0 = no change, 1.2 = 120%)
3D / Perspective #
Applies 3D depth and perspective to the circle.
- Enable 3D: Toggle 3D perspective on/off
- Perspective Depth: Amount of 3D depth (higher = more dramatic)
- Rotation X/Y/Z: Initial 3D rotation angles
Link #
Optional URL applied to the entire module or individual items. Leave blank if no link needed.
Enter full URL including http:// or https://.
Background #
Background settings for the module container. Options for color, image, or gradient background.
Element Label #
Internal label for identifying this module in the builder. Does not appear on front-end.
Useful for organizing multiple modules. Example: "Client Logos Circle" or "Portfolio Carousel".
Design Tab #
Controls the visual appearance and styling of the circular layout.
Circular Text #
Text styling for items positioned around the circle.
- Font Size: Text size in pixels
- Font Weight: Boldness of text
- Color: Text color
- Text Align: Alignment within each circular item
Circular Image #
Image styling for items positioned around the circle.
- Width: Image width in pixels
- Height: Image height in pixels
- Border Radius: Corner rounding (50% for circles)
- Object Fit: How image fills its container (Cover, Contain, Fill)
Center Content #
Styling for the center content element.
- Width: Width in pixels or percentage
- Height: Height in pixels or percentage
- Text Align: Text alignment within center
- Background: Background color or image
Sizing #
Overall dimensions of the circular animation module.
- Width: Module width (pixels, %, vw)
- Height: Module height (pixels, %, vh)
- Max Width: Maximum allowed width
- Aspect Ratio: Lock width/height ratio
Spacing #
Padding and margins around the module and between items.
- Padding: Space inside the module
- Margin: Space outside the module
- Item Spacing: Gap between circular items
Border #
Border styling for the module container.
| Property | Description |
| Style | Solid, dashed, dotted, double |
| Width | Border thickness in pixels |
| Color | Border color |
| Radius | Corner rounding in pixels |
Box Shadow #
Shadow effect on the module.
- Horizontal Offset: Shadow left/right distance
- Vertical Offset: Shadow up/down distance
- Blur: Softness of shadow
- Spread: Size of shadow
- Color: Shadow color and opacity
Filters #
Visual effects applied to the entire module.
| Filter | Effect |
| Brightness | Lightens or darkens the module (0-200%) |
| Contrast | Adjusts color contrast (0-200%) |
| Saturation | Adjusts color intensity (0-200%) |
| Grayscale | Removes color (0-100%) |
| Blur | Blurs the module (0-20px) |
Transform #
2D and 3D transformations.
- Scale: Resize the module (1.0 = normal, 1.5 = 150%)
- Rotate: Rotation in degrees (0-360)
- Translate: Move on X and Y axes
- Skew: Distort along X or Y axis
Animation #
Additional animation effects for the circular items. Separate from Entrance Animation in Content tab.
Advanced Tab #
Controls CSS, positioning, and responsive behavior.
CSS ID & Classes #
Assign CSS targeting to the module.
- CSS ID: Unique identifier (prefix with # in CSS)
- CSS Classes: Space-separated class names (prefix with . in CSS)
Example: ID = "circular-nav", Classes = "animated-circle light-theme"
CSS #
Custom CSS code applied directly to the module. Write any valid CSS.
Example: opacity: 0.95; transform: translateY(10px);
Visibility #
Controls when the module displays on different device types.
| Option | Device Type |
| Show on Desktop | Screens 1200px and wider |
| Show on Tablet | Screens 768-1199px |
| Show on Phone | Screens below 768px |
Uncheck to hide module on specific device types. Useful for responsive design.
Transitions #
Smooth transitions when module properties change.
- Enable: Toggle transitions on/off
- Duration: How long transition takes (milliseconds)
- Delay: Wait before transition starts
- Timing Function: Ease curve (Ease, Linear, Ease In, Ease Out)
Example: 300ms duration for smooth hover effects.
Position #
Controls how the module is positioned in the layout.
- Position Type: Static (normal flow), Relative, Absolute, Fixed
- Top/Bottom: Vertical position offset
- Left/Right: Horizontal position offset
- Z-Index: Stacking order relative to other elements
Static is default (follows document flow). Absolute requires relatively-positioned parent.
Common Configurations #
Client Logo Circle #
Static circular arrangement of client logos with hover scaling.
| Tab | Setting | Value |
| Content | Entrance Animation | On Load |
| Content | Scroll Effect | Off |
| Content | Mouse Effect | Off |
| Content | Hover | Scale 1.1 |
| Design | Circular Image Width/Height | 80px each |
| Advanced | Visibility | Show all devices |
Interactive Scroll-Linked Circle #
Circle rotates based on scroll position.
| Tab | Setting | Value |
| Content | Animation | Rotate |
| Content | Scroll Effect | On |
| Content | Mouse Effect | Off |
| Design | Sizing Height | 400px |
3D Cursor-Tracking Circle #
3D circle that responds to mouse movement.
| Tab | Setting | Value |
| Content | Mouse Effect | On |
| Content | 3D / Perspective | Enable 3D, Depth 1000px |
| Content | Entrance Animation | On Load |
| Design | Sizing | Height 500px |
| Advanced | Visibility | Show on Desktop only |
Troubleshooting #
Module not appearing #
Check Visibility settings for device breakpoint. Verify Sizing Width and Height are not 0. Ensure Opacity is not set to 0. Check if module is behind other content.
Items not arranged in circle #
Verify Circle settings are configured. Check Number of Items is greater than 1. Verify Radius value is appropriate. Ensure Sizing is large enough to accommodate circle.
Scroll Effect not working #
Verify Scroll Effect is enabled in Content tab. Check that module is visible and not below the fold. Scroll the page to trigger the effect. Test in a fresh browser session.
Mouse Effect too sensitive or slow #
Check Mouse Effect speed setting. Adjust Perspective Depth if using 3D. Test cursor movement across entire module area.
Hover effect not triggering #
Verify Hover is enabled. Check Hover Effect is not set to None. Ensure items are properly sized and clickable. Test on actual device.
Animation not playing #
Verify Animation dropdown is not set to None. Check Entrance Animation is not set to None. Verify trigger condition is met (On Load, On Scroll, On Click). Clear browser cache.
3D perspective looks flat #
Check 3D / Perspective is enabled. Increase Perspective Depth value for more dramatic effect. Verify Rotation X/Y/Z values are not all 0. Test in different browser.
Circle appears rotated incorrectly #
Check Start Angle setting. Adjust Item Rotation setting. Verify Rotation X/Y/Z in 3D settings. Disable Scroll Effect if it's interfering.
Items misaligned on mobile #
Check responsive visibility settings. Reduce Circle Radius for smaller screens. Adjust Sizing for mobile breakpoints. Test on actual mobile device.
Performance is sluggish #
Disable Mouse Effect or Scroll Effect if not needed. Reduce Number of Items. Disable 3D if not in use. Check for conflicting animations or extensions.
Support #
For issues or questions about the Circular Animation module, contact support@diviexpand.com or check the Divi documentation.
© 2026 DiviAnimator. All rights reserved.
