Divi slider image sizes

There have always been lots of questions in the various Facebook groups and in the Elegant Themes support forum about the correct image sizes for Divi particularly for use in the Divi slider. With so many different device sizes nowadays it’s hard to get a one-size-fits-all image but Elegant Themes do have a general rundown of some of the suggested image sizes that will work best;

 

Image sizes for Divi slider

Make sure your imges for your Divi slider module are optimized too as Google hates huge file sizes that cause slow loading websites!

Image sizes for Divi slider

Make sure your imges for your Divi slider module are optimized too as Google hates huge file sizes that cause slow loading websites!

 

Divi slider background image size

The width of your slider is determined by the column structure that your slider module is placed in. Your slider images should be at least the width of the column that it is in.

Standard column/widths are;

  • 1 column: 1080 pixels
  • ¾ column: 795 pixels
  • ⅔ column: 700 pixels
  • ½ column: 510 pixels
  • ⅓ column: 320 pixels
  • ¼ column: 225 pixels

The height of your Divi slider is determined by the amount of text content that is in your slide, and If you have more than 1 slides, then the slider will use the height of the tallest slide. 

These are the image sizes for various aspect ratios; 

16:9 aspect ratio standard:

1 column: 1080 x 608
¾ column: 795 x 447
⅔ column: 700 x 394
½ column: 510 x 287
⅓ column: 320 x 181
¼ column: 225 x 128

4:3 aspect ratio standard

1 column: 1080 x 810
¾ column: 795 x 597
⅔ column: 700 x 526
½ column: 510 x 384
⅓ column: 320 x 241
¼ column: 225 x 170

Fullwidth Slider Background Image size

The width of the Div fullwidth slider modules background image is determined by the browser width the site is being viewed on. You will need to account for the largest “standard” size screen so 1280px wide is usually recommended. To accommodate larger screens used by my target audience (web designers)I usually use images at 1920px wide.

The height is again determined by the amount of content.

For full screen sliders i usually use 1920px x 1024px.

Slide Image – If you want to also add a slide image, it will display to the left of your slide text and on top of your slide background image. If no slide image is set,  then the slide text will be displayed centred. As the height of the slide is set by the amount of text on the slide, if your slide image is tall enough it will drop below the bottom of the slide, creating bottom aligned image.

Slide images will only appear in sliders that are in ⅔ column, ¾ column, or 1 column widths.

Slide images will not display on browser widths of less than 768 pixels.

The widths of slide images are;

1 column: 450 pixels
¾ column: 330 pixels
⅔ column: 320 pixels

You can download Perfect Image Templates For Every Situation directly from Elegant Themes.

 

4 1 vote
Article Rating