Create Scroll Down Icons With Looping Animation In Divi

hi i'm victor from divimundo.com and in today's tutorial i will show you how to create scroll down icons with looping animations and we will use the divi theme for wordpress so first i will show you how to create a simple scroll down arrow after that i will use a custom mouse icon and last but not least i'll show you how to display different icons for mobile and desktop and don't forget that you can download this layout and the icons that i use for free at divimundo.com and if you like this tutorial feel free to leave a comment and subscribe for more tutorials so let's begin [Music] we will follow the blog post on divimundo.com called create scroll down icons with looping animations in divi if you're watching this directly on youtube you can find the link in the description below the video so here you'll find all the resources you need like the css snippets and the icons so here you can actually download the ready-made layouts json files and just import them to divi if you don't want to do it yourself and also in the zip file the icons used is included in png and the svg formats so let's start by adding a css id to the section below the hero area so i'll jump over to my development site and in this example i'm using the layout pack the divi crib which is actually available for a free download at divimundo.com when someone clicks the scroll down icon that will be placed below the buttons here in the hero area i want them to be sent down to the section below so i'll start by opening the settings for the section below the hearing area click the cogwheel i'll go to the advanced tab and the css id and classes tab and i'll add the id scroll so this is just to make it possible for me to put a link in the scroll down icons later so the user will be sent down to the right place when they click the icons so that's an easy thing to forget that's why i'm doing it first okay so the next step will create the simple or basic scroll down arrow using the default db icons in the blurb module i'll insert a new row below the bottom row in the hero area and i will have a one column row and now i will insert a blurb module and the first thing i do is just remove the title text and the body text and then i'll go down to the image and icon tab and i'll switch to use icon instead and here we have a few relevant icons for scroll down icon you could use this one or this one this one yeah there are a few to choose from and i know that elegant themes are working on releasing a big update with lots of new icons soon so when you're watching this there might be more icons available in this gallery so i'll use this one for now and then we have the link section and that's where we add our anchor link i will link the full module not just the title hash scroll perfect i will actually just test it so we'll save and exit before we go to the next step which is styling this icon so here we have it and if i click it i'm sent down to the section below okay we go back to the visual builder so i'll go to the design tab and the image and icon tab i want the icon to be white i want it to be smaller so i'll just drag this one down let's see in the blog post which size i used there i used 48 so we can use the same here just make it consistent and then we can scroll all the way down to animation here we want it to slide and we want the animation direction to be down the animation duration here is where you can make the animation a bit smoother and more subtle so i'll have it to 700 milliseconds instead of thousand we don't want any animation delay and the intensity we can have 10 so we'll make it really smooth and the opacity we want it to be 100 from the start and instead of easing is out i'll use ease in and then we have the animation repeat yes we want it to loop and you will not see the loop here in the visual builder so we have to exit and preview it in front and to be able to see that and then we have an extra animation setting here for the icon and we will just set that to no animation so we will not have duplicate animations okay so if we save it there and we can exit the visual builder just to preview it you will see that we have a looping animation but it's kind of a harsh one not smooth at all and this is because the animation loop in db so it goes down and then it starts from the beginning and what we are going to do with the little css snippet now is to make it reverse so it will go down and then it will reverse and go up and then it will go down again which will create a much much smoother effect and this css snippet is available in the blog post so we have it here i'll just click here to copy it and let's go back and as you probably know there's a few different places to add css you can go to the theme customizer and target the class for this one but i'll do it directly in the module for now so i'll enable the visual builder again and i'll open the blurb settings i'll go to the advanced tab and custom css and for the main element and you will not see any difference here in the visual builder we have to to exit that but just just a brief explanation so animation direction alternate that's what will make the animation smooth going down and then in reverse and then we have one more setting here because i noticed when using this css snippet sometimes if you scroll down the page and scroll up again the opacity will change so that's not an effect that we want to have so this one will force full opacity always so let's save that and we'll exit the visual builder and there we go looks much more smooth with an alternate animation effect and if i scroll down and i scroll up it's still visible and if i click it i will be sent down to the section below [Music] the next step is to create the more fancy one where we can use a custom icon so i will just enable the visual builder and for this we will use a png image or you can use any other format that you like that's transparent i will actually go into the blurb icon and the image and icon field and i will toggle this use icon to no and then i can add an image so i will upload files i will actually upload both the mouse and the finger icon because we will use the finger icon for mobile devices later this is a custom mouse icon i will upload that one and there we have it i'll exit the visual builder and there we have our custom scroll down icon with an animation loop really easy and if you're doing this from scratch and you know that you want to use the custom image you could of course use an image module instead of the blurb module and just add this image and use the same animation settings and the same custom css as we used in the blurbs you don't have to use the blurb module for this [Music] so in this last step we will change this icon for mobile devices because it doesn't really make sense that we have a mouse icon in mobile devices you don't use a mouse on your smartphone so we will change that into a finger icon instead i'll open the blurb settings and if you're using the image module it's just the same procedure we are using the db responsive content feature so i'll go to the image tab and i'll just hover let's see if i can find it there we go and i will click the mobile icon smartphone icon here and i will go to tablet so this one inherits the desktop image by default but if i click here i can replace it with this hand icon and now you can see that we have the hand in mobile devices and this is inherited to smartphones if you don't make any other settings so let's save this one and exit the visual builder now you can see that we have the mouse in desktop and if i preview it in a mobile device oops you can see that we actually have this swiping finger that's all for today if you like this video feel free to leave a comment below and subscribe for more tutorials coming your way thanks for watching [Music] [Applause] [Music]

Channel: DiviMundo

Views: 467

Keywords:

Id: BBumHGP76RM

Length: 11min 15sec (675 seconds)

Published: Mon Sep 13 2021