Brand 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
#f6f9fc
#e91e63
#0288d1
#2f363a
#222222
#f57c00
#ffc400
#43a047
#9537c0
#f57c00
#ffc400
#0288d1
#e91e63
02. Text Styles #
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 / HERO
Secondary
Footer
Logo
N/A
Heading 1
Heading 1
N/A
Heading 1
Heading 2
N/A
Heading 2
Heading 2
Heading 3
N/A
Heading 3
Heading 3
Heading 4
N/A
Heading 4
Heading 4
Heading 5
Heading 5
Heading 5
Heading 5
Heading 5
Heading 5
Heading 6
Heading 6
Heading 6
Heading 6
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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
N/A
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
Design Elements
Paragraphs (usually the first) or headings can also have a “accent_primary” class, adding a left gradient border.
paragraphs/headings with the accent can also have a “accent_bg_white” class as needed.
Paragraphs (usually the first of) or headings can also have a class of “accent_secondary”.
03. Page Furniture #
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.
On Brand
Contrast
Light
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
Short explanation if needed
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
Divider
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 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
Troly does the heavy-lifting while we focus on making a great, unique product
Troly does the heavy-lifting while we focus on making a great, unique product
Primary / Large
Secondary / Medium
Mini
Blog
Guide to Selling Direct-to-Consumer Online
The concept of selling directly to customers is fast becoming a popular route, completely eliminating the middle-man. There are several significant benefits to small businesses, including better control of the brand, as well as building meaningful relationships with...
Guide to Selling Direct-to-Consumer Online
The concept of selling directly to customers is fast becoming a popular route, completely eliminating the middle-man. There are several significant benefits to small businesses, including better control of the brand, as well as building meaningful relationships with...
Guide to Selling Direct-to-Consumer Online
The concept of selling directly to customers is fast becoming a popular route, completely eliminating the middle-man. There are several significant benefits to small businesses, including better control of the brand, as well as building meaningful relationships with...
04. Sections #
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.
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
Your Title Goes Here
Short explanation if needed of the feature to be promoted, over two, and sometimes three lines, anything longer is too much?
This is the “On Brand” section
This is the “Yellow BG” section, aligned right
Make your section stand out.
Using a simple class on the section you can easily make it float left or right.
Start today or be left behing.
Start with Troly
Short explanation if needed
Short explanation if needed
Short explanation if needed
Start with Troly
Short explanation if needed
Short explanation if needed
Short explanation if needed
Make your section stand out.
Using a simple class on the section you can easily make it float left or right.
Start today or be left behing.
Start with Troly
Short explanation if needed
Short explanation if needed
Short explanation if needed
Start with Troly
Short explanation if needed
Short explanation if needed
Short explanation if needed
Make your section stand out.
Using a simple class on the section you can easily make it float left or right.
Start today or be left behing.
Start with Troly
Short explanation if needed
Short explanation if needed
Short explanation if needed
Start with Troly
Short explanation if needed
Short explanation if needed
Short explanation if needed
05. Global Library #
These are content elements, defined once and used globally throughout the site.
Structure and Content are maintained via Divi Layouts, and Look-and-Feel as per template (above), and applied in individual layout.
5 minutes to boost your sales
See for yourself how Troly improves your your brand awareness and sales.
Just 5 minutes, completely free, no credit card needed.
Producers Around The World Are Already Selling Wiht Troly. Join The Most Industry Tailored Platform On The Web.
We offer a 30 Da Money Back Guarantee, so joining is Risk-Free!
Get started today!
See for yourself how Troly maximizes your wine sales. Answer a few questions to get a full 30-day FREE trial!
Leaders stay informed
Receive our award-winning journalism for FREE. Our team publishes industry-leading sales and strategy tips for modern small producers to be and remain an undisputed leader, effortlessly.
