How to Create a Custom Cursor Effect in Divi Theme + Free Landing Page Layout!

i would like to share with you this fun black friday landing page layout for the dv team and i created a header section with a nice follow the mouse hover effect the monochromatic cover effect and in this video i would like to show you how you can recreate it [Music] hello my name is anja and my goal here is to help you build awesome websites so in this video we are going to use some custom css and jquery to create this nice monochromatic hover effect in dv so this is the page layout as you can see it's just a simple product listing for black friday landing page but this is the section i would like to focus on in this tutorial i just created a new empty page and here i will add a new row with two columns and now inside the row settings we want to make sure that the first column background is black and we also want to add some padding inside that column so in the design section in the column settings let's add top and bottom padding we'll get back to to it in a in a moment it should be fine for now let's add background to the second column and also the same spacing now i want to make sure that the row is full width 100 percent and i want to make sure that my columns are equal height and i will also decrease the gutter width so there's no space here let's add our text in the design section we will want to make this big and bold let's set the font size to 120 pixels make sure that the line height it's okay let's change the font size for smaller screen sizes and let's change the alignment so on desktop right alignment on tablet centered and found center okay great now let's duplicate this text and change the color and alignment okay great actually we want to change the this column setting uh color background color back to black on for tablet and um and phone so the text color will also change so on tablet let's do white and also white on phone and now back to the column settings background on tablet should be black and also on the phone now we have to fix the spacing here so in the spacing section um let's check desktop first there will be left padding in the second column here but for tablet when the text is centered we we don't want that so here let's remove that and we don't want to stop space here like so and it should be fine on mobile so now back to the first section this needs some space on the right side and we want to lose the bottom padding and the right spacing on mobiles okay lovely so two colors on desktop and single color on a phone let's save that and now i plan to use a css property called the mix blend mode but this property only affects sibling elements so if i want my new element to mix mode with this both of these columns my element needs to be next to the row in the html structure so i could use a new row but that comes with too much of initial styling so instead i'm going to create my element dynamically with jquery so let's add a new section with code module and here let's add a script tag and jquery function and we need to insert an element actually we need a custom css class we have to add that to our section first but inside this section we let's call it um the black friday hero section let's append it with a new div so append function creates an element uh within at the end of the target object okay so here i want a div with a class of cursor like so okay and now this css class needs to be added in our section settings so this is my class and while i'm here i will remove the spacing padding and also remove the row spacing okay great and now if i save that and exit the visual builder and inspect my page source here is let me see here is our row and this is a div we've created with jquery so since this is a sibling element the mix blend mode will work on both of the columns here so now back to my code module and below i will add a style tag okay and we want our cursor sorry to be positioned fixed let's say at the top and in the center let's make it square round okay and use the mix blend mode difference okay that should be a good start let's save that now on the front end you can see this element here and i have made a typo here so back the mix blend mode you see it's looking good now now let's make sure that it actually follows our mouse so we are going back to our jquery code and we are going to use the mouse move function on window so when a window so wherever whenever we move our cursor within the browser window our element which is the the class cursor will change its css position and top will use the y-axis and left we'll use sorry this should be a comma the x axis like that okay so and let's clean this up a bit okay and we want to make sure that the cursor itself is within within the in the center of the cursor so we have to move it a bit so transform translate by 50 of its own with minus 50 to the top and to the left so this will move its center to the center okay that should do it let's save that and back here let's close the inspector as you can see it follow my it follows my my mouse cursor so it's pretty awesome and on mobile it would be displayed wherever we tap it and then it would stay fixed as we scroll there's no content here so i can't really scroll it we can preview that here on this layout so it would be here in the center and now when i scroll this stays fixed unless i tap somewhere else so i think it's a fan effect even on mobile so depending on that top and left position at the beginning we can change that initial initial state but then user can still tap on their phone and this element will change its position one other thing we can add is to simply remove the cursor the default cursor from the from the section so you can see the the mouse pointer just the circle that would be a simple uh case of the hero section sorry no it was dl bf hero cursor none and if i save it i'm back here there's no pointer anymore so there you have it please feel free to download this page layout from my website and also copy the code i use if you would like to recreate it yourself and i know this isn't something you would use on your everyday website but i still hope that it was helpful and you had some fun creating that with me as always feel free to get in touch if you have any questions and i will see you next time you

Channel: Ania Romańska

Views: 4,689

Keywords: Divi Theme, Divi Tutorial, Divi 4, Divi, CSS tutorial, jQuery, Free Divi Layout, Divi Landing Page, Custom cursor, Hover effect, Divi walkthrough

Id: YFRbIz4eggU

Length: 15min 43sec (943 seconds)

Published: Thu Nov 26 2020