Framework
Design system 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.
Primary color
#F46C62
Hn + Body Text Blanc
#FAFAFA
Noir
#000000
Secondary color
#FFDA7B
Rose pâle
#F9D0DC
Blanc
#FAFAFA
Heading Text Color
#000000
Bleu clair
#38A0FF
Gris foncé
#464646
Body Text Color
#464646
Rouge foncé
#FF4439
Noir
#A2A2A2
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
(3.5 2.5 2rem)
(3.5 2.5 2rem)
(3.5 2.5 2rem)
Heading 2
(2.5 2 1.75rem)
(2.5 2 1.75rem)
(2.5 2 1.75rem)
Heading 3
(1.75 1.5 1.4rem)
(1.75 1.5 1.4rem)
(1.75 1.5 1.4rem)
Heading 4
(1.25 1.2 1.1rem)
(1.25 1.2 1.1rem)
(1.25 1.2 1.1rem)
Body
<H1> (3.5 2.5 2rem)
<H2> (2.5 2 1.75rem)
<H3> (1.75 1.5 1.4rem)
<H4> (1.25 1.2 1.1rem)
Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, nibh ultrices integer urna porta nulla vivamus turpis, enim venenatis nisl vulputate facilisi natoque vestibulum. (1rem)
<H1> (3.5 2.5 2rem)
<H2> (2.5 2 1.75rem)
<H3> (1.75 1.5 1.4rem)
<H4> (1.25 1.2 1.1rem)
Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, nibh ultrices integer urna porta nulla vivamus turpis, enim venenatis nisl vulputate facilisi natoque vestibulum. (1rem)
<H1> (3.5 2.5 2rem)
<H2> (2.5 2 1.75rem)
<H3> (1.75 1.5 1.4rem)
<H4> (1.25 1.2 1.1rem)
Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, nibh ultrices integer urna porta nulla vivamus turpis, enim venenatis nisl vulputate facilisi natoque vestibulum. (1rem)
Focus
<FOCUS> (2.5 2 1.75rem) Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet.
<FOCUS> (2.5 2 1.75rem) Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet.
<FOCUS> (2.5 2 1.75rem) Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet.
All in one
Heading 1 (3rem)
Heading 2 (2rem)
Heading 3 (1.7rem)
Heading 4 (1.5rem)
Heading 5 (1.25rem)
Heading 6 (1.1rem)
Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, nibh ultrices integer urna porta nulla vivamus turpis, enim venenatis nisl vulputate facilisi natoque vestibulum. (1rem)
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum (1rem)
Citation ici (1rem)
Heading 1 (3rem)
Heading 2 (2rem)
Heading 3 (1.7rem)
Heading 4 (1.5rem)
Heading 5 (1.25rem)
Heading 6 (1.1rem)
Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, nibh ultrices integer urna porta nulla vivamus turpis, enim venenatis nisl vulputate facilisi natoque vestibulum. (1rem)
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum (1rem)
Citation ici (1rem)
Heading 1 (3rem)
Heading 2 (2rem)
Heading 3 (1.7rem)
Heading 4 (1.5rem)
Heading 5 (1.25rem)
Heading 6 (1.1rem)
Lorem ipsum dolor sit amet consectetur adipiscing elit imperdiet, nibh ultrices integer urna porta nulla vivamus turpis, enim venenatis nisl vulputate facilisi natoque vestibulum. (1rem)
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum (1rem)
Citation ici (1rem)
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.
Button
Button simple
Blurb
Heading 2 (2rem)
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
Email optin
Contact form
Image
Call to action
Heading 3 (1.7em)
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.
Heading 3 (1.7em)
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.
Heading 3 (1.7em)
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.
Toggle
Heading 3 (1.7em)
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
Accordion
Heading 3 (1.7rem)
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.
Heading 3 (1.7rem)
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
Blog
Comment tester un événément ?
Organiser un événement, qu’il s’agisse d’une conférence, d’un salon, d’un lancement de produit ou d’un séminaire, peut s’avérer complexe. Cela nécessite une gestion minutieuse, une anticipation des imprévus et une parfaite coordination entre les différents...
Comment tester un événément ?
Organiser un événement, qu’il s’agisse d’une conférence, d’un salon, d’un lancement de produit ou d’un séminaire, peut s’avérer complexe. Cela nécessite une gestion minutieuse, une anticipation des imprévus et une parfaite coordination entre les différents...
Comment tester un événément ?
Organiser un événement, qu’il s’agisse d’une conférence, d’un salon, d’un lancement de produit ou d’un séminaire, peut s’avérer complexe. Cela nécessite une gestion minutieuse, une anticipation des imprévus et une parfaite coordination entre les différents...
Comment tester un événément ?
Organiser un événement, qu’il s’agisse d’une conférence, d’un salon, d’un lancement de produit ou d’un séminaire, peut s’avérer complexe. Cela nécessite une gestion minutieuse, une anticipation des imprévus et une parfaite coordination entre les différents...
Pourquoi faire appel à un consultant événementiel ?
Organiser un événement, qu’il s’agisse d’une conférence, d’un salon, d’un lancement de produit ou d’un séminaire, peut s’avérer complexe. Cela nécessite une gestion minutieuse, une anticipation des imprévus et une parfaite coordination entre les différents...