--- title: "How To Create Mouse Cursor Parallax Effects in Elementor for FREE?" url: https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/ date: 2024-01-04 modified: 2026-04-10 author: "Aditya Sharma" description: "Adding a parallax effect on mouse hover on an Elementor widget adds depth and interactivity to a webpage by creating an illusion of movement as the user hovers their cursor..." image: https://theplusaddons.com/wp-content/uploads/2024/01/How-To-Create-Mouse-Cursor-Parallax-Effects-in-Elementor-for-FREE_-1024x536.jpg word_count: 291 --- # How To Create Mouse Cursor Parallax Effects in Elementor for FREE? ## Key Takeaways - The Plus Addons for Elementor allows users to add a parallax effect on hover to most of its widgets. - Mouse Move Parallax is enabled by default on selected widgets of The Plus Addons for Elementor. - Users can adjust the parallax effect in the x and y axis from the Parallax Options section. Adding a parallax effect on mouse hover on an Elementor widget adds depth and interactivity to a webpage by creating an illusion of movement as the user hovers their cursor over an element. You can easily add a parallax effect on mouse hover on most of the widgets of The Plus Addons for Elementor. [LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/elementor-mouse-hover-parallax//?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Required Setup - [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor](http://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated. - This is a Premium feature, and you need the PRO version of [The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## How to Activate the Mouse Move Parallax? This feature is enabled by default on some of the selected widgets of The Plus Addons for Elementor. You don’t need to enable it separately. ## Key Features - **Add parallax effect on hover** - You can easily add a parallax effect on hover to a widget. ## How to Add Mouse Hover Parallax Effect to a Widget in Elementor? Add one of the listed below widgets of The Plus Addons for Elementor and follow the steps -  1. Go to **Advanced** > **Plus Extras**.  2. Turn on the **Mouse Move Parallax** toggle. ![mouse move parallax settings](https://theplusaddons.com/wp-content/uploads/2024/01/mouse-move-parallax-settings.gif) From the **Parallax Options** section, you can adjust the parallax effect in the x and y axis. Now, you’ll see a beautiful parallax effect on mouse hover. ![mouse move parallax demo](https://theplusaddons.com/wp-content/uploads/2024/01/mouse-move-parallax-demo.gif) ## Supported Widgets - [Accordion](https://theplusaddons.com/elementor-widget/elementor-accordion/) - [TP Text Block](https://theplusaddons.com/elementor-widget/elementor-advanced-text-block/) - [Advanced Typography](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/) - [Advanced Buttons](https://theplusaddons.com/elementor-widget/elementor-advanced-buttons/) - [Advertisement Banner](https://theplusaddons.com/elementor-widget/elementor-banner-widget/) - [Audio Player](https://theplusaddons.com/elementor-widget/elementor-audio-player/) - [Before After](https://theplusaddons.com/elementor-widget/elementor-before-after-slider/) - [Blockquote](https://theplusaddons.com/elementor-widget/elementor-blockquote/) - [Breadcrumbs Bar](https://theplusaddons.com/elementor-widget/elementor-breadcrumbs/) - [Caldera Forms](https://theplusaddons.com/elementor-widget/#plus-adapted-wgts) - [Carousel Remote](https://theplusaddons.com/elementor-widget/elementor-carousel-remote-sync/) - [Contact Form 7](https://theplusaddons.com/elementor-widget/contact-form-7-styler/) - [Countdown](https://theplusaddons.com/elementor-widget/elementor-countdown-timer/) - [Draw SVG](https://theplusaddons.com/elementor-widget/elementor-draw-animated-svg-icon/) - [Dynamic Device](https://theplusaddons.com/elementor-widget/elementor-dynamic-device-mockups/) - [Dynamic Smart Showcase](https://theplusaddons.com/elementor-listing//magazine-slider/) - [Everest Form](https://theplusaddons.com/elementor-widget/everest-forms-styler/) - [Flip Box](https://theplusaddons.com/elementor-widget/elementor-flipbox/) - [Gravity Form](https://theplusaddons.com/elementor-widget/gravity-forms-styler/) - [Heading Animation](https://theplusaddons.com/elementor-widget/elementor-heading-animations/) - [Heading Title](https://theplusaddons.com/elementor-widget/elementor-heading-titles/) - [Info Box](https://theplusaddons.com/elementor-widget/elementor-info-box/) - [Mailchimp](https://theplusaddons.com/elementor-widget/mailchimp-form/) - [Ninja Form](https://theplusaddons.com/elementor-widget/ninja-forms-styler/) - [Number Counter](https://theplusaddons.com/elementor-widget/number-counter/) - [Post Search](https://theplusaddons.com/?s=perfect) - [Pricing List](https://theplusaddons.com/elementor-widget/elementor-price-list/) - [Pricing Table](https://theplusaddons.com/elementor-widget/elementor-pricing-table/) - [Process Steps](https://theplusaddons.com/elementor-widget/elementor-process-steps/) - [Progress Bar](https://theplusaddons.com/elementor-widget/elementor-progress-bar/) - [Style List](https://theplusaddons.com/elementor-widget/elementor-stylish-list/) - [Switcher](https://theplusaddons.com/elementor-widget/elementor-switcher/) - [Tabs/Tours](https://theplusaddons.com/elementor-widget/elementor-tabs/) - [Video Player](https://theplusaddons.com/elementor-widget/video-player/) - [WP Forms](https://theplusaddons.com/elementor-widget/wpforms-styler/) - [Button](https://theplusaddons.com/elementor-widget/free-elementor-buttons/) - [Creative image](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/) ## Frequently Asked Questions **Q: What should I do if the mouse parallax effect is not working?** A: If the mouse parallax effect is not functioning, ensure that you have both the Elementor FREE Plugin and The Plus Addons for Elementor installed and activated. The parallax feature is enabled by default on selected widgets, so check if you're using one of those widgets. If not, you may need to enable the Mouse Move Parallax toggle in the widget settings. **Q: Can I use mouse cursor parallax effects on all Elementor widgets?** A: Mouse cursor parallax effects can be added to most widgets provided by The Plus Addons for Elementor. Some of the supported widgets include the Accordion, TP Text Block, Advanced Buttons, and Advertisement Banner. This allows for a wide range of customization options to enhance interactivity on your webpage. **Q: What are the best settings for mouse hover parallax effects?** A: To achieve optimal results with mouse hover parallax effects, adjust the parallax effect settings in the x and y axis from the Parallax Options section. This customization allows you to control the depth and movement of the effect, creating a more engaging user experience. Experiment with different values to find the perfect balance for your design. **Q: Does the mouse parallax effect work on mobile devices?** A: The mouse cursor parallax effect is primarily designed for desktop usage, as it relies on mouse movement. On mobile devices, the effect may not function as intended due to the lack of a mouse cursor. It's important to consider this when designing your webpage to ensure a consistent experience across devices.