Adams & logan
Global Presets UI Style Guide
This global presets style guide is a great way to start a new web design project! Wondering how to turn modules into global presets? For a detailed tutorial on how to use this style guide, click on the link below to be redirected.
Color palette
In the first part of the style guide, you can find the color palette that’s been used for the layout pack. Use these colors inside the default color palette in your Divi Theme Options.
#003366
#6f9dd1
#003366
#D9EBF3
#F0EAE2
#F4EFE9
#222222
Text styles
In this part of the style guide, you’ll find the different text styles that were used throughout the layout pack. There’s a separate preset for each heading style and a global preset with all text styles in one.
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
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.
Buttons
Here, you’ll find the buttons that have been used in the layout pack.
Button 1
Button 2
Button 3
Visuals
The second part of this style guide shares some of the visuals that are included inside the layout pack. By importing the layout to your Divi Library, these visuals have automatically been added to your media library, ready for you to use.
Background Section / Red
Background Section / Blue
Background Section / Transparent
Blurb
Up next, we have some blurb modules that have been frequently used in the layout pack.
Blurb 1
Home Insurance
Your home is your most valuable asset; stay protected with home insurance that keeps you covered and fits your needs.
Blurb 2
LOREM IPSUM
Your home is your most valuable asset; stay protected with home insurance that keeps you covered and fits your needs.
Blurb 3
Lorem Ipsum
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.