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!

Sneak Peek

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)

1. Enter your e-mail address below to subscribe to our newsletter.
2. Download the zip file containing the layouts and the icons.
3. Extract the zip file on your hard drive.
4. Import the JSON files to your Divi Library or use the icons in your own designs.

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.

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.)

That’s all!

Let me know what you think in the comments below and don’t forget to subscribe on YouTube for more tutorials.