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