How to add a down arrow to Divi fullwidth slider

Divi’s “Fullwidth Header” module is nice because you can add a “down arrow” to it, to entice users to click to auto-scroll them down. However, the Divi “Fullwidth Slider” module doesn’t have this option. You can add it with a little jQuery and CSS.

View the video example »

First steps

1. Where to add the arrow: You should add an ID to the Fullwidth Slider Module that you want the arrow on. Here, we add home-slider as an ID to the Fullwidth Slider Module Settings.
2. Where to scroll to: You will probably want to link the arrow to auto-scroll down the page. So you should add an ID to the Section that you want it to scroll down to. Here, we add mission as an ID to the Section below the slider.

jQuery

Add this script to the “Footer” area of the Header Footer plugin.
This is the jQuery that injects the necessary HTML into the slider module. It inserts the arrow directly after the .et_pb_slides wrapper of #home-slider. You can change the ID of the href to match yours; as well as change what Font Awesome icon it uses (Font Awesome Cheatsheet).

<script>
	jQuery('<div class="slider-down-arrow"><a href="#mission"><i class="fa fa-angle-double-down"></i></a></div>').insertAfter('#home-slider > .et_pb_slides');
</script>

CSS

Add this CSS to your custom CSS area.
This is the CSS that styles the arrow and properly positions it within the .et_pb_slides wrapper. You may need to adjust the font-size of the arrow and/or adjust the bottom positioning, depending on if you have the slide controls turned on (the little dots at the bottom).

/* arrow link wrapper */
.slider-down-arrow {
	position: absolute;
	z-index: 10;
	bottom: 70px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 32px;
}
/* arrow link */
.slider-down-arrow a {
	line-height: 1em;
	display: inline-block;
	color: white;
	text-shadow: 0 1px 8px rgba(0,0,0,0.5);
	transition: all 0.2s ease;
}
/* animate the arrow link if not hovered,
note: this uses animation via Divi Booster */
.slider-down-arrow a:not(:hover) {
	animation: fullwidth-header-bounce 2.2s ease-out infinite;
}
/* add hover effect on arrow link */
.slider-down-arrow a:hover {
	text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}

@media (min-width: 1200px) {
	/* increase arrow size, and adjust positioning, for larger screens */
	.slider-down-arrow {
		bottom: 90px;
		font-size: 48px;
	}	
}

@media (max-width: 980px) {
	/* hide arrow when stuff stacks */
	.slider-down-arrow {
		display: none;	
	}
}