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 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 3
Heading 3
Heading 3
Heading 3
Heading 4
Heading 4
Heading 4
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
- 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.
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
- 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.
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
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
Contact form
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
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
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
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.