Framework
Global Presets UI Style Guide
01. Color palette
In this part of the style guide, you can modÂiÂfy each colÂor inside the Text ModÂule’s backÂground setÂtings. Use that same colÂor code inside the Text ModÂule below it to have a writÂten verÂsion of the colÂor code too. Use these colÂor codes inside your Divi Theme Builder default colÂor palette afterward.
#FFFFFF
#F9F9F9
#f2f2f2
#e0e0e0
#444444
#000000
#F9F9F9
#e0e0e0
#444444
#000000
02. Text styles
In the secÂond part of this style guide wireÂframe, you can style your difÂferÂent text types. You’re also proÂvidÂed with a priÂmaÂry, secÂondary and terÂtiary option, each of which you can afterÂwards turn into indiÂvidÂual presets.
Light cenÂtered
Light left
Dark cenÂtered
Dark left
Heading 1
Heading 1
Heading 1
Heading 1
Heading 2
Heading 2
Heading 2
Heading 3
Heading 3
Body
Lorem ipsum dolor sit amet, conÂsecteÂtur adipÂiscÂing elit, sed do eiusÂmod temÂpor inciÂdidunt ut labore et dolore magna aliÂqua. Ut enim ad minÂim veniÂam, quis nosÂtrud exerciÂtaÂtion ullamÂco laboris nisi ut aliquip ex ea comÂmoÂdo 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 hanÂdles some of the most-used modÂules inside Divi. Here, we’re also proÂvidÂing you with a priÂmaÂry, secÂondary and terÂtiary verÂsion of each modÂule which you can style and add as a globÂal preÂset. Feel free to creÂate more alterÂnaÂtive designs for each module.
PriÂmaÂry
SecÂondary
TerÂtiary
ButÂton
Blurb
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Email optin
ConÂtact form
Image
Call to action
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Divider
PerÂson
Name Goes Here
PosiÂtion
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Name Goes Here
PosiÂtion
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Name Goes Here
PosiÂtion
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Social Media Follow
TogÂgle
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
TesÂtiÂmoÂniÂal
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Video
AccorÂdion
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Your Title Goes Here
Your conÂtent goes here. Edit or remove this text inline or in the modÂule ConÂtent setÂtings. You can also style every aspect of this conÂtent in the modÂule Design setÂtings and even apply cusÂtom CSS to this text in the modÂule Advanced settings.
Blog
Learn Latin: How to Improve Your Latin in 10 Minutes a Day
MasÂter A Latin Text, 10 MinÂutes At A Time The last couÂple of years peoÂple have freÂquentÂly asked me how I learned to speak Latin and what they could do to improve their own Latin even if they had extremeÂly litÂtle free time. I believe everyÂone can teach themÂselves to…
Learn Latin: How to Improve Your Latin in 10 Minutes a Day
MasÂter A Latin Text, 10 MinÂutes At A Time The last couÂple of years peoÂple have freÂquentÂly asked me how I learned to speak Latin and what they could do to improve their own Latin even if they had extremeÂly litÂtle free time. I believe everyÂone can teach themÂselves to…
Learn Latin: How to Improve Your Latin in 10 Minutes a Day
MasÂter A Latin Text, 10 MinÂutes At A Time The last couÂple of years peoÂple have freÂquentÂly asked me how I learned to speak Latin and what they could do to improve their own Latin even if they had extremeÂly litÂtle free time. I believe everyÂone can teach themÂselves to…