Framework
Global Presets UI Style Guide
01. Color palette
In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.
#FFFFFF
#FBD238
#1F669A
#b5b5b5
#414042
#000000
#FFFFFF
#b5b5b5
#b5b5b5
#414042
02. Text styles
In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.
02 a. Text sizes
Suggested clamp() values for a 16px root font size with a 50px maximum:
Heading Clamp Values:
H1: clamp(1.875rem, calc(2.33rem + 8.13vw), 3.125rem) (30px → 50px)
line height: clamp(2.25rem, calc(2.8rem + 8vw), 3.75rem) (36px → 60px)
H2: clamp(1.5rem, calc(1.9rem + 6.5vw), 2.5rem) (24px → 40px)
line height: clamp(1.875rem, calc(2.3rem + 6.5vw), 3.125rem) (30px → 50px)
H3:clamp(1.25rem, calc(1.6rem + 5vw), 2rem) (20px → 32px)
line height: clamp(1.625rem, calc(2rem + 5vw), 2.6rem) (26px → 41px)
H4: clamp(1.125rem, calc(1.4rem + 4vw), 1.75rem) (18px → 28px)
line height: clamp(1.45rem, calc(1.8rem + 4vw), 2.3rem)(23px → 36px)
H5: clamp(1rem, calc(1.2rem + 3vw), 1.5rem) (16px → 24px)
line height: clamp(1.35rem, calc(1.5rem + 3vw), 2.05rem) (21.6px → 32.8px)
H6: clamp(0.875rem, calc(1rem + 2vw), 1.25rem) (14px → 20px)
line height: clamp(1.225rem, calc(1.3rem + 2vw), 1.75rem) (19.6px → 28px)
Body Text Clamp Values:
Body/Paragraph regular text:
font-size:
clamp(1rem, calc(0.95rem + 0.5vw), 1.25rem); (16px → 20px)
line-height:
clamp(1.6rem, calc(1.55rem + 0.5vw), 2rem); ( 25.6px → 32px)
Small Text:
font-size:
clamp(0.875rem, calc(0.85rem + 0.3vw), 1rem); (14px → 16px)
line-height:
clamp(1.25rem, calc(1.3rem + 0.3vw), 1.5rem); (20px → 24px)
These values use rem units (relative to your 16px root) and vw (viewport width) for fluid scaling. The clamp function ensures smooth scaling between devices while maintaining readability limits.
Apply these through Global Presets in your Text module settings for consistent site-wide typography.
Font
Montserrat
Heading clamp() functions
Primary
Secondary
Tertiary
Heading 1 using clamp(1.875rem, calc(2.33rem + 8.13vw), 3.125rem)
Line height: clamp(2.25rem, calc(2.8rem + 8vw), 3.75rem)
Heading 1
Heading 1
Heading 1
Heading 2 using clamp(1.5rem, calc(1.9rem + 6.5vw), 2.5rem)
line height: clamp(1.875rem, calc(2.3rem + 6.5vw), 3.125rem)
Heading 2
Heading 2
Heading 2
Heading 3 using clamp(1.25rem, calc(1.6rem + 5vw), 2rem)
line height: clamp(1.625rem, calc(2rem + 5vw), 2.6rem)
Heading 3
Heading 3
Heading 3
Heading 4 using clamp(1.125rem, calc(1.4rem + 4vw), 1.75rem)
Line height: clamp(1.45rem, calc(1.8rem + 4vw), 2.3rem)
Heading 4
Heading 4
Heading 4
Heading 5 using clamp(1rem, calc(1.2rem + 3vw), 1.5rem)
line height: clamp(1.35rem, calc(1.5rem + 3vw), 2.05rem)
Heading 5
Heading 5
Heading 5
Heading 6 using clamp(0.875rem, calc(1rem + 2vw), 1.25rem)
Line height: clamp(1.225rem, calc(1.3rem + 2vw), 1.75rem)
Heading 6
Heading 6
Heading 6
Regular Body Text using clamp(1rem, calc(0.95rem + 0.5vw), 1.25rem)
line height using clamp(1.6rem, calc(1.55rem + 0.5vw), 2rem)
Small Body Text: clamp(0.875rem, calc(0.85rem + 0.3vw), 1rem)
Line height: clamp(1.25rem, calc(1.3rem + 0.3vw), 1.5rem)
Small Body Text:
Traffic Management Solutions enhances city travel with smart traffic signals and AI data, simplifying commutes. The rise of electric and self-driving cars, along with better roads, fosters safer, more accessible streets for healthier, sustainable urban environments.
Regular Body Text:
Traffic Management Solutions enhances city travel with smart traffic signals and AI data, simplifying commutes. The rise of electric and self-driving cars, along with better roads, fosters safer, more accessible streets for healthier, sustainable urban environments.
Large Body Text:
Traffic Management Solutions enhances city travel with smart traffic signals and AI data, simplifying commutes. The rise of electric and self-driving cars, along with better roads, fosters safer, more accessible streets for healthier, sustainable urban environments.
List
- Small Body Text
- Small Body Text
- Small Body Text
- Regular Body Text
- Regular Body Text
- Regular Body Text
- Large Body Text
- Large Body Text
- Large Body Text
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Montserrat
03. Modules
The last part of this style guide handles some of the most-used modules inside Divi. Here, we’re also providing you with a primary, secondary and tertiary version of each module which you can style and add as a global preset. Feel free to create more alternative designs for each module.
Module
Primary
Secondary
Tertiary
Button
Blurb
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Email optin
top/bottom padding: clamp(0.5rem, 1vh, 4rem)
left/right padding: clamp(0.5rem, 1vw, 4rem)
Contact form
Image Sizes
Small
Avatars, icons, product thumbnails, small column layouts.
clamp(50px, 10vw, 150px)
Medium
Blog post featured images, product displays in a grid, general content images.
clamp(250px, 40vw, 600px)
Large
Hero section images, full-width content images, single-column displays.
clamp(350px, 80vw, 1200px)
Image
Small
Medium
Large
Call to action
CTA Title
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
CTA Title
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
CTA Title
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Divider
Person
Person Name
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Person Name
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Person Name
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Social Media Follow
Toggle
Title Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Title Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Title Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Testimonial
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Video
Accordion
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Blog
Blog Post Title
What goes into a blog post? Helpful, industry-specific content that: 1) gives readers a useful takeaway, and 2) shows you’re an industry expert. Use your company’s blog posts to opine on current industry topics, humanize your company, and show how your products and…
Blog Post Title
What goes into a blog post? Helpful, industry-specific content that: 1) gives readers a useful takeaway, and 2) shows you’re an industry expert. Use your company’s blog posts to opine on current industry topics, humanize your company, and show how your products and…
Blog Post Title
What goes into a blog post? Helpful, industry-specific content that: 1) gives readers a useful takeaway, and 2) shows you’re an industry expert. Use your company’s blog posts to opine on current industry topics, humanize your company, and show how your products and…