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. 

Please watch this video tutorial and then see step by step instructions below:

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

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

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:

- PRIMARY COLOR:

As mentioned above, you will 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:

While not necessary - one recommendation to keep things simple is to try and match the general hue and intensity of the colors in your chosen palette when swapping them out for your own brand colors.

As a general rule - try to replace any DARKER colors in your template's color palette with the DARKER colors in your own palette.  Replace any LIGHTER colors in your template's color palette with the LIGHTER colors in your own palette. Our templates are generally set to go from dark (left) to light (right). 

Then hit the pink CONFIRM button at the bottom of the color palette window to save your choices.  

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