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.
This is an awesome concept.
My only question is – for a visitor, if there’s no CTA, then they won’t know to click, right? The only indication will be a cursor change.
If on mobile, even that indication will be gone.
It all depends on the website and the client, one of the users in the Divi community, had a site last year where the slider graphics has buttons in the slider background, so when you have a website like that it makes sense to make the slider clickable, you can see the site I’m talking about here https://www.boltthemes.com/creating-a-clickable-divi-slider/
It definitely not something to use on every website 🙂
what fields are you entering the CSS? is this within the section module custom css settings?
I personally put the CSS into my Child themes stylesheet, other wise you can add it to custom CSS box in the Divi Theme options