Global Styling STEP 1 (Colors) How to Set Your Brand Color Palette

To make your site or funnel match your branded colors, you will need to set your Color Palette under Global Styling. 

INSTRUCTIONS:

Click the brush icon on the left side of your builder and then click on "Color Palette".  

Once you have opened the Color Palette screen, you have 2 options to set your brand colors:

1) Select a "Primary Color" and 4 "Secondary Colors". You will be able to click on the colored circle to edit or change that particular color as per your personal branding.

You'll also get to choose the main background color of your pages as well as the Main Text Color.*

Note About "PRIMARY COLOR": 

This is the color that will be used for all the "system generated" portions of your site that require a color. For example the "Read More" buttons in your Blog, your standard "Add to Cart" & "Buy" buttons on your built-in Store pages, etc. UNLESS you change your global default  button color and style - See This Article.

We ALWAYS RECOMMEND USING A MID-TONE COLOR AS YOUR "PRIMARY COLOR" not too dark and not too light so that both light or dark text is visible on top of this color.  

Do NOT use White. 

Once the color editor window appears, you will be able to either: 

1) Type in your color's HEX code (use the field with the # in front)

2) Type in your color's RGB values  (use the fields with R, G, B, A in front)

3) Use the color bar and color wheel selector tools to slide and move your mouse to select a color

Follow the above instructions for all 5 colors in your Color Palette. 

PRO TIPS & COLOR RULES WHEN ADDING YOUR COLOR PALETTE SELECTION:

- PRIMARY COLOR:

As mentioned above, choose a mid-tone color from your brand palette as your "primary color" (not too dark or too light) This is the color that will be used as default on the few areas of your site that are system-set and non-editable by you.

- SECONDARY COLORS:

To keep things simple and looking cohesive, we recommend matching the general hue and intensity of the colors in your chosen template with your own brand colors.

ie:

• Replace the DARKER colors in your template's color palette with the DARKER colors in your own palette.  

• Replace the LIGHTER colors in your template's color palette with the LIGHTER colors in your own palette.

• Replace the MID-TONE colors in your template's color palette with the MID-TONE colors in your own palette.

OR

2) Explore the Ready-Made Color Scemes and Apply One of Our Palette Presets to Match Your Brand (as below)

You will now see this colors appear in the top row of your text editors color choices.

You will also notice that any parts of your template that were set to the previous or original template's colors should now be changed to your brand colors. :)

NOTE:

While it may default to one of the colors in your Color Palette - you can always individually change the colors on your pages within the Block's settings window, the Column's settings window, the Button's settings, Text settings, Widget's settings etc. 

To complete BUILDING YOUR FOUNDATION with your Global Styling Set Up - Please follow the next steps in the articles below: 

GLOBAL STYLING STEP 2: Fonts - How to Select or Add New Fonts in Global Styling

- GLOBAL STYLING STEP 3: Text Styling - Set your Heading, SubHeading & Paragraph Fonts across your Site

- GLOBAL STYLING OVERVIEW: Setting your Branding

-.GLOBAL BUTTON STYLING: ​Setting your Button Styles Site Wide