===== COLUMNS =====
16:9 aspect ratio
- 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
- 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
===== MODULES =====
16:9 aspect ratio
- 1 column: 1080 x 608
- ⅔ column: 770 x 433
- ¾ column: 770 x 433
- ½ column: 770 x 433
- ⅓ column: 770 x 433
- ¼ column: 370 x 208
4:3 aspect ratio
- 1 column: 1080 x 810
- ⅔ column: 770 x 578
- ¾ column: 770 x 578
- ½ column: 770 x 578
- ⅓ column: 770 x 578
- ¼ column: 370 x 278
===== Slider and Post Slider Background =====
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
If you want the slider to span the width of columns on mobile devices
- Recommended minimum width: 1920px
- 1 column: 450
- ¾ column: 330
- ⅔ column: 320
===== Images in Lightbox Displays =====
- 1500 x 844 works well for a good full-screen image in a lightbox display for large monitors
===== Audio Module Cover Art Image =====
- Width: at least 780px
===== Blog Module Featured Images with Fullwidth Layout =====
- Image width: equal to the size of its column width
- 1 column: 1080
- ¾ column: 795
- ⅔ column: 700
- ½ column: 510
- ⅓ column: 320
- ¼ column: 225
===== Blog Module Featured Images with Grid Layout =====
- Width: Equal to the size of the single post column width (default 795px)
===== Portfolio Module Featured Images =====
- (Fullwidth and Grid Layout; Standard and Filterable)
- Width: equal to your single post column width (default: 795px)
===== Blurb Module Image =====
- Maximum width: 550px
- 1 column: 550px
- ½ column: 510px
- ⅓ column: 320px
- ¼ column: 225px
===== Gallery Module Images (Slider and Grid Layout) =====
- Recommended dimensions: 1500 x 844
===== Person Module Image =====
- Recommended Dimensions
- Width: 600px
- 3:4 – 600 x 800 (recommended for portraits)
- 16:9 – 600 x 338
- 4:3 – 600 x 400
===== Post Title Module Featured Image =====
- Width: equal to the column width
===== Shop Module Product Images =====
- Recommended width: 330px
- Recommended number of columns: 3 or more
===== Testimonial Portrait Images =====
- Image size based on module settings
===== General Guidelines for Background Images =====
- 1 column: 1080
- ¾ column: 795
- ⅔ column: 700
- ½ column: 510
- ⅓ column: 320
- ¼ column: 225
Here are some modules that need background images to match the width of their column:
- Portfolio Module
- Filterable Portfolio Module
- Call to Action Module
- Post Slider Module
- Post Title Module
- Slider Module
- Text Module
===== General Guidelines for Fullwidth Background Images =====
If using a fullwidth section background image, these images will expand to the full width of your browser. That means you should make these images at least as wide as most larger monitor displays which are around 1920px.
The following modules would require a 1920px width background image:
- Fullwidth Header
- Fullwidth Portfolio
- Fullwidth Slider
- Fullwidth Post Title
- Fullwidth Post Slider
- Fullwidth Image
===== Fullwidth Header Module =====
- Fullscreen Background Images
- 4:3 – 1280 x 960 (recommended for portraits)
- 16:9 – 1920 x 1080
===== Fullwidth Header Module Logo Image =====
- There are no standard image sizes for logos. As a general guideline, I would suggest keeping the logo large enough to see clearly on large desktops but small enough to fit smaller devices like smartphones.
- Divi’s theme logo is 93 x 43 which gives you a good idea.
===== Fullwidth Header Image =====
- Recommended dimensions: 510 x 288
Recent Comments