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.

Color 0

#000000

Color 1

#e57049

Color 2

#508083

Color 3

#51294C

Color 4

#7d8e6e

Color 5

#4e6e81

Color 6

#998E7C

SEO hi on light background

Color 20

#ffffff

#300f2c

#213440

#f6f5f0

Home page module background

Subpages in mobile menu background

#B2AB9F

Fleur-de-lis divider

#C7BDAD

SEO h1 on dark background

#7DA4A7

Menu text hover

#E3E0D6

Contact Us text box background – footer 

#4E5A5F

Contact Us graphic background – footer

#DEB825

Brand yellow – logo

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

Heading 1

SEO Tagline_Left_6_h1

SEO Tagline_Right_6_h1

_h1

_h1

Heading 2

Headline_3_h2

Header Title_20_h2

_h2

Heading 3

Subhead_2_h3

Subhead_5_h3

Subhead_3_h3

Subhead_0_h3

Subhead_4_h3

Small Blurb_2 col_Title_3_h3

Heading 4

_h4

_h4

_h4

Body

Body Regular_0_p

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.

Body Large_0_p

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

Unordered List_0_p

  • Lorum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
  • Lorum Ipsum Ipsum Ipsum Ipsum Ipsum
  • Lorum Ipsum Ipsum Ipsum Ipsum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

All in one

_h1

_h2

_h3

_h4

Body_p Lorum ipsum dolor sit amet.

  • Unordered List_p Lorum Ipsum

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.

Button_1

Button_1_Dual

Button_2

Button_2_Dual

Button_3

Button_3_Dual

Button_4

Button_4_Dual

Button_5

Button_5_Dual

Button_

Button_X_Dual

Gateway Module Row

Gateway Module

Gateway Front_3

Gateway Back_3

Gateway Module Row

Gateway Module

Gateway Front_4

Gateway Back_4

Gateway Module Row

Gateway Module

Gateway Front_5

Gateway Back_5

t

Gateway Title Front

Gateway Title Back

Body text goes here

t

Gateway Title Front

Gateway Title back

Body text goes here

t

Gateway Title Front

Gateway Title Back

Body text goes here

CTA 2 col_Row

CTA 2 col_Text Side

CTA 2 col_Image Side

Subhead_2_h3

Body Regular_0_p 

CTA 2 col_Row

CTA 2 col_Text Side

CTA 2 col_Image Side

Subhead_3_h3

Body Regular_0_p 

CTA 2 col_Row

CTA 2 col_Text Side

CTA 2 col_Image Side

Subhead_4_h3

Body Regular_0_p 

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.

Email optin

Contact form

2 + 3 =

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.

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.

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.

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

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.

Blog

New Blog Post

Far far away Behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. The Big Oxmox advised her not to do so, because there...

Hero Image with Sub Menu Below

Hero Image Header_w/Submenu_Section

Header Title Box_Row

Header Title_20_h2

SEO Tagline_20_h1

Large Blurb

Main Body_1 col_Section

Large Blurb_2 col_w/Picture_Row

Headline_3_h2

Body Regular_0_p

Speciality Section Modules

Small Blurb

Main Body_2 col_Section

Small Blurb_2 col_w/Picture_Row

Small Blurb_2 col_Image

Small Blurb_2 col_Title_3_h3

Body Regular_0_p

Meet Lynn Stroud

“People here have led interesting lives and they’re willing to share their experiences,” resident Lynn Stroud says. “When you have dinner with someone, you always learn something new, which is great.”

She and her husband, Bob, have interesting stories of their own to share. You should get to know them.