HowTo Video Tutorial Script (347 words)

In this Divi Quick Tip I’m going to show you how to create a Bouncing Scroll Down Arrow using some CSS animation. This is perfect for pairing with Divi’s full-width header module as it helps viewers who may be awed by your beautiful full-width image or video from recognizing that there is indeed more content to view further down the page. Here’s how it’s done.

First, make sure you have a full-width header module in place by navigating to your page builder, clicking ‘add new full width section’ and choosing ‘full width header’. In the full width header module you’ll want to make sure that you have a scroll down button and arrow symbol turned on. When you’ve made your selections click ‘Save’ and close. Then make sure to update your page.

Now you will have a full width header that looks something like this. But what we want to do now is animate that scroll down arrow with a nice little bounce. To do that navigate to your e panel by going to Divi ‘theme options’, ‘general settings’, scroll to the bottom and paste the following code into your custom CSS panel. You can find this CSS in the accompanying blog post for this video. Check out the video description for a link or go to elegantthemes.com/blog, and then find the blog post for Divi Nation episode 10 in the community category.

Once you’ve pasted the code into the CSS panel click ‘Save’. On the front end of your website refresh the page and you should now have a scroll down arrow that does a subtle little bounce to grab your site visitors attention. Well, that’s it for this Divi Quick Tip. If you have a Divi Quick Tip request you can submit it via comment a tweak to add Elegant Themes or by email to me at podcast@elegantthemes.com with the subject line Divi Quick Tip Request. Don’t forget if you’re watching this video on YouTube or Facebook take a moment to subscribe, follow, like and/or share. It really helps. Thanks!