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
Staebler Spotlight: Brett Straus
Join us as we shine this week's Staebler 150 Spotlight on Brett Straus! Brett is a Commercial Service Broker, having joined our team in March 2020. He started just before the pandemic sent us to work from home for over two years. Having to learn the role virtually,...
March Break Ideas & Activities in Waterloo Region
Ready or not, March Break is here and for those looking for fun activities for the whole family to enjoy, we’re here to provide some fun options with something for everyone! Check out our top five picks for March Break activities in the Waterloo Region: 1) Bingemans’...
What are the New Speed Limits for Kitchener and Waterloo Streets?
The City of Waterloo is introducing new speed limits to slow down motorists and improve pedestrian safety in Waterloo Region. During a recent council meeting, Waterloo approved its new plan (CTV Kitchener) that will see speeds reduced across the city beginning this...
Staebler Spotlight: Michelle Mortensen
Congratulations to Michelle Mortensen who’s celebrating her Five-Year Work Anniversary! Michelle is a shining light at our brokerage as a Personal Solutions Broker. She is passionate about helping others, encouraging friends and co-workers to step up and do what they...
Team Staebler 150 Breaks Coldest Night of the Year Fundraising Goal
It's been over three years since the Coldest Night of the Year walk could happen in person so when the chance to put a team together, a number of Staebler employees jumped at the opportunity to walk on February 25. The Staebler 150 team, led by President Joanna...
Staebler Supports Camp Quality
On February 21, Staebler’s Charity and Community Involvement Committee presented Camp Quality with a donation of $4,000 to cover the expenses of two children to attend a camp this summer. Anzette Fernandes, Manager, Community Giving & Corporate Engagement, joined...
Staebler Insurance Supports the University of Waterloo
Staebler Insurance is excited to support the University of Waterloo Library with a $100,000 gift to help provide accessible education with OER (Open Education Resource) Fellows Grants. This five-year initiative coincides with our 150th Anniversary and pays tribute to...
Staebler Spotlight: Lisa Arseneau
Today's Staebler 150 Spotlight shines on Commercial Broker Lisa Arseneau! Join us as we celebrate our resident trucking expert, whose 36 year insurance experience is a valuable resource for clients and teammates. She's passionate, driven, and loyal member of our team....
Staebler Spotlight: Donelda Eisenhofer
Congratulations to Donelda Eisenhofer, our Executive Assistant extraordinaire, for reaching her 15 year work anniversary! Starting as a Broker Assistant in 2008, Donelda moved into the EA role, and has been the chair and contributes to many of our staff-run...
LISTEN: Staebler Insurance President talks with CBC KW about Staebler 150
In January, Staebler President Joanna Mendonca joined CBC host Craig Norris on The Morning Edition, CBC Radio Kitchener-Waterloo’s morning show. The eight-minute conversation touched on Staebler’s 150-year history in Waterloo Region, some odd insurance claims from the...
Staebler Spotlight: Brett Straus
Join us as we shine this week's Staebler 150 Spotlight on Brett Straus! Brett is a Commercial Service Broker, having joined our team in March 2020. He started just before the pandemic sent us to work from home for over two years. Having to learn the role virtually,...
March Break Ideas & Activities in Waterloo Region
Ready or not, March Break is here and for those looking for fun activities for the whole family to enjoy, we’re here to provide some fun options with something for everyone! Check out our top five picks for March Break activities in the Waterloo Region: 1) Bingemans’...
What are the New Speed Limits for Kitchener and Waterloo Streets?
The City of Waterloo is introducing new speed limits to slow down motorists and improve pedestrian safety in Waterloo Region. During a recent council meeting, Waterloo approved its new plan (CTV Kitchener) that will see speeds reduced across the city beginning this...
Staebler Spotlight: Michelle Mortensen
Congratulations to Michelle Mortensen who’s celebrating her Five-Year Work Anniversary! Michelle is a shining light at our brokerage as a Personal Solutions Broker. She is passionate about helping others, encouraging friends and co-workers to step up and do what they...
Team Staebler 150 Breaks Coldest Night of the Year Fundraising Goal
It's been over three years since the Coldest Night of the Year walk could happen in person so when the chance to put a team together, a number of Staebler employees jumped at the opportunity to walk on February 25. The Staebler 150 team, led by President Joanna...
Staebler Supports Camp Quality
On February 21, Staebler’s Charity and Community Involvement Committee presented Camp Quality with a donation of $4,000 to cover the expenses of two children to attend a camp this summer. Anzette Fernandes, Manager, Community Giving & Corporate Engagement, joined...
Staebler Insurance Supports the University of Waterloo
Staebler Insurance is excited to support the University of Waterloo Library with a $100,000 gift to help provide accessible education with OER (Open Education Resource) Fellows Grants. This five-year initiative coincides with our 150th Anniversary and pays tribute to...
Staebler Spotlight: Lisa Arseneau
Today's Staebler 150 Spotlight shines on Commercial Broker Lisa Arseneau! Join us as we celebrate our resident trucking expert, whose 36 year insurance experience is a valuable resource for clients and teammates. She's passionate, driven, and loyal member of our team....
Staebler Spotlight: Donelda Eisenhofer
Congratulations to Donelda Eisenhofer, our Executive Assistant extraordinaire, for reaching her 15 year work anniversary! Starting as a Broker Assistant in 2008, Donelda moved into the EA role, and has been the chair and contributes to many of our staff-run...
LISTEN: Staebler Insurance President talks with CBC KW about Staebler 150
In January, Staebler President Joanna Mendonca joined CBC host Craig Norris on The Morning Edition, CBC Radio Kitchener-Waterloo’s morning show. The eight-minute conversation touched on Staebler’s 150-year history in Waterloo Region, some odd insurance claims from the...
Staebler Spotlight: Brett Straus
Join us as we shine this week's Staebler 150 Spotlight on Brett Straus! Brett is a Commercial Service Broker, having joined our team in March 2020. He started just before the pandemic sent us to work from home for over two years. Having to learn the role virtually,...
March Break Ideas & Activities in Waterloo Region
Ready or not, March Break is here and for those looking for fun activities for the whole family to enjoy, we’re here to provide some fun options with something for everyone! Check out our top five picks for March Break activities in the Waterloo Region: 1) Bingemans’...
What are the New Speed Limits for Kitchener and Waterloo Streets?
The City of Waterloo is introducing new speed limits to slow down motorists and improve pedestrian safety in Waterloo Region. During a recent council meeting, Waterloo approved its new plan (CTV Kitchener) that will see speeds reduced across the city beginning this...
Staebler Spotlight: Michelle Mortensen
Congratulations to Michelle Mortensen who’s celebrating her Five-Year Work Anniversary! Michelle is a shining light at our brokerage as a Personal Solutions Broker. She is passionate about helping others, encouraging friends and co-workers to step up and do what they...
Team Staebler 150 Breaks Coldest Night of the Year Fundraising Goal
It's been over three years since the Coldest Night of the Year walk could happen in person so when the chance to put a team together, a number of Staebler employees jumped at the opportunity to walk on February 25. The Staebler 150 team, led by President Joanna...
Staebler Supports Camp Quality
On February 21, Staebler’s Charity and Community Involvement Committee presented Camp Quality with a donation of $4,000 to cover the expenses of two children to attend a camp this summer. Anzette Fernandes, Manager, Community Giving & Corporate Engagement, joined...
Staebler Insurance Supports the University of Waterloo
Staebler Insurance is excited to support the University of Waterloo Library with a $100,000 gift to help provide accessible education with OER (Open Education Resource) Fellows Grants. This five-year initiative coincides with our 150th Anniversary and pays tribute to...
Staebler Spotlight: Lisa Arseneau
Today's Staebler 150 Spotlight shines on Commercial Broker Lisa Arseneau! Join us as we celebrate our resident trucking expert, whose 36 year insurance experience is a valuable resource for clients and teammates. She's passionate, driven, and loyal member of our team....
Staebler Spotlight: Donelda Eisenhofer
Congratulations to Donelda Eisenhofer, our Executive Assistant extraordinaire, for reaching her 15 year work anniversary! Starting as a Broker Assistant in 2008, Donelda moved into the EA role, and has been the chair and contributes to many of our staff-run...
LISTEN: Staebler Insurance President talks with CBC KW about Staebler 150
In January, Staebler President Joanna Mendonca joined CBC host Craig Norris on The Morning Edition, CBC Radio Kitchener-Waterloo’s morning show. The eight-minute conversation touched on Staebler’s 150-year history in Waterloo Region, some odd insurance claims from the...