Craft School Layout Pack
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
rgba(0,0,0,0.2)
text caps in CP Homepage
rgba(0,0,0,0.4)
text in CP Contact us
#486066
(text general website)
#000000
#00b2b0
rgba(0,0,0,0.4)
#cbd3d8
(footer)
#cccccc
#6b6b6b
(text in footer)
#00649d
#666666
#f0eeec
02. 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.
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
Heading 3
About Us – Heading 4
Heading 3
Instagram – Heading 5
Body
Body Text: 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.
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
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
CP Homepage Heading
Heading 2
Heading 2
Heading 3
CP Homepage Heading Text smaller
Heading 4
Heading 4
Heading 3
Heading 3
Body
Body Text: 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.
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
04. Buttons
Here, you’ll find the buttons that have been used in the layout pack.
Button 1
Button 2
Button 2
Button 2
05. Blurbs
Up next, we have some blurb modules that have been frequently used in the layout pack.
Blurb 1
Pottery
Blurb 2
Classes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit
Blurb 3
Call: (246) 531-2364 Or Join Online
Blurb 4
Janie Moreno
Ceramicist
06. 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.
Image 1
Image 2
Image 3
Post Slider 1
Email optin form 1
Contact form 1
Social media follow 1
All You Need is a Phone, Tablet, or Laptop
Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt.
Day(s)
:
Hour(s)
:
Minute(s)
:
Second(s)
WordPress Resources at SiteGround
WordPress is an award-winning web software, used by millions of webmasters worldwide for building their website or blog. SiteGround is proud to host this particular WordPress installation and provide users with multiple resources to facilitate the management of their...
Check out the free
Craft School Layout Pack
