How To Use Cursor Effects Extension By Atomic Elements

The Cursor Effects extension in Atomic Elements allows you to enhance your website’s interactivity by adding custom cursor animations and hover effects to Elementor elements. It helps create a more engaging and immersive user experience by transforming the default cursor into dynamic visual effects that respond to user movement and interactions. With flexible customization options and seamless Elementor integration, you can easily add modern cursor styles and interactive animations without writing any code. This documentation will guide you through how to use and customize the Cursor Effects extension in Atomic Elements.

Enable the Cursor Effects Extension #

To use the Cursor Effects Extension from Atomic Elements, first, you have to enable the extension.

1. Go to WordPress dashboard → Atomic Elements Plugin dashboard.
2. Then, click on the Elementor Tab and the sub items will open.
3. Then, Click the Extensions Tab.
4. Search for the Cursor Effects Extension.
5. Enable the Cursor Effects Extension.
6. Hit the Save Settings Button.

Place to Find the Cursor Effects Extension #

To find the Cursor Effects Extension, you must need to select the any elemenets/container where you want to use the extension. Let’s see the steps below –

1. Click to any elements to select it. Here we have select an image widget.
2. Now move to the Advanced tab to customizing the image.
3. Here you will found the Cursor Effects extension visible.

Using the Cursor Effects Extension #

1. Enable the switcher to get the customization options for the cursor effects. There are various kinds of source that you can use to show the cursor effects to your audience. Let’s explore those one by one –

Default Source #

In this section, we have two more tabs. These are Layout and Style. Let’s start with the Layout Tab first –

1. Source: You can select the source of the cursor with this option. The available options are default, text, image & icon. Here we have selected the source as default.
2. Style: In default source, you will get three styles of the cursor. Choose one that you prefer.
3. Speed: You can adjust the cursor moving speed with this option.
4. Disable Default Carousel: Enable the switcher to turn off the default cursor appearance on the selected elements.
5. Disable on Mobile: Enable the switcher to turn of the cursor effect on mobile device.

Now, let’s proceed to the Style Tab –

1. Primary Color: You can make changes to the primary cursor color with this option.
2. Size: You can adjust the size of the primary cursor with this option.
3. Secondary Color: You can make changes to the secondary cursor color with this option.
4. Size: You can adjust the size of the secondary cursor with this option.

Text Source #

In this section, we have two more tabs. These are Layout & Style. Let’s explore the Layout Tab first –

1. Source: You can select the cursor source with this option. Here we have selected the source as Text.
2. Text Label: You can add title text and make changes to it with this option.
3 Disable Default Carousel: Enable the switcher to turn off the default cursor appearance on the selected elements.
4. Disable on Mobile: Enable the switcher to turn of the cursor effect on mobile device.

Now, let’s proceed to the Style tab –

1. Color: You can make changes to the text color with this option.
2. Background Type: You can select the background type to be classic or gradient with this option.
3. Color: You can change the background color with this option.
4. Image: You can change the background image with this option.
5. Padding: You can adjust the inner space of the text field with this option.
6. Border Type: You can add and change the border types with this option.

7. Border Radius: This option controls the roundness of the border.
8. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Image Source #

In this section, we have two more tabs. These are Layout and Style. Let’s start with the Layout tab first –

1. Source: You can select the cursor source as image in this field.
2. Image: You can add the image that you want to use as a cursor in this field.
3 Disable Default Carousel: Enable the switcher to turn off the default cursor appearance on the selected elements.
4. Disable on Mobile: Enable the switcher to turn of the cursor effect on mobile device.

Now, let’s proceed to the Style tab –

1. Size: You can make changes to the image cursor size with this option.
2. Border Type: You can add and change the border types with this option.
3. Border radius: You can control the roundness of the border with this option.

Icon Source #

In this section, we have two more tabs. These are Layout and Style. Let’s start with the Layout tab first –

1. Source: You can select the cursor source as icon in this field.
2. Icons: You can add the icons that you want to use as a cursor in this field.
3 Disable Default Carousel: Enable the switcher to turn off the default cursor appearance on the selected elements.
4. Disable on Mobile: Enable the switcher to turn of the cursor effect on mobile device.

Now, let’s proceed to the style tab –

1. Color: You can change the icon cursor color with this option.
2. Size: You can make changes the size of the icon cursor with this option.

All done, You have successfully customized the Cursor Effects Extension on your website.

Video Tutorial #

You can also watch the video tutorial to learn more about the Cursor Effects extension.

Thanks for being with us.