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.

Define colour palette at https://coolors.co/

Accent Colour 01

#264653

Accent Colour 02

#2a9d8f

Accent Colour 03

#e9c46a

Body text colour

#222222

Background 01

#f4a261

Background 02

#e76f51

Background 03

#F9f9f9

White

#Ffffff

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 2 Trace

Heading 2

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4 Footer

Heading 4

All In One Body Primary

Post Content Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 4

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim.
  • Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis.
  • Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis.
Post Content Heading 5
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim.
  3. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis.
  4. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi.
Post Content Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

All In One Body Trace

Post Content Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 4

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim.
  • Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis.
  • Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis.
Post Content Heading 5
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim.
  3. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis.
  4. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi.
Post Content Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

All In One Body Secondary

Post Content Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Post Content Heading 4

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim.
  • Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis.
  • Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis.
Post Content Heading 5
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim.
  3. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis.
  4. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi.
Post Content Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, aliquet vitae ipsum vulputate, pulvinar aliquam enim. Nunc sed commodo orci. In sagittis nisi et tellus pulvinar, ut convallis erat lobortis. Pellentesque nibh ligula, fringilla fermentum convallis mattis, consectetur eu mi. Vivamus vitae ex non est imperdiet iaculis. Nullam vitae condimentum velit, ac luctus turpis. Aenean pretium justo bibendum efficitur mollis.

Caption

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.

List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • 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.

Primary

Secondary

Tertiary

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

Contact form

4 + 8 =

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

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

Video

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.

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.

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.