Member Login
Join SSR

All in one

This is an H1 Call to action, gotta check the…

This is an H2 Headline, I want it to say something longish

Imagine this is a full sentence of some sort with enough text to go more than one line

This is dreadfully small…

Header 5: Okay, now we’ve done it. Let’s change this up shall we?

Nam lobortis arcu quis massa pellentesque, eu pellentesque orci vestibulum. Ut mattis nisi eleifend mauris tempor, sit amet aliquam ante placerat. Sed eget consequat sem, ac malesuada diam. Curabitur vulputate dui eu turpis aliquam euismod. Nunc a rutrum turpis. Phasellus gravida imperdiet eleifend. Nunc eget ex ut nulla rutrum venenatis sed sed est. Maecenas ut facilisis lacus, at facilisis felis.

Quisque imperdiet sem nunc, non condimentum elit tempor id. Mauris vulputate a mi eu sodales. Nam eget ipsum sit amet metus tempor efficitur. Aliquam euismod ac lacus et imperdiet. Etiam tristique eu nunc sit amet mollis.

  • This is an undordered list, let’s make the text go more than one line.
  • Lorum Ipsum
  • More Lorum Ipsum, better also check to make sure what this looks like as it gets longer

And now more copy, just another paragraph to get spacing around the unordered list correct.

  1. This is an ordordered list, let’s make the text go more than one line.
  2. Lorum Ipsum
  3. More Lorum Ipsum, better also check to make sure what this looks like as it gets longer

And now more copy, just another paragraph to get spacing around the unordered list correct.

Oh, and better add a text link… Click Here!

This is an H1 Call to action, gotta check the…

This is an H2 Headline, I want it to say something longish

Imagine this is a full sentence of some sort with enough text to go more than one line

This is dreadfully small…

Header 5: Okay, now we’ve done it. Let’s change this up shall we?

Nam lobortis arcu quis massa pellentesque, eu pellentesque orci vestibulum. Ut mattis nisi eleifend mauris tempor, sit amet aliquam ante placerat. Sed eget consequat sem, ac malesuada diam. Curabitur vulputate dui eu turpis aliquam euismod. Nunc a rutrum turpis. Phasellus gravida imperdiet eleifend. Nunc eget ex ut nulla rutrum venenatis sed sed est. Maecenas ut facilisis lacus, at facilisis felis.

Quisque imperdiet sem nunc, non condimentum elit tempor id. Mauris vulputate a mi eu sodales. Nam eget ipsum sit amet metus tempor efficitur. Aliquam euismod ac lacus et imperdiet. Etiam tristique eu nunc sit amet mollis.

  • This is an undordered list, let’s make the text go more than one line.
  • Lorum Ipsum
  • More Lorum Ipsum, better also check to make sure what this looks like as it gets longer

And now more copy, just another paragraph to get spacing around the unordered list correct.

  1. This is an ordordered list, let’s make the text go more than one line.
  2. Lorum Ipsum
  3. More Lorum Ipsum, better also check to make sure what this looks like as it gets longer

And now more copy, just another paragraph to get spacing around the unordered list correct.

Oh, and better add a text link… Click Here!

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

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

#F9F9F9

#f2f2f2

#e0e0e0

#444444

#000000

#F9F9F9

#e0e0e0

#444444

#000000

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.

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.

Nam lobortis arcu quis massa pellentesque, eu pellentesque orci vestibulum. Ut mattis nisi eleifend mauris tempor, sit amet aliquam ante placerat. Sed eget consequat sem, ac malesuada diam. Curabitur vulputate dui eu turpis aliquam euismod. Nunc a rutrum turpis. Phasellus gravida imperdiet eleifend. Nunc eget ex ut nulla rutrum venenatis sed sed est. Maecenas ut facilisis lacus, at facilisis felis.

Quisque imperdiet sem nunc, non condimentum elit tempor id. Mauris vulputate a mi eu sodales. Nam eget ipsum sit amet metus tempor efficitur. Aliquam euismod ac lacus et imperdiet. Etiam tristique eu nunc sit amet mollis.

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

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

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

Heading 1: Text I am making this long so that it will appear on multiple lines, this could take awhile

Heading 2: Then I will make another line that goes for quite a bit, because this is a much smaller font by comparison.

Header 3: What’s a brother got to do to get this to go for as long as needed for this to also hit a second line. Not that a header should really be that long but you never know…

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.

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.

Primary

Secondary

Tertiary

Button

Learn more
Learn more
Learn more

Button

Learn more
Learn more
Learn more

Blurb

Context is Key: Extra Long Header 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

Contact form

12 + 5 =

3 + 11 =

7 + 1 =

Image

Call to action

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.

Click Here

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.

Click Here

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.

Click Here

Divider

Person

Name Goes Here

Name Goes Here

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.

Name Goes Here

Name Goes Here

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.

Name Goes Here

Name Goes Here

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

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.

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.

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

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

Name Goes Here

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

Vanderbilt Health – Vice Chair, Education

by | Jul 10, 2026 |

Vice Chair, Education (Associate or Professor rank)Department of Radiology & Radiological SciencesVanderbilt Health The Department of Radiology and Radiological Sciences at Vanderbilt Health is recruiting for a Vice Chair of Education to join our leadership team...

Duke Radiology – Radiologist

by | Jul 7, 2026 |

Duke Health Radiologist Duke Radiology invites applications to join our Musculoskeletal Imaging team, one of the largest divisions within our nationally recognized Radiology Department. The ideal candidate will have a strong commitment to providing exceptional...

Remote MSK Teleradiology – Radia

by | Jun 19, 2026 |

1099 Remote MSK Teleradiology Evening Up to $57.50/wRVU | 1PM–10PM PST | Managed by Radia PS Radia Michigan Radiology Medical Group PLLC $825,000 - $1,000,000 annually Join us in working with a 100% radiologist-owned and managed practice, with NO venture capital or...

Vanderbilt Health – Vice Chair, Education

by | Jul 10, 2026 |

Vice Chair, Education (Associate or Professor rank)Department of Radiology & Radiological SciencesVanderbilt Health The Department of Radiology and Radiological Sciences at Vanderbilt Health is recruiting for a Vice Chair of Education to join our leadership team...

Duke Radiology – Radiologist

by | Jul 7, 2026 |

Duke Health Radiologist Duke Radiology invites applications to join our Musculoskeletal Imaging team, one of the largest divisions within our nationally recognized Radiology Department. The ideal candidate will have a strong commitment to providing exceptional...

Remote MSK Teleradiology – Radia

by | Jun 19, 2026 |

1099 Remote MSK Teleradiology Evening Up to $57.50/wRVU | 1PM–10PM PST | Managed by Radia PS Radia Michigan Radiology Medical Group PLLC $825,000 - $1,000,000 annually Join us in working with a 100% radiologist-owned and managed practice, with NO venture capital or...

Vanderbilt Health – Vice Chair, Education

by | Jul 10, 2026 |

Vice Chair, Education (Associate or Professor rank)Department of Radiology & Radiological SciencesVanderbilt Health The Department of Radiology and Radiological Sciences at Vanderbilt Health is recruiting for a Vice Chair of Education to join our leadership team...

Duke Radiology – Radiologist

by | Jul 7, 2026 |

Duke Health Radiologist Duke Radiology invites applications to join our Musculoskeletal Imaging team, one of the largest divisions within our nationally recognized Radiology Department. The ideal candidate will have a strong commitment to providing exceptional...

Remote MSK Teleradiology – Radia

by | Jun 19, 2026 |

1099 Remote MSK Teleradiology Evening Up to $57.50/wRVU | 1PM–10PM PST | Managed by Radia PS Radia Michigan Radiology Medical Group PLLC $825,000 - $1,000,000 annually Join us in working with a 100% radiologist-owned and managed practice, with NO venture capital or...