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.
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
All in one
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
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.
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.
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
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.
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.
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
Keep Your Pets Safe This Winter
With the winter months upon us, it’s important we take extra care to protect the most vulnerable members of our families – our pets. While your puppy or kitten may have a natural fur coat to help shield them from the blowing snow, the winter can still be very hard,...
Play as an Insurance Investigator from the 1800s
The Return of Obra Dinn is an interesting game. The first thing that will strike you about it is the graphics. How it places you on a photo realistic classic merchant ship, but one rendered in a grainy monochrome palette reminiscent of a classic Macintosh computer....
Celebrate your New Year’s Eve Safely
New Year’s Eve can be a lot of fun. A great time to get together with friends or family, blow off steam from a busy holiday season, and set an optimistic tone for the year to come. That is as long as you do it safely! Every year thousands of Canadians start their year...
Happy Retirement to Kim & Steve!
From one generation to the next, Staebler Insurance is prepared to transition to the next set of Philpotts. On December 31, Kim and Stephen Philpott will officially retire from our brokerage. Stephen was at the helm as President of Staebler Insurance from 1995 through...
The Fortnite mobile craze is a Hacker’s Delight
Do you enjoy video games or have someone in your household who does? If so, it’s more than likely you’ve heard of Fortnite. It’s unavoidable in the gaming scene. Fortnite is currently one of the most popular games in the world, a genuine media sensation, and it’s free...
Top 10 Stolen Vehicles in 2018
The Insurance Bureau of Canada (IBC) released the list of Canada's most stolen vehicles, and once again, Ford F-Series trucks dominate the list. Six of the top ten stolen vehicles across the country are Ford F-350 models from various model years and three are F-250...
Don’t be hit with this 2 Factor Scam this Holiday Season
By now, most of us are familiar with 2-factor authentication. It’s a simple, but important, security precaution for your most sensitive online accounts such as your email and personal banking information. It’s a safety net that provides you with an additional layer of...
Lighting up your Home Safely this Holiday Season
Whether you just plan on hanging a string of classic white lights over the eaves or have full-on Griswold style ambitions on your mind of transforming your home into a winter wonderland, lighting up the home for the holidays is a lot of fun. Unfortunately, it can also...
Do you Know how to Drive Through a Roundabout?
Waterloo Region road planners have fallen in love with roundabouts! In recent years, roundabouts have gone from being a curiosity you might encounter in some quaint, sleepy neighbourhood 20 minutes out of the way to a regular feature of many main thoroughfares and...
Why is my “Check Engine” Light on?
Car maintenance is always important, but it takes on an especially crucial role during a Canadian winter. You don’t want to be stranded on the side of the road when the mercury dips into freezing temperatures, when the sleet and snow start making an already precarious...
Keep Your Pets Safe This Winter
With the winter months upon us, it’s important we take extra care to protect the most vulnerable members of our families – our pets. While your puppy or kitten may have a natural fur coat to help shield them from the blowing snow, the winter can still be very hard,...
Play as an Insurance Investigator from the 1800s
The Return of Obra Dinn is an interesting game. The first thing that will strike you about it is the graphics. How it places you on a photo realistic classic merchant ship, but one rendered in a grainy monochrome palette reminiscent of a classic Macintosh computer....
Celebrate your New Year’s Eve Safely
New Year’s Eve can be a lot of fun. A great time to get together with friends or family, blow off steam from a busy holiday season, and set an optimistic tone for the year to come. That is as long as you do it safely! Every year thousands of Canadians start their year...
Happy Retirement to Kim & Steve!
From one generation to the next, Staebler Insurance is prepared to transition to the next set of Philpotts. On December 31, Kim and Stephen Philpott will officially retire from our brokerage. Stephen was at the helm as President of Staebler Insurance from 1995 through...
The Fortnite mobile craze is a Hacker’s Delight
Do you enjoy video games or have someone in your household who does? If so, it’s more than likely you’ve heard of Fortnite. It’s unavoidable in the gaming scene. Fortnite is currently one of the most popular games in the world, a genuine media sensation, and it’s free...
Top 10 Stolen Vehicles in 2018
The Insurance Bureau of Canada (IBC) released the list of Canada's most stolen vehicles, and once again, Ford F-Series trucks dominate the list. Six of the top ten stolen vehicles across the country are Ford F-350 models from various model years and three are F-250...
Don’t be hit with this 2 Factor Scam this Holiday Season
By now, most of us are familiar with 2-factor authentication. It’s a simple, but important, security precaution for your most sensitive online accounts such as your email and personal banking information. It’s a safety net that provides you with an additional layer of...
Lighting up your Home Safely this Holiday Season
Whether you just plan on hanging a string of classic white lights over the eaves or have full-on Griswold style ambitions on your mind of transforming your home into a winter wonderland, lighting up the home for the holidays is a lot of fun. Unfortunately, it can also...
Do you Know how to Drive Through a Roundabout?
Waterloo Region road planners have fallen in love with roundabouts! In recent years, roundabouts have gone from being a curiosity you might encounter in some quaint, sleepy neighbourhood 20 minutes out of the way to a regular feature of many main thoroughfares and...
Why is my “Check Engine” Light on?
Car maintenance is always important, but it takes on an especially crucial role during a Canadian winter. You don’t want to be stranded on the side of the road when the mercury dips into freezing temperatures, when the sleet and snow start making an already precarious...
Keep Your Pets Safe This Winter
With the winter months upon us, it’s important we take extra care to protect the most vulnerable members of our families – our pets. While your puppy or kitten may have a natural fur coat to help shield them from the blowing snow, the winter can still be very hard,...
Play as an Insurance Investigator from the 1800s
The Return of Obra Dinn is an interesting game. The first thing that will strike you about it is the graphics. How it places you on a photo realistic classic merchant ship, but one rendered in a grainy monochrome palette reminiscent of a classic Macintosh computer....
Celebrate your New Year’s Eve Safely
New Year’s Eve can be a lot of fun. A great time to get together with friends or family, blow off steam from a busy holiday season, and set an optimistic tone for the year to come. That is as long as you do it safely! Every year thousands of Canadians start their year...
Happy Retirement to Kim & Steve!
From one generation to the next, Staebler Insurance is prepared to transition to the next set of Philpotts. On December 31, Kim and Stephen Philpott will officially retire from our brokerage. Stephen was at the helm as President of Staebler Insurance from 1995 through...
The Fortnite mobile craze is a Hacker’s Delight
Do you enjoy video games or have someone in your household who does? If so, it’s more than likely you’ve heard of Fortnite. It’s unavoidable in the gaming scene. Fortnite is currently one of the most popular games in the world, a genuine media sensation, and it’s free...
Top 10 Stolen Vehicles in 2018
The Insurance Bureau of Canada (IBC) released the list of Canada's most stolen vehicles, and once again, Ford F-Series trucks dominate the list. Six of the top ten stolen vehicles across the country are Ford F-350 models from various model years and three are F-250...
Don’t be hit with this 2 Factor Scam this Holiday Season
By now, most of us are familiar with 2-factor authentication. It’s a simple, but important, security precaution for your most sensitive online accounts such as your email and personal banking information. It’s a safety net that provides you with an additional layer of...
Lighting up your Home Safely this Holiday Season
Whether you just plan on hanging a string of classic white lights over the eaves or have full-on Griswold style ambitions on your mind of transforming your home into a winter wonderland, lighting up the home for the holidays is a lot of fun. Unfortunately, it can also...
Do you Know how to Drive Through a Roundabout?
Waterloo Region road planners have fallen in love with roundabouts! In recent years, roundabouts have gone from being a curiosity you might encounter in some quaint, sleepy neighbourhood 20 minutes out of the way to a regular feature of many main thoroughfares and...
Why is my “Check Engine” Light on?
Car maintenance is always important, but it takes on an especially crucial role during a Canadian winter. You don’t want to be stranded on the side of the road when the mercury dips into freezing temperatures, when the sleet and snow start making an already precarious...