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
#545454
#000000
#194080
#B30019
#909090
#35302D
#464646
#363636
#194080
#B30019
#909090
#35302D
#464646
#363636
#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 – Heading für Abschnitte
Secondary – Heading für Header
Tertiary – Heading SONSTIGE
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
Divider_01 blue
Divider_02 red
Divider_03 blue short
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
BusinessMedia_01 color
BusinessMedia_02 grey outline
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
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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
Inwieweit hat sich Corona auf die Digitalisierung der Versicherungsbranche ausgewirkt?
Martin Korn, Senior Consultant im Interview mit Dr. Robin Kiera über die Veränderungen in der Versicherungsbranche durch Corona.
Was bleibt nach Corona? 5 Themen und Thesen
Was bleibt nach Corona? 5 Themen und Thesen
Krisen sind bekanntlich Transformations-Beschleuniger. Was sich nachhaltig verändern wird nach Corona in der Arbeitswelt und warum das für viele sogar eine gute Nachricht ist. Hier kommt eine Zwischenbilanz.
Greifen Work und Life künftig stärker ineinander?
Wenn irgendwann wieder Normalität in unser Leben einkehrt, wird an dieser flexibleren Gestaltung möglicherweise festgehalten. Vielleicht bietet die Krise die Chance, unsere noch immer recht starren Alltagsstrukturen loszulassen und neu zu planen.
Wie könnte eine geeignete Strategie in der Branche IT-Services & Technology Solutions aussehen?
Corona bewirkt neben der Verschiebung der Märkte auch, dass die Mitarbeiterskills anders wahrgenommen werden. Viele Führungskräfte lernen neue Fähigkeiten und Charakterzüge ihrer Mitarbeiter kennen und müssen den gesamten Personalbedarf entsprechend neu bewerten.
Exit-Strategie nach dem Lockdown
Der Einschnitt durch Corona kam für viele Unternehmen sehr abrupt. Die nächste Phase, das Management der Krise, sollte bei allen Unwägbarkeiten nach vorne gerichtet sein.
Zukunft nach der Krise nicht verpassen
Die Zukunft nach der Corona-Krise nicht verpassen!
Alle im Homeoffice angekommen?
Führungskräfte sollten den Blick nicht nur auf wirtschaftliche Ziele richten.
Inwieweit hat sich Corona auf die Digitalisierung der Versicherungsbranche ausgewirkt?
Martin Korn, Senior Consultant im Interview mit Dr. Robin Kiera über die Veränderungen in der Versicherungsbranche durch Corona.
Was bleibt nach Corona? 5 Themen und Thesen
Was bleibt nach Corona? 5 Themen und Thesen
Krisen sind bekanntlich Transformations-Beschleuniger. Was sich nachhaltig verändern wird nach Corona in der Arbeitswelt und warum das für viele sogar eine gute Nachricht ist. Hier kommt eine Zwischenbilanz.
Greifen Work und Life künftig stärker ineinander?
Wenn irgendwann wieder Normalität in unser Leben einkehrt, wird an dieser flexibleren Gestaltung möglicherweise festgehalten. Vielleicht bietet die Krise die Chance, unsere noch immer recht starren Alltagsstrukturen loszulassen und neu zu planen.
Wie könnte eine geeignete Strategie in der Branche IT-Services & Technology Solutions aussehen?
Corona bewirkt neben der Verschiebung der Märkte auch, dass die Mitarbeiterskills anders wahrgenommen werden. Viele Führungskräfte lernen neue Fähigkeiten und Charakterzüge ihrer Mitarbeiter kennen und müssen den gesamten Personalbedarf entsprechend neu bewerten.
Exit-Strategie nach dem Lockdown
Der Einschnitt durch Corona kam für viele Unternehmen sehr abrupt. Die nächste Phase, das Management der Krise, sollte bei allen Unwägbarkeiten nach vorne gerichtet sein.
Zukunft nach der Krise nicht verpassen
Die Zukunft nach der Corona-Krise nicht verpassen!
Alle im Homeoffice angekommen?
Führungskräfte sollten den Blick nicht nur auf wirtschaftliche Ziele richten.
Inwieweit hat sich Corona auf die Digitalisierung der Versicherungsbranche ausgewirkt?
Martin Korn, Senior Consultant im Interview mit Dr. Robin Kiera über die Veränderungen in der Versicherungsbranche durch Corona.
Was bleibt nach Corona? 5 Themen und Thesen
Was bleibt nach Corona? 5 Themen und Thesen
Krisen sind bekanntlich Transformations-Beschleuniger. Was sich nachhaltig verändern wird nach Corona in der Arbeitswelt und warum das für viele sogar eine gute Nachricht ist. Hier kommt eine Zwischenbilanz.
Greifen Work und Life künftig stärker ineinander?
Wenn irgendwann wieder Normalität in unser Leben einkehrt, wird an dieser flexibleren Gestaltung möglicherweise festgehalten. Vielleicht bietet die Krise die Chance, unsere noch immer recht starren Alltagsstrukturen loszulassen und neu zu planen.
Wie könnte eine geeignete Strategie in der Branche IT-Services & Technology Solutions aussehen?
Corona bewirkt neben der Verschiebung der Märkte auch, dass die Mitarbeiterskills anders wahrgenommen werden. Viele Führungskräfte lernen neue Fähigkeiten und Charakterzüge ihrer Mitarbeiter kennen und müssen den gesamten Personalbedarf entsprechend neu bewerten.
Exit-Strategie nach dem Lockdown
Der Einschnitt durch Corona kam für viele Unternehmen sehr abrupt. Die nächste Phase, das Management der Krise, sollte bei allen Unwägbarkeiten nach vorne gerichtet sein.
Zukunft nach der Krise nicht verpassen
Die Zukunft nach der Corona-Krise nicht verpassen!
Alle im Homeoffice angekommen?
Führungskräfte sollten den Blick nicht nur auf wirtschaftliche Ziele richten.