To Celebrate our launch, you can become a Lifetime member for $199, limited to 100 customers.

Creating a Clickable Slider

Over the last year I’ve seen quite a few Divi slides which had no button but in their graphics was a graphic button that said click here and there was nowhere for them to click, I’ve actually personally used this idea on this site to link to other Divi-related resources, which is why today I want to help you make a clickable slider in case one day need it.

First thing we are going to do is assign our full-width section an ID of clickable so that only this slider will inherit this styling.

divi id

we now need to know what height our slider is, the best way to make sure our slide and links will be the same size is to set a height, so we are going to show you how to resize the slider, for this instance we will make our slider fullscreen.

#clickable .et_pb_slider .et_pb_slide_description {height:87vh; }

screencapture-localhost-fm-slide-test-1462869241285Next, we will adjust our button to take up the whole slider and to make it clickable, for demo purposes we’ve added a background colour so that you can see what is happening

#clickable .et_pb_slider .et_pb_button { 
position:absolute; 
left:0; top:0; 
width:100%; 
margin-top:0px; 
height:87vh;  
color:transparent; 
border:0px; 
}

screencapture-localhost-fm-slide-test-1462869961397Now to make it really fullwidth we need to edit 2 divs that the button is inside of because they have some margin and padding which is why it is not full screen yet.

So here the final bit of CSS to complete our full-width clickable slides.

#clickable .et_pb_slide{ 
padding-left:0px; 
padding-right:0px; 
margin-right:0px; 
}
#clickable .et_pb_slide .et_pb_container { 
margin-left:0; 
margin-right:0; 
width:100%; 
min-width:100%; 
max-width:100%; 
}

Our slider will now look like this, except your will be transparentscreencapture-localhost-fm-slide-test-1462874588074

Lastly, we need to make sure that our slider still looks good on different devices,

You can adjust the height to be whatever size you like, to make it fit your design if you have any issues with it on mobile devices you can try adding the following CSS for mobile.

Responsive CSS

/* ----- TABLETS ----- */
 @media(min-width:768px) and (max-width:980px) {
 #clickable .et_pb_slider .et_pb_slide_description,
#clickable .et_pb_slider .et_pb_button { 
height:520px; 
}
}
/* ----- MOBILES ----- */ @media(max-width:480px) { 
#clickable .et_pb_slider .et_pb_slide_description,
#clickable .et_pb_slider .et_pb_button { 
height:460px; 
} 
}

be sure to adjust all of the heights so that it will look right for your needs.

screencapture-localhost-fm-slide-test-1462874769089

I hope that some of you will find this tutorial helpful 🙂

James Fosker

James Fosker

James is the Founder of Fosker Media and Divi Stride, when he not busy working with clients or building tools for the Divi Community he likes to travel and see the world.