Adding a scroll down icon in your hero area indicates that there are more content below. In this tutorial, we’ll add a smooth looping animation to the scroll down icon using the Divi animation effects and a CSS snippet. I’ll show you one basic scroll arrow and one fancy custom icon. Last but not least, we’ll add a swipe down icon for mobile visitors. Let’s get started!
Here is a quick look at the design we’ll build. I’ll use a slightly modified version of the free Divi layout pack “Divi Crib” from DiviMundo in this tutorial.
1. Basic scroll down icon
Here we’ll use one of the default Divi blurb icons with a loop animation.
2. Fancy scroll down icon
Here we’ll use a custom scroll down icon with an animation loop.
3. Mobile swipe down icon
Here we’ll use a custom swipe down icon and use the Divi Responsive Content feature to display it for mobile and tablet users only.
Download the layouts + icons in PNG & SVG (vector)
- Enter your e-mail address below to subscribe to our newsletter.
- Download the zip file containing the layouts and the icons.
- Extract the zip file on your hard drive.
- Import the JSON files to your Divi Library or use the icons in your own designs.
Almost there! Just download the zip file below and extract the content. Import the JSON files in your Divi Library as Layouts by clicking the Import & Export button in the top left corner in the Divi Library dashboard.
Read more about importing json files
You have Successfully Subscribed!
Step by step tutorial
First, we need to give the section (or row) below the hero area a unique CSS ID, for example scroll.
After that, we can add the link URL (anchor link) #scroll to the icon. This way, the visitor will be scrolled down when clicking or tapping the icon.
Please note that we will use a “Regular section” and not a “Fullwidth section” for the hero area.
1. Create a basic scroll down arrow animation
Start by adding a new single column row in the bottom of your hero area and insert a Blurb module. In the Blurb settings, go to Text and remove all text in the Title and Body fields.
In the Image & Icon section, choose Yes under Use Icon and choose the icon that you want to use.
In the Link section, add #scroll (or the CSS ID that you’ve added to the section below) in the Module Link URL field.
💡 Pro tip: Elegant Themes has released a new module called Divi Icon Module. It’s similar to the Divi Blurb Module but without the text fields and the custom image field. You can use the Icon Module instead if you just want to use the premade icons provided by Divi.
Head over to the Design tab and go to the Image & Icon section. Choose your Icon Color. I’ll go for white (#fff). Toggle Use Icon Font Size to Yes and choose your icon size. I’ll use 48 px in this example.
Head down to the Animation section and choose Slide under Animation Style. This will trigger a list of additional animation settings. Set Animation Direction to Down and Animation Duration to 700 ms.
Create a subtle and smooth animation by decreasing Animation Intensity to 10% and choose Ease-In under Animation Speed Curve. Set Animation Repeat to Loop and choose No Animation in the Image/Icon Animation dropdown in the bottom.
Close but no cigar?
The looping effect does not display in the Divi Visual Builder so you need to save and exit the Divi Visual Builder to preview the result in frontend. Close but no cigar, right? The animation loop is stuttering and far from smooth. I’ve also noticed that animation opacity sometimes changes when scrolling up and down on the page.
Let’s add the final touch!
Let’s fix that by adding a CSS snippet in the Advanced tab under Custom CSS » Main Element in the Blurb module.
/* Smooth loop effect */ animation-direction: alternate; /* Force full opacity always */ opacity: 1 !important;
That’s it! Save and exit the Divi Visual Builder to preview your animated scroll down icon in frontend.
2. Create a fancy animated scroll down icon
It’s pretty straight forward if you want to use a custom icon as a scroll down icon with a looping animation. If you already created the arrow in the chapter above, you can just go to your Blurb Content settings and set No in the Use Icon toggle. After that, click Add image and upload the image that you want to use.
If you start from scratch, you could of course use an Image module instead and just add the same the anchor link (#scroll) and the animation settings + the custom CSS from above.
Changing the icon color
But what if your hero area has a light background color? You could of course edit the image color in Photoshop but there’s no need for expensive third-party software when we have Divi.
Just go to the Design tab in the Blurb (or Image) module settings and click Filters. Now, reduce the Brightness to make the icon darker. 0% will give you a black mouse icon.
3. Add a Swipe Down Icon for Mobile Users
The mouse icon doesn’t make sense on mobile devices so let’s change it to a swiping finger icon for smartphone and tablet users. We’ll use the nifty Divi responsive content feature.
In the Content tab, go to Image and hover just above the image box. Now a new set of tools should appear. Click the smartphone icon to activate the responsive content feature.
Click the Tablet in the middle and upload the image that you want to display on mobile devices. The tablet image will be inherited to the smartphone view if you don’t make any additional settings. Save, and test it out. (The demo below will display the mobile swipe icon also in desktop devices, just to… yeah, you get it.)
Let me know what you think in the comments below and don’t forget to subscribe on YouTube for more tutorials.
Good morning…Thank you very much for the different designs you present. They are wonderful and I appreciate it. I’m not new to Divi but I am always trying to learn new ways to make my clients websites the best they can be! Again…thank you!
Thanks Chyrl, I’m glad you liked it! 👉
Thank you for the content Victor!
I’m glad you like it! 🙂
This is a great tutorial, thank you so much! I was looking for an animation that repeats and was having trouble finding one until I found this. Question, I want to use this on a page where the header and text fade in. Since this blurb uses the slide-in animation I can’t have it fade-in AND do the repeating slide-in. Do you have any suggestions on how to fade it in as well? If not, totally okay!
Hi Lisa! You can add the fade-in animation to the section or the row(s) while adding the slide-in animation to the blurb module.
What a nifty way to use the blurb — works great and is nicely customizable. THANKS for this super tip!!
I’m glad you liked it Stacey! After this tutorial was recorded, Elegant Themes added a new “Icon” module to Divi. This module makes it even easier, since you don’t have to remove the Blurb placeholder text or worry about unnecessary styles being loaded.
This solved an irritating problem for me…THANKS! I used the Divi Icon Module with your codes and it worked perfectly.
Great Ed! Yes, the Icon Module is a perfect fit for this.