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.

01. 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.

#ffffff

#fdf8d2

#7937b2

#e22a72

#80d2bb

#00aba1

#2A2E40

rgba(42,46,64,0.34)

02. Common Photo Dimensons

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.

Homepage Banner – 1920px x 960px

Image Size – 380px x 380px

Meet the Family – 380px x 380px

Page Header – 1920px x 500px

Logo size – 300px x 90px

Season Image size – 500px x 500px

Blog Image size – 800px x 500px

03. 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.

List

  • Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Proin eget tortor risus.

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Quisque velit nisi

Heading Combo 1

0.00

Initiation Fee

Heading Combo 2

As Low As

$39/mo

Heading Combo 3

Bigger.Faster.Stronger

Divi Fitness GYm

Text Block 1

Personal Training

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id

Text Block 2

Divix Studio

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id

Text Block 3

Divix Studio

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id

04. Buttons

Here, you’ll find the buttons that have been used in the layout pack.¬†

Button 2

Button 3

Button 5

05. Other modules

Last but not least, we’re sharing other module designs that were used in the layout pack. Upon importing with presets, these have all been added to your preset library. If you didn’t enable the import presets option, you’re able to turn any one of these modules into a global preset.

Divider 1

Divider 2

Image 1

Pricing Table 1

Call to Action 1

Free 3 Day Gym pass

Call to Action 2

Try a Free 3 Day Gym pass

Testimonial 1

“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. Duis aute irure dolor in reprehenderit in”
Marissa James

Toggle 1

Nulla quis lorem ut libero malesuada feugiat?

Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit.

Blog

Australia wins GOLD!

Milkshakes for Marleigh, blood donation advocacy movement wins the Women Changing the World Awards, Global Impact, Non-Profit of the Year London, 2024 Milkshakes for Marleigh has been crowned the winner of the Non-Profit of the Year category for global impact at the...

Kate Fisher named as a finalist for Global Awards
Kate Fisher named as a finalist for Global Awards

Kate Fisher of Milkshakes for Marleigh is part of a collaboration sharing advice and inspiring women to step into leadership, believe in themselves and do their part to make a difference in the world! What if we could inspire people everywhere to make a difference?...

Local woman shares her story in new book
Local woman shares her story in new book

Kate Fisher of Milkshakes for Marleigh is part of a collaboration sharing advice and inspiring women to step into leadership, believe in themselves and do their part to make a difference in the world! What if we could inspire people everywhere to make a difference?...

Contact form 1

1 + 13 =

Contact form 2

13 + 10 =

Contact form 3

5 + 15 =

Email Opt-In 1

Social media follow 1