The “Custom Cursor Widget“ for Elementor enhances the website’s interactivity by providing a distinctive and personalized cursor experience for free. 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 Tutorial Video
Add a Free Custom Cursor to Elementor
This widget requires Unlimited Elements Free 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 in Elementor Custom Cursor
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 in Elementor Custom Cursor
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 (Pro)
Turn on or off the pause animation option.
Color Difference (Pro)
Choose this option to turn on the color difference option on cursor.
Default Cursor (Pro)
Show or hide the default cursor.
Custom Cursor Settings in Elementor Custom Cursor
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 (Pro)
Show or hide the default cursor.
Show Outer Cursor (Pro)
It will add another layer of circle on cursor.
Graphic Element
You can show an graphic element in cursor such as Icon, SVG, Image (Pro) and Text (Pro).
Pointer Event Position
Set the position of the pointer activation area of inner cursor.
- Top (Pro)
- 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 (Pro)
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 (Pro)
- Shine (Pro)
- Spin (Pro)
- Pulse (Pro)
- Grow (Pro)
- Waggle (Pro)
Shine Cursor Settings in Elementor Custom Cursor
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.
Trails Styling in Elementor Custom Cursor
You can set the cursor trails, color type and the outline color.
Elementor Custom Cursor Styling
You can set the cursor size, color, border radius, border, box shadow etc.
Design Examples of Elementor Custom Cursor
Here are some live use cases for the Custom Cursor widget.
Free Elementor Custom Cursor with Custom Created Circular Effects.
Free Elementor Custom Cursor with Trail Effect.
Thank you for using the Custom Cursor Widget for Elementor! With its unique cursor effects and smooth animations, this is the best Custom Cursor Widget for Elementor, perfect for enhancing user interaction and adding a creative touch to your website. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
