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.

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.

CSS Snippet

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

Next, 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

CSS Snippet

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

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

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

CSS Snippet

#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 transparent

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.

CSS Snippet

/* ----- 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.

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