Divi is a great theme, no doubt. But sometimes the standard modules are a little bit limited in the way how you can use them. Recently we saw a question in one of the Facebook groups about how the Divi Slider could be used to display images. Sure, the slides have a field to upload an image and they also have the background image option but both settings have their drawbacks.

What if you just want an image – and only the image – on the slide while maintaining the aspect ratio of the image and having the image cover the whole slide? In other words: how can you make the Divi Slider a fullwidth image slider? Or to show what we mean:

 

From this…

I want to be a fullwidth image slider

How cool would it be if my image would cover me completely while still being clickable?

I want to be a fullwidth image slider too

How cool would it be if my image would cover me completely while still being clickable?

…to this

I am a fullwidth image slider

I am so cool because my image covers me completely while I am still being clickable!

I am a fullwidth image slider too

I am so cool because my image covers me completely while I am still being clickable!

Well, we are sorry but that is just not possible with the standard module. You either end up with a stretched or cropped background image or a way to small slide image. Either way, it is not what you want, right? There is no way around writing some CSS and to be honest, in that case it was not the easiest thing to do. Partly because of the weird combination of hard coded properties, partly due to dynamically set properties via JavaScript and finally there are some media queries involved as well.

To keep things short, we came up with a responsive solution which should work in most cases. Simply add the following CSS to you themes Custom CSS field in the Divi Theme Options.

Okay, so with the CSS in place, we now can setup our slider. First, add a new Slider Module. It doesn’t matter if it is a Fullwidth Slider in a Fullwidth Section or a regular Slider in any kind of Row.

Then start adding your slides. Since the title, the button and the content will be invisible to your readers, it doesn’t matter what you put in here. However, search engines will still be able to see the text so you might want to use something which fits your content to improve your On-Page-SEO. If you want your slides to be clickable, use the Button URL field.

Then choose the image you want to display in your slide.

Last but not least, head over to the Sliders Advanced tab and add the “full-image-slider” class to the CSS Class field.

Thats basically all you need to do. Save the page and see your Divi fullwidth image slider in action. If you found this tutorial useful, we would be happy to see how you use the code so why not leave us a comment below?