Reference guide for the Cursor Follower extension in DiviAnimator.
Requirements #
You need Divi Theme or Divi Builder, DiviAnimator, and the Cursor Follower Extension enabled. Requires Divi 5.
Overview #
Cursor Follower displays text or content that follows the mouse cursor across the page. The element moves with the cursor position and can be styled with colors, borders, and fonts.
Applies to: Row and Section elements. Add this extension to a Row or Section to enable cursor following on that element.
Enabling the Extension #
- Go to DiviAnimator → Extensions in your WordPress admin
- Find Cursor Follower and toggle it on
- Click Save Settings
Once enabled, go to a Row or Section in your page builder. In the Row/Section settings, click the Advanced tab to find Cursor Follower settings. Settings below configure the appearance and behavior of the follower element.
Settings location: Row/Section → Advanced tab → Cursor Follower section
Content #
Controls what displays as the cursor follower.
Content Type #
Dropdown to select content type. Currently supports Text.
Text #
The text that displays when the cursor moves. Enter any text string. Can include numbers, symbols, and spaces.
Common examples: emoji, single word, symbol, abbreviation. Keep it short for visibility as it follows the cursor.
Styling #
Text Color #
Sets the color of the text. Click the color picker or enter a hex value.
Font #
Enable Font Settings #
Toggle to customize font properties. When off, default font settings apply.
Font Size (Px) #
Text size in pixels. Range: 0+. Default: 0 (use browser default).
Font Weight #
Thickness of the text. Common options: Normal (400), Bold (700), Extra Bold (800).
Font Family #
Typeface to use. Default: Inherit (uses parent element font).
Letter Spacing (Px) #
Space between characters in pixels. Positive values increase spacing, negative values decrease.
Line Height #
Vertical space between lines of text. Unitless value or in pixels. Default: auto.
Text Transform #
Text case transformation. Options: None, Uppercase, Lowercase, Capitalize.
Background Type #
Dropdown to choose background rendering.
- Color: Solid background color
- Gradient: Gradient background (if supported)
Background Color #
Sets the background color of the follower. Only applies if Background Type is Color.
Background Gradient #
Defines gradient colors and angles. Only applies if Background Type is Gradient.
Dimensions #
Width (Px) #
Sets the follower width in pixels. Range: 0+. Default: 0 (auto width).
Set to 0 for the element to size based on text content. Set to a specific value to constrain or expand the width.
Height (Px) #
Sets the follower height in pixels. Range: 0+. Default: 0 (auto height).
Set to 0 for the element to size based on text content. Set to a specific value to constrain or expand the height.
Border #
Enable Border #
Toggle to show or hide the border. When off, no border appears regardless of border settings below.
Border Type #
Style of the border line. Common options: Solid, Dashed, Dotted.
Border Width (Px) #
Thickness of the border in pixels. Range: 0+. Default: 0.
Border Color #
Color of the border. Click the color picker or enter a hex value.
Border Radius #
Rounds the corners of the follower element.
| Property | Effect |
| Border Radius Top Left (Px) | Rounds top-left corner |
| Border Radius Top Right (Px) | Rounds top-right corner |
| Border Radius Bottom Right (Px) | Rounds bottom-right corner |
| Border Radius Bottom Left (Px) | Rounds bottom-left corner |
Set all to the same value for uniform rounding. Use 50% of width/height for a circle.
Configuration Examples #
Simple Text Follower #
| Setting | Value |
| Content Type | Text |
| Text | • |
| Text Color | #333 |
| Background Type | Color |
| Background Color | #fff |
| Width | 40 |
| Height | 40 |
Badge Follower #
| Setting | Value |
| Text | NEW |
| Font Size | 12 |
| Font Weight | Bold 700 |
| Background Color | #ff6b35 |
| Text Color | #fff |
| Border Radius (all) | 20 |
Outlined Follower #
| Setting | Value |
| Text | → |
| Background Color | transparent |
| Text Color | #333 |
| Border Type | Solid |
| Border Width | 2 |
| Border Color | #333 |
Troubleshooting #
Follower not appearing #
Verify the extension is enabled. Check that text is entered in the Text field. Ensure the Row or Section has the extension added. Check browser console for JavaScript errors.
Follower not following cursor #
Verify JavaScript is enabled in your browser. Clear browser cache and reload the page. Try in an incognito window to rule out extensions interfering.
Text is invisible #
Check text color vs background color for sufficient contrast. If background is disabled, ensure text color is set to a visible color. Increase font size if text is too small.
Follower appears in wrong position #
This is normal behavior—the follower tracks with the cursor. If it appears off-screen or outside expected bounds, check width and height settings. Verify parent Row/Section has proper positioning.
Text is cut off or truncated #
Increase Width value to give text more room. Disable Width constraint to allow auto-sizing. Check Letter Spacing—negative values can cut off text.
Follower appears on all pages #
Cursor Follower is added per Row/Section. If it appears everywhere, verify it's only added to intended Rows/Sections. The extension inherits to all rows if added at the section level.
Performance is sluggish #
Cursor following is lightweight. Sluggishness is likely from other elements or extensions. Test with follower disabled to confirm. Check browser extensions and other animations on the page.
Support #
For issues or questions, contact support@diviexpand.com or submit a ticket through your DiviAnimator account.
© 2026 DiviAnimator. All rights reserved.
