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.
#000000
#666666
#FFFFFF
RGBA (0,0,0,.4)
RGBA (0,0,0,.05)
RGBA (0,0,0,.01)
#FF9D00
#FBC61E
#81BC00
#5E8A00
#3B5700
#FBC61E to #FF9D00
Type: Radial
Direction: Center
Start Position: 25%
End Position: 75%
#81BC00 to #5E8A00
Type: Radial
Direction: Center
Start Position: 25%
End Position: 75%
#FF9D00 to #FBC61E
Type: Linear
Direction: 90°
Start Position: 0%
End Position: 75%
#3B5700 to #81BC00
Type: Linear
Direction: 90°
Start Position: 0%
End Position: 75%
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.
All in One
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Lorum Ipsum
- Lorum Ipsum
Lorum ipsum dolor sit amet.
- Lorum Ipsum
- Lorum Ipsum
Blockquote
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Lorum Ipsum
- Lorum Ipsum
Lorum ipsum dolor sit amet.
- Lorum Ipsum
- Lorum Ipsum
Blockquote
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet.
- Lorum Ipsum
- Lorum Ipsum
Lorum ipsum dolor sit amet.
- Lorum Ipsum
- Lorum Ipsum
Blockquote
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
Blurb
My title text is Heading 4 in the default color #3B5700
My image has a 50px rounded corners and I utilize default text font settings. I also have a 2vh/2vw padding around my entire container.
Email optin
Contact form
My title text is Heading 5 in #FFFFFF
Image
Call to action
My title text is Heading 4 in #5E8A00
My text is changed to white by selecting Text Color > Light under the “Text” design option. My button has all the same settings as the “Centered Green Button” button preset and the background for this call to action module is #FF9D00. I also have a 5% padding around my entire container.
Divider
Person
Name Appears in H4
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.
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.
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.
