The Custom Cursor widget for Elementor enhances the website’s interactivity by providing a distinctive and personalized cursor experience. With this widget, you can easily customize cursor styles to match your brand, creating dynamic and engaging effects that captivate your audience. Whether you’re aiming for subtle animations or bold visual cues, the Custom Cursor Widget offers the flexibility to elevate your user experience.
Let’s look at each of the options in the Custom Cursor widget for Elementor below.
Elementor Custom Cursor Video Tutorial
Add Custom Cursor Widget to Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Custom Cursor”
- Hover over the widget in the search results and click install
- Add your “Custom Cursor” widget to any Elementor Page
General Settings
Cursor Type
Select the cursor type from below options-
- Trail
- Custom Cursor
- Shine
Disable on Touch Devices
Cursor effect will be disabled on touch devices.
Cursor Trail Settings
Apply Cursor Trail to
Choose where to apply the cursor trail effect:
- Page - It applies the cursor effect to entire page.
- Section ID or Class- - It applies the effect to the sections or elements specified by their CSS ID or class.
Pause Animation
Turn on or off the pause animation option.
Color Difference
Choose this option to turn on the color difference option on cursor.
Default Cursor
Show or hide the default cursor.
Custom Cursor Settings
Apply Cursor Trail to
Choose where to apply the cursor trail effect:
- Page - It applies the cursor effect to entire page.
- Section ID or Class- It applies the effect to the sections or elements specified by their CSS ID or class.
Show Default Cursor
Show or hide the default cursor.
Show Outer Cursor
It will add another layer of circle on cursor.
Graphic Element
You can show an graphic element in cursor such as Icon, SVG, Image, Text.
Pointer Event Position
Set the position of the pointer activation area of inner cursor.
- Top
- Center
Inner Cursor Delay
Set the inner cursor delay to create a parallax effect on cursor.
Outer Cursor Delay
Set the outer cursor delay to create a parallax effect on cursor.
Hide cursor if not moving
It will hide the cursor if user is not moving the cursor.
Enable Attention Grabber
Enable any of the following attention grabber effect on cursor.
- Blink
- Bounce
- Fade
- Shine
- Spin
- Pulse
- Grow
- Waggle
Shine Cursor Settings
Apply Cursor Trail to
Choose where to apply the cursor trail effect:
- Page - It applies the cursor effect to entire page.
- Section ID or Class- It applies the effect to the sections or elements specified by their CSS ID or class.
Frequency
Set the frequency of shine effect.
Delay
Set the duration of shine effect.
Shine Style
Select the shine style from given options.
Shine Color
Select the shine color from different color options.
Shine Scale
Set the shine scale.
Shine End Scale
Set the scale of shine on the end of animation.
Custom Cursor Widget Styling
You can set the cursor size, color, border radius, border, box shadow etc.
Custom Cursor Widget Design Examples For Elementor
Here are some live use cases for the Custom Cursor widget.
Custom cursor with custom created circular effects.
Custom cursor with trail effect.
Thank you for exploring the Custom Cursor Widget for Elementor. We hope this documentation has equipped you with the knowledge to effectively implement and customize the cursor design. By integrating this widget, you can elevate your website’s user experience and create a more engaging environment for your visitors. For further information and support, please feel free to reach out to support team.