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

135 deg

#f57c00

#ffc400

135 deg

#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

Some text in paragraphs and headers can be highlighted using the “highlight” class like so.

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.

Special colouring can also added to various text in paragraphs and headers by using the “grade” class.

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

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.

N

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

2 + 7 =

5 + 11 =

14 + 9 =

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

start today

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

Name Goes Here

Urban Beekeper

Troly does the heavy-lifting while we focus on making a great, unique product

Name Goes Here

Urban Beekeper

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?

t

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

N

Short explanation if needed

N

Short explanation if needed

N

Short explanation if needed

Start with Troly

N

Short explanation if needed

N

Short explanation if needed

N

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

N

Short explanation if needed

N

Short explanation if needed

N

Short explanation if needed

Start with Troly

N

Short explanation if needed

N

Short explanation if needed

N

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

N

Short explanation if needed

N

Short explanation if needed

N

Short explanation if needed

Start with Troly

N

Short explanation if needed

N

Short explanation if needed

N

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.