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.
#000000
#444444
#888888
#EEEEEE
#10537F
#34a5b1
#374E7A
#4E6FAD
#6F93CC
#34A5B1
#10537F
#444444
#000000
02. Text styles
These are our text styles that will be applied throughout the website. There are primary and secondary options for use in specific situations. This will help ensure consistency on all pages of the site.
Primary
Secondary
Heading 1
Heading 1
48px – Bold
Heading 1
38px – Bold
Heading 2
Heading 2
38px – Semi-bold
Heading 2
32px – Semi-bold
Heading 3
Heading 3
32px – Regular
Heading 3
24px – Regular
Heading 4
Heading 4
24px
Heading 4
20px
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.
22px
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.
18px
List
- Lorum Ipsum
- Lorum Ipsum
- 22px
- Lorum Ipsum
- Lorum Ipsum
- 18px
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
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
AR and consumer psychology
Online businesses and retailers alike have tried to find ways to attract customers and ultimately lead them to a buying transaction. Online shopping is continuing to trend upwards, as the accessibility of smartphones and devices is greater than ever before. With that...
Wishing Everyone a Bright New Year
2021 predictions for AR
With 2021 approaching quickly, it’s time to wrap up the developments that took place this last year and predict what 2021 will bring. These past 12 months proved that emerging technologies, like augmented reality, will indeed become a booming market in the near...
AR for Entertainment
With 2020 coming close to an end, we may take some time to reflect on the year and all that came with it. Although this year threw us for a loop, it helped us realize what is important to us. One of those things being social activities and entertainment. Think about...
Will New Technology Deepen our dependency on Devices?
As emerging technologies begin to disrupt new industries and make a strong presence in society– we can’t help but wonder how we will interact with these tools. We have seen the rise of ‘tech dependency’ and how major social media platforms are taking advantage of our...
Haptics in Augmented Reality
Haptics can be defined as technology relating to the sense of touch and motion. As discussed in our previous post, augmented reality is not just about visual information but can encompass so much more. If we are going to create a virtual world in our future, we must...
Auditory AR
Think about the importance of sound in your daily life. Maybe, you’re an avid music lover or a musician yourself. But, when you really think about it– what’s an immersive experience without the auditory component? Movie ticket prices keep rising; yet, people continue...
Augmented Reality for Energy Audits
An energy audit is useful for homeowners and businesses to understand their quantity of energy consumption. By performing an energy audit, the goal is to reduce expenses and environmental damage. An energy audit is typically done by a utility specialist who is given...
AR in e-commerce
In 2019, approximately 1.92 million people purchased goods and services online. There is no doubt that the number of digital buyers continues to grow throughout the 21st century. With more tools than ever before including the internet, social media, and smart devices–...
How will Augmented Reality Affect Creators of the World?
The Augmented Reality market is rapidly growing and is projected to reach $100.24 Billion by 2024. With that said, artists, marketers, graphic designers, and creators will need to integrate AR technology to gain a competitive edge. Businesses and entrepreneurs must...
AR and consumer psychology
Online businesses and retailers alike have tried to find ways to attract customers and ultimately lead them to a buying transaction. Online shopping is continuing to trend upwards, as the accessibility of smartphones and devices is greater than ever before. With that...
Wishing Everyone a Bright New Year
2021 predictions for AR
With 2021 approaching quickly, it’s time to wrap up the developments that took place this last year and predict what 2021 will bring. These past 12 months proved that emerging technologies, like augmented reality, will indeed become a booming market in the near...
AR for Entertainment
With 2020 coming close to an end, we may take some time to reflect on the year and all that came with it. Although this year threw us for a loop, it helped us realize what is important to us. One of those things being social activities and entertainment. Think about...
Will New Technology Deepen our dependency on Devices?
As emerging technologies begin to disrupt new industries and make a strong presence in society– we can’t help but wonder how we will interact with these tools. We have seen the rise of ‘tech dependency’ and how major social media platforms are taking advantage of our...
Haptics in Augmented Reality
Haptics can be defined as technology relating to the sense of touch and motion. As discussed in our previous post, augmented reality is not just about visual information but can encompass so much more. If we are going to create a virtual world in our future, we must...
Auditory AR
Think about the importance of sound in your daily life. Maybe, you’re an avid music lover or a musician yourself. But, when you really think about it– what’s an immersive experience without the auditory component? Movie ticket prices keep rising; yet, people continue...
Augmented Reality for Energy Audits
An energy audit is useful for homeowners and businesses to understand their quantity of energy consumption. By performing an energy audit, the goal is to reduce expenses and environmental damage. An energy audit is typically done by a utility specialist who is given...
AR in e-commerce
In 2019, approximately 1.92 million people purchased goods and services online. There is no doubt that the number of digital buyers continues to grow throughout the 21st century. With more tools than ever before including the internet, social media, and smart devices–...
How will Augmented Reality Affect Creators of the World?
The Augmented Reality market is rapidly growing and is projected to reach $100.24 Billion by 2024. With that said, artists, marketers, graphic designers, and creators will need to integrate AR technology to gain a competitive edge. Businesses and entrepreneurs must...
AR and consumer psychology
Online businesses and retailers alike have tried to find ways to attract customers and ultimately lead them to a buying transaction. Online shopping is continuing to trend upwards, as the accessibility of smartphones and devices is greater than ever before. With that...
Wishing Everyone a Bright New Year
2021 predictions for AR
With 2021 approaching quickly, it’s time to wrap up the developments that took place this last year and predict what 2021 will bring. These past 12 months proved that emerging technologies, like augmented reality, will indeed become a booming market in the near...
AR for Entertainment
With 2020 coming close to an end, we may take some time to reflect on the year and all that came with it. Although this year threw us for a loop, it helped us realize what is important to us. One of those things being social activities and entertainment. Think about...
Will New Technology Deepen our dependency on Devices?
As emerging technologies begin to disrupt new industries and make a strong presence in society– we can’t help but wonder how we will interact with these tools. We have seen the rise of ‘tech dependency’ and how major social media platforms are taking advantage of our...
Haptics in Augmented Reality
Haptics can be defined as technology relating to the sense of touch and motion. As discussed in our previous post, augmented reality is not just about visual information but can encompass so much more. If we are going to create a virtual world in our future, we must...
Auditory AR
Think about the importance of sound in your daily life. Maybe, you’re an avid music lover or a musician yourself. But, when you really think about it– what’s an immersive experience without the auditory component? Movie ticket prices keep rising; yet, people continue...
Augmented Reality for Energy Audits
An energy audit is useful for homeowners and businesses to understand their quantity of energy consumption. By performing an energy audit, the goal is to reduce expenses and environmental damage. An energy audit is typically done by a utility specialist who is given...
AR in e-commerce
In 2019, approximately 1.92 million people purchased goods and services online. There is no doubt that the number of digital buyers continues to grow throughout the 21st century. With more tools than ever before including the internet, social media, and smart devices–...
How will Augmented Reality Affect Creators of the World?
The Augmented Reality market is rapidly growing and is projected to reach $100.24 Billion by 2024. With that said, artists, marketers, graphic designers, and creators will need to integrate AR technology to gain a competitive edge. Businesses and entrepreneurs must...