The Cursor Move Effect Extension allows elements to respond to mouse movement, creating interactive and engaging experiences for your visitors. As users move their cursor across the page, selected elements can smoothly shift position, adding depth and motion to your design.

Requirements #

Before using the Cursor Move Effect Extension, make sure you have:

• Divi Theme or Divi Builder installed and activated
• DiviAnimator installed and activated
• Cursor Move Effect Extension enabled

How to Enable Cursor Move Effect #

1. Log in to your WordPress Dashboard.
2. Navigate to DiviAnimator → Extensions.
3. Locate Cursor Move Effect.
4. Enable the extension.
5. Save your changes.

Once enabled, Cursor Move Effect settings will become available in supported Divi modules.

Getting Started #

Step 1: Select Your Element #

Choose the element you want to animate with the Cursor Move Effect.

Supported module can include:

• Image
• Button
• Blurb
• Column
• Container
• Other supported Divi Module

After selecting the Module, open the Cursor Move Effect settings and enable the feature.

Enable On Editor #

The Enable On Editor option allows you to preview the cursor movement effect directly inside the Divi Builder.

Enabled #

The animation will respond to cursor movement inside the builder.

Disabled #

The effect will only be visible on the frontend of your website.

Movement Wrapper #

The Movement Wrapper setting controls the area used to calculate mouse movement.

Default #

Applies the Cursor Move Effect automatically using the default movement area.

Custom #

Allows you to define a custom wrapper or CSS class for the movement area.

Use this option when you want more control over how the effect behaves within specific sections or containers.

Move X #

The Move X setting controls the horizontal movement distance.

Higher values increase movement from left to right.

Example:

• 50 = Subtle horizontal movement
• 100 = More noticeable horizontal movement

Adjust the value based on the intensity of the effect you want to create.

Move Y #

The Move Y setting controls the vertical movement distance.

Higher values increase movement from top to bottom.

Example:

• 40 = Subtle vertical movement
• 80 = More noticeable vertical movement

Combine Move X and Move Y to create custom motion effects.

Duration #

The Duration setting controls how long the element takes to return to its resting position after cursor movement.

Lower values create faster responses.

Higher values create smoother, more relaxed movement.

Example:

• 0.3 = Fast response
• 0.7 = Smooth response
• 1.0 = Slower response

Tips #

• Use subtle movement for professional designs.
• Apply the effect to hero images for added depth.
• Combine with Tilt Effects for more immersive interactions.
• Use custom wrappers to create section-specific movement areas.
• Preview the effect using Enable On Editor before publishing.

Need Help? #

If you have any questions about the Cursor Move Effect Extension or need assistance, please contact the DiviExpand support team via “support@diviexpand.com”.  We're always happy to help.