Cursor Feature Documentation

Customizing your website’s cursor makes the browsing experience more engaging and memorable for visitors, helping your site stand out and show your brand’s unique style. 

AAE Cursor offers useful features to improve interactivity and visual appeal, ensuring every movement feels smooth and well-crafted.

Requirement 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. 

Step 1: Enable Cursor and Adjust Settings

First, go to your ‘Site Settings’ and click on AAE Cursor. The interface will open immediately.

Cursor

Toggle on the cursor to reveal all the setting options. If you turn it off, the other settings will be hidden, and no cursor effect will appear on your live site. 

Cursor Size 

Next, set the cursor size based on your preference. For example, it’s set to 23 here, but you can choose any value that works best for you.

Cursor Follower Size 

Then, set the cursor follower size based on your preference. For example, it’s set to 5 here.

Step 2: Customize Cursor Colors 

You can change the cursor and follower colors to match your website’s look. It helps keep your design consistent and eye-catching.

Cursor Color

In this example, the cursor color is purple, but feel free to pick the color that suits you best.

Cursor Follower Color 

Similarly, the cursor follower color is set to purple here, but you can pick any color that works for you.

Step 3: Set Cursor Blend Style 

Try different blend modes to give your cursor a unique look.

Blend Mode 

Normal: Choosing Normal means no special effect is used. The cursor just appears as it is and covers anything behind it

Multiply: Choosing Multiply will apply an effect that mixes the cursor and background colors, making the result look darker.

Screen: It makes the background lighter by changing and blending the colors in a special way. 

Overlay: It mixes dark and light effects to keep both the bright and shadow areas of the background visible.

Darken: Selected Darken will only show the darker parts where the cursor and background overlap. 

Lighten: Selected Lighten will only show the lighter areas where the cursor and background meet.

Color Dodge: Choosing Color Dodge will make the background brighter using the cursor’s color, making light areas stand out more.

Saturation: It uses the cursor’s color strength but keeps the background’s brightness and overall color the same.

Color: Apply the cursor’s color and strength while keeping the background’s brightness the same.

Difference: It takes away the cursor’s colors from the background, making strong or opposite color effects.

Exclusion: Works like Difference, but the colors blend more gently and look less sharp.

Hue: Keeps the cursor’s color shade but changes its brightness and intensity to match the background.

Luminosity: Changes the background’s color based on how bright the cursor is.

For example, it’s set to ‘Normal’ here, but you can choose any option you prefer.

BreakPoint 

Breakpoint settings give you options like Mobile Portrait, Mobile Landscape, Tablet Portrait, Tablet Landscape, and Laptop.

These help you adjust your design for different devices and screen sizes. For example, here it is set to ‘Mobile Portrait’.

After that, click ‘Save Changes’ and close the settings. Then, click ‘Preview’ to see the result.  

Final Result 

You did it 

Congrats! You’ve finished customizing your website’s cursor with AAE Cursor Extensions. By turning on the cursor, setting its size, picking colors, and trying out different blend styles, you’ve given your site a unique, interactive look that makes it more engaging and attractive.

Moreover, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.