One of the fastest ways to interact with visitors on your website is through their cursor. That’s where it usually all begins. User interaction on desktop is almost entirely based on the way visitors use their cursor to navigate through your pages. It’s also the one thing that allows them to trigger events, whether that’s a hover effect or a click. That’s why you’ll come across a ton of websites that customize the cursor with a specific goal in mind. Styling your cursor is helpful if you want to highlight a call to action, for instance. Today, we’ll show you how to do that within Divi. You’ll be able to download the JSON file for free as well!
Let’s get to it.
Download The Layout for FREE
To lay your hands on the free layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Create New Page/Open Existing One
Create New Page or Open Existing One
Start by creating a new page or opening an existing one.
Upload Layout of Your Choice
To focus on the essence of this tutorial, we’re going to use the Bike Repair Layout Pack but feel free to use any other layout of your choice.
Add New Section to Bottom of Page
Once your layout has been uploaded, navigate to the bottom of your page and add a new section. We’re going to use this section to build our cursor.
To create a custom cursor, we’ll add a Text Module later down the tutorial. This module will be placed inside the section, but we don’t want the actual section container to show up in our design. To avoid the section from showing up, we’ll remove the default top and bottom padding in the spacing settings.
Continue by adding a row to the section using the following column structure:
Remove all default top and bottom padding too.
Add Text Module (Cursor)
Leave Content Box Empty
Time to add a Text Module, which we’ll, later on, use as a cursor! Leave the content box empty.
To turn the cursor into a circle, as you could notice in the preview of this post, we’ll use rounded corners and a border.
In the preview of this post, you could notice an inverted effect on the cursor, especially when hovering a Button Module. To achieve this effect, we’ll use a blend mode for our Text Module.
Main Element CSS
By adding these following lines of CSS code to the module’s main element, we’ll help prep the module for future use as a cursor:
We’ll use a fixed position for the module as well.
And we’ll complete the module settings by assigning a custom CSS class in the advanced tab.
2. Add Functionality
Add Code Module Below Cursor Text Module
Now that we have the cursor Text Module in place, it’s time to focus on functionality! Add a Code Module right below the cursor Text Module of your new section.
Add Style & Script Tags
We’ll combine a bit of CSS and JQuery Code, so go ahead and add style and script tags to your Code Module.
JQuery Code Opening
Next, copy paste the following JQuery code opening lines between the script tags:
Reposition Cursor Text Module
Now that the foundation inside our Code Module has been created, we’ll go step by step. The first thing we’ll do is place the Text Module we’ve created after the builder’s inner content. This will allow us to use the cursor page-wide.
Remove Page’s Default Cursor
Next, we’ll remove the page’s default cursor using some custom CSS code which we’ll place between the style tags.
Set Cursor Text Module as Cursor
Next, we’re going to allow the cursor to follow the visitors movements using the following lines of JQuery code:
Toggle Effect When Hovering a Particular Module
Add Increase CSS Class
As you could notice in the preview of this post, as soon as a Button Module is hovered, the cursor styles change. To achieve this, we’re going to add a new CSS Class between our style tags.
All Button Modules
We’ll toggle this CSS class using some JQuery code. The code below targets all Button Modules inside your Divi page one by one.
A Specific Button Module
If you want the effect to apply to one module in particular, a different approach is needed. First, open the Button Module you want to apply the effect to and include a custom CSS class.
Then, replace the CSS class in the code you used in the previous step. That’s it!
In this post, we’ve shown you how to create a custom cursor for your Divi page. We’ve also shown you how to use this custom cursor to trigger a hover effect when someone hovers a call to action on your page. Once you get the approach of creating a custom cursor, you’ll be able to create any kind of design or effect! You were able to download the JSON file for free as well. If you have any questions or suggestions, feel free to leave a comment in the comment section below.
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.
This content was originally published here.