Framework
Global Presets UI Style Guide
01. Color palette
#00bdf2
#30318c
#f0eeee
02. Text styles
Header Text: Montserrat
Body Text: Montserrat
Primary
Secondary
Tertiary
Heading 1
Heading 1
Heading 1
Heading 1
Heading 2
Heading 2
Heading 2
Heading 2
Heading 3
Heading 3
Heading 3
Heading 3
Heading 4
Heading 4
Heading 4
Heading 4
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
List
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
03. Modules
Primary
Secondary
Tertiary
Button
Blurb
Image Sizes
Maximum width: 550px
The blurb image follows the same rule of matching image width with column width, with the exception of the 1 column, which has a max width of 550px instead of the normal 1080px. Therefore, a safe bet would be to insert images with a max width of 550px. Here are the image widths for the Blurb Module in each column layout.
1 column: 550px
½ column: 510px
⅓ column: 320px
¼ column: 225px
Email optin
Images Module (16:9)
For your images fill the maximum width of the column on all devices use the following sizes for each column layout when using the image module.
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
Image Module (16:9)
Images Module (4:3)
For your images fill the maximum width of the column on all devices use the following sizes for each column layout when using the image module.
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
Image Module (4:3)
Images in other modules(16:9)
The following image dimensions follow the 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
Aspect ratio 16×9
Images in other modules (4:3)
The following image dimensions follow the 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
Aspect ratio 4:3
Images (4:3)
The following image dimensions follow the 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
Aspect ratio 4:3
GF Project Featured Image
Image width: equal to the size of its column width
Adding featured images to your posts to be displayed using the Blog Module is pretty straightforward. The featured images should be as wide as the column it sits in. For example, if you are using a blog module in a two-thirds column with a right sidebar, you would need to use a featured image at least 700px width since that is the width of a two-thirds column in Divi.
Don’t forget that the featured image will also be used on your single post template (the page that displays your full post after you click on the post excerpt). So, make sure your singe page template is also using a two-thirds column to display your featured image.
700 x 300
(Aspect ratio 7×3)
1 column: 1080
¾ column: 795
⅔ column: 700
½ column: 510
⅓ column: 320
¼ column: 225
GF Project Content Image
Image width: equal to the size of its column width
Adding featured images to your posts to be displayed using the Blog Module is pretty straightforward. The featured images should be as wide as the column it sits in. For example, if you are using a blog module in a two-thirds column with a right sidebar, you would need to use a featured image at least 700px width since that is the width of a two-thirds column in Divi.
Don’t forget that the featured image will also be used on your single post template (the page that displays your full post after you click on the post excerpt). So, make sure your singe page template is also using a two-thirds column to display your featured image.
At least 770 x 578
(Aspect ratio 4×3)
1 column: 1080
¾ column: 770
⅔ column: 770
½ column: 770
⅓ column: 770
¼ column: 370
Gf People page image
Width: equal to your single post column width (default: 795px)
When you click to view your portfolio item from the grid layout, the featured image will span the width of the content section. Just like for the Blog Module,
Just like for the Blog Module, Divi creates a smaller version (400px wide) of the portfolio featured image to be used for the Portfolio Module grid layout. This is helpful for reducing file size and keeping your page load time down. So, when creating a new portfolio item, it is important that your featured image be at least as wide as the column of your single portfolio post template.
Wide 320
Height 320
(Aspect ratio 1:1)
Call to action
Get your Dance-O-Mat
Divider
Person
Name Goes Here
Position
Recommended Dimensions
Width: 600px
Here are the recommended person module image sizes for each aspect ratio:
3:4 – 600 x 800 (recommended for portraits)
16:9 – 600 x 338
4:3 – 600 x 400
Social Media Follow