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.
#ee2e85
#6d6e70
#0097dc
#39c0c0
#ecbc2e
#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
Tertiary
Button
Primary
Secondary
Tertiary
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
Ik voel.
Ik voel mij dankbaar.Ik voel mij rijk.Ik voel mij liefdevol.Ik voel mij geliefd.Ik voel mij gesteund.Ik voel mij gedragen.Ik voel mij waardevol. Ik voel mijn recht om te bestaan.Ik voel mijn purpose.Ik voel mij levend.Ik voel mijn kracht.Ik voel mijn waarde.Ik voel...
Serendipiteit.
Ik zie veel berichten over 'If 2020 was a...' en dan een foto van iets wat kapot is of verrot is, iets in die trant. Aan de ene kant logisch want er is per slot van rekening een pandemie. Iets wat wij als mensen die nu leven niet eens een beetje kennen. We werden op...
Jij bent jij.
Jij bent jij. Jij bent prachtig zoals jij bent. Jij bent jij.Jij bent krachtig zoals jij bent. Jij bent jij.Jij bent mooi zoals jij bent. Jij bent jij.Jij bent uniek zoals jij bent. Jij bent jij.Jij bent liefde. Jij bent jij.En dat is oké. .... Verander nu eens ‘jij’...
Waarom hou je niet van mij!
Ben ik niet goed genoeg!Ben ik niet geschapen zoals jij dat wil!Ben ik stom!Ben ik te dik!Ben ik te dun!Te mooi!Te lelijk!Waarom hou je niet gewoon van mij! Ik ben namelijk wel leuk!Wel lief!Wel mooi!Wel slim!Wel krachtig!Wel geschapen zoals ik bedoeld was voor deze...
Donkerblauwe pakken …
Rotterdam bubbelt weer nu de scholen zijn begonnen. De stad wordt overspoeld met jongeren en hun energie.De straten vullen zich met gesprekken over hoop, dromen, nieuwsgierigheid naar elkaar en herkenning (eindelijk). De stenen zijn getuigen van nieuwe vriendschappen...
Ik ben.
Ik ben een vrouw. Ik ben mijn soort vrouw. Ik ben uniek.Ik ben ik. Ik ben een vrouw, precies zoals ik nu ben. Ik ben mijn soort vrouw. Ik ben uniek. Ik ben ik. Ik ben een vrouw en wil alleen mijzelf zijn. Ik ben mijn soort vrouw. Ik ben uniek.Ik ben ik. Ik ben een...
Pffff… Dat twijfelen, zo ontzettend vermoeiend.
Zit je op woensdagochtend, in de oude haven, rustig te babbelen met een vriend, word je in 1x gebeld door het AD Rotterdams dagblad.“Hoi met Marjolein. De KvK heeft de cijfers van het eerste kwartaal van 2018 gepresenteerd. Daaruit bleek dat de groep zzp’ers met 28%...
Masker.
Thuis. Eindelijk. Haar masker gaat af. Het masker dat ze elke ochtend op zet. Het masker dat haar beschermt tegen de hardheid van de wereld. De boosheid en de haat.Het onrecht. Het liegen. Waarom doen ze dat eigenlijk? Zien ze niet wie ik ben? Zien ze niet dat dat...
Ik ben ik
Ik ben ikTe licht voor de SurinamerTe donker voor de HollanderMaar ik ben toch gewoon ik? Al die labels die op mij te plakken zijnAlleenstaande moeder,Zzp'er,Huiseigenaar (Oh nee is gewoon van de hypotheekverstrekker),Nederlander,Vrouw,Politiek links...
Veranderen is simpel.
Veranderen is simpel.Je stopt met wat je niet leuk vindt en begint met wat je wel leuk vindt.Je stopt met dingen doen waar je niet gelukkig van wordt en begint met datgene waar je wel gelukkig van wordt.Simpel dus. Best gek als je bedenkt dat we in de derde week na...
Ik voel.
Ik voel mij dankbaar.Ik voel mij rijk.Ik voel mij liefdevol.Ik voel mij geliefd.Ik voel mij gesteund.Ik voel mij gedragen.Ik voel mij waardevol. Ik voel mijn recht om te bestaan.Ik voel mijn purpose.Ik voel mij levend.Ik voel mijn kracht.Ik voel mijn waarde.Ik voel...
Serendipiteit.
Ik zie veel berichten over 'If 2020 was a...' en dan een foto van iets wat kapot is of verrot is, iets in die trant. Aan de ene kant logisch want er is per slot van rekening een pandemie. Iets wat wij als mensen die nu leven niet eens een beetje kennen. We werden op...
Jij bent jij.
Jij bent jij. Jij bent prachtig zoals jij bent. Jij bent jij.Jij bent krachtig zoals jij bent. Jij bent jij.Jij bent mooi zoals jij bent. Jij bent jij.Jij bent uniek zoals jij bent. Jij bent jij.Jij bent liefde. Jij bent jij.En dat is oké. .... Verander nu eens ‘jij’...
Waarom hou je niet van mij!
Ben ik niet goed genoeg!Ben ik niet geschapen zoals jij dat wil!Ben ik stom!Ben ik te dik!Ben ik te dun!Te mooi!Te lelijk!Waarom hou je niet gewoon van mij! Ik ben namelijk wel leuk!Wel lief!Wel mooi!Wel slim!Wel krachtig!Wel geschapen zoals ik bedoeld was voor deze...
Donkerblauwe pakken …
Rotterdam bubbelt weer nu de scholen zijn begonnen. De stad wordt overspoeld met jongeren en hun energie.De straten vullen zich met gesprekken over hoop, dromen, nieuwsgierigheid naar elkaar en herkenning (eindelijk). De stenen zijn getuigen van nieuwe vriendschappen...
Ik ben.
Ik ben een vrouw. Ik ben mijn soort vrouw. Ik ben uniek.Ik ben ik. Ik ben een vrouw, precies zoals ik nu ben. Ik ben mijn soort vrouw. Ik ben uniek. Ik ben ik. Ik ben een vrouw en wil alleen mijzelf zijn. Ik ben mijn soort vrouw. Ik ben uniek.Ik ben ik. Ik ben een...
Pffff… Dat twijfelen, zo ontzettend vermoeiend.
Zit je op woensdagochtend, in de oude haven, rustig te babbelen met een vriend, word je in 1x gebeld door het AD Rotterdams dagblad.“Hoi met Marjolein. De KvK heeft de cijfers van het eerste kwartaal van 2018 gepresenteerd. Daaruit bleek dat de groep zzp’ers met 28%...
Masker.
Thuis. Eindelijk. Haar masker gaat af. Het masker dat ze elke ochtend op zet. Het masker dat haar beschermt tegen de hardheid van de wereld. De boosheid en de haat.Het onrecht. Het liegen. Waarom doen ze dat eigenlijk? Zien ze niet wie ik ben? Zien ze niet dat dat...
Ik ben ik
Ik ben ikTe licht voor de SurinamerTe donker voor de HollanderMaar ik ben toch gewoon ik? Al die labels die op mij te plakken zijnAlleenstaande moeder,Zzp'er,Huiseigenaar (Oh nee is gewoon van de hypotheekverstrekker),Nederlander,Vrouw,Politiek links...
Veranderen is simpel.
Veranderen is simpel.Je stopt met wat je niet leuk vindt en begint met wat je wel leuk vindt.Je stopt met dingen doen waar je niet gelukkig van wordt en begint met datgene waar je wel gelukkig van wordt.Simpel dus. Best gek als je bedenkt dat we in de derde week na...
Ik voel.
Ik voel mij dankbaar.Ik voel mij rijk.Ik voel mij liefdevol.Ik voel mij geliefd.Ik voel mij gesteund.Ik voel mij gedragen.Ik voel mij waardevol. Ik voel mijn recht om te bestaan.Ik voel mijn purpose.Ik voel mij levend.Ik voel mijn kracht.Ik voel mijn waarde.Ik voel...
Serendipiteit.
Ik zie veel berichten over 'If 2020 was a...' en dan een foto van iets wat kapot is of verrot is, iets in die trant. Aan de ene kant logisch want er is per slot van rekening een pandemie. Iets wat wij als mensen die nu leven niet eens een beetje kennen. We werden op...
Jij bent jij.
Jij bent jij. Jij bent prachtig zoals jij bent. Jij bent jij.Jij bent krachtig zoals jij bent. Jij bent jij.Jij bent mooi zoals jij bent. Jij bent jij.Jij bent uniek zoals jij bent. Jij bent jij.Jij bent liefde. Jij bent jij.En dat is oké. .... Verander nu eens ‘jij’...
Waarom hou je niet van mij!
Ben ik niet goed genoeg!Ben ik niet geschapen zoals jij dat wil!Ben ik stom!Ben ik te dik!Ben ik te dun!Te mooi!Te lelijk!Waarom hou je niet gewoon van mij! Ik ben namelijk wel leuk!Wel lief!Wel mooi!Wel slim!Wel krachtig!Wel geschapen zoals ik bedoeld was voor deze...
Donkerblauwe pakken …
Rotterdam bubbelt weer nu de scholen zijn begonnen. De stad wordt overspoeld met jongeren en hun energie.De straten vullen zich met gesprekken over hoop, dromen, nieuwsgierigheid naar elkaar en herkenning (eindelijk). De stenen zijn getuigen van nieuwe vriendschappen...
Ik ben.
Ik ben een vrouw. Ik ben mijn soort vrouw. Ik ben uniek.Ik ben ik. Ik ben een vrouw, precies zoals ik nu ben. Ik ben mijn soort vrouw. Ik ben uniek. Ik ben ik. Ik ben een vrouw en wil alleen mijzelf zijn. Ik ben mijn soort vrouw. Ik ben uniek.Ik ben ik. Ik ben een...
Pffff… Dat twijfelen, zo ontzettend vermoeiend.
Zit je op woensdagochtend, in de oude haven, rustig te babbelen met een vriend, word je in 1x gebeld door het AD Rotterdams dagblad.“Hoi met Marjolein. De KvK heeft de cijfers van het eerste kwartaal van 2018 gepresenteerd. Daaruit bleek dat de groep zzp’ers met 28%...
Masker.
Thuis. Eindelijk. Haar masker gaat af. Het masker dat ze elke ochtend op zet. Het masker dat haar beschermt tegen de hardheid van de wereld. De boosheid en de haat.Het onrecht. Het liegen. Waarom doen ze dat eigenlijk? Zien ze niet wie ik ben? Zien ze niet dat dat...
Ik ben ik
Ik ben ikTe licht voor de SurinamerTe donker voor de HollanderMaar ik ben toch gewoon ik? Al die labels die op mij te plakken zijnAlleenstaande moeder,Zzp'er,Huiseigenaar (Oh nee is gewoon van de hypotheekverstrekker),Nederlander,Vrouw,Politiek links...
Veranderen is simpel.
Veranderen is simpel.Je stopt met wat je niet leuk vindt en begint met wat je wel leuk vindt.Je stopt met dingen doen waar je niet gelukkig van wordt en begint met datgene waar je wel gelukkig van wordt.Simpel dus. Best gek als je bedenkt dat we in de derde week na...