Divi Quirks: Turn Your Image Sliders to Links

Nov 1, 2015 | Web Stuff

Ahhh, Divi. The gift that keeps on giving.

If I had a bias, Divi would be it. I have been working with this theme for more than a year now and I gotta say, it is my absolute favorite. The code is so neat and easy to follow, the Elegant Themes support is outstanding, the modules are robust and easy to customize – I could go on.

How to transform image sliders to links

So I will be starting a series of some common Divi quirks and how to solve them. One of my clients has a fullwidth slider module displaying a couple of images on her blog. She wanted the entire image slider to link to different pages.

Simple enough, right? Well, disclaimer. To do this, we will make the default button into an invisible transparent overlay that will cover your entire image.

“What? But I need that button!” you say? Well, in the slider module where you add your images and bits, there’s a nifty little text box at the bottom where you can add all the buttons you need.

Alright? Good to go? Crisis averted?

Here’s how you do it. No firstborn sacrifice required.


  1. Create a slider module (fullwidth or normal, it will work on both) and use a descriptive CSS class. I used make-slider-links.


2. Add the link where you want your image to go on the Button URL field. Add your image. Rinse and repeat.


3. Add this code into Divi > Theme Options > Custom CSS.

.make-slider-links .et_pb_more_button {
	font-size: 0;
	background-color: rgba(0,0,0,0.0) !important;
	top: -1000px;
	right: -1000px;
	height: 5000px;
	width: 5000px;
	position: absolute;

Save your changes.

Brilliant! You just turned an image slider into a link! I’ve included a tiny slider below that follows this tutorial so you can see how it works. I’ve set it to scroll at 5000 ms.

This tutorial has been tested out on Divi 2.5.