BUILD YOUR FOUNDATION Global Styling Overview: Start by setting your Branding

Each template comes loaded with a pre-selected color palette and font pairings. While you certainly CAN keep these as-is if you wish, you have the freedom to fully customize both - branding your pages to YOU and your business. 

Note: BEFORE YOU START TO EDIT YOUR WEBSITE YOU NEED TO SET YOUR BRANDING FIRST BY SETTING UP THESE "3 STEPS" IN GLOBAL STYLING.:

1) STEP 1 (Brand Color Palette)

2) STEP 2 (Adding / Uploading Brand Fonts)

3) STEP 3 (Text Styling - choosing what font goes where) 

This may SEEM simply “aesthetic” - however there is a strategic reason behind WHY we tell you to set your Global Styling FIRST (so don’t skip this step!😊) Not only will it immediately transform your chosen template into one that looks like YOUR business and YOUR brand (yay!) - it also has an impact on things you’ll learn about a little later, including how your Mobile views look and even your SEO.

Again - we understand that it’s tempting to simply dive in and start adding content first, or to adjust your font choice or sizing using the on-page text-editing toolbar - however we want to SET YOU UP FOR SUCCESS - so please follow our advice, watch the video below and take a few minutes to set up your Global Styling (especially Text Styling!) FIRST!

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

GETTING STARTED:

To get to your Global Styling - click the paintbrush icon from your left-hand navigation when you are in the "Builder" screen.

From there you will be able to add your own brand's Color Palette, add your brand Fonts and set your Text Styling to dictate what font (in what size) will go where across your site.  

Pro Tip: To keep things simple - one idea is to use your Template's pre-loaded Color palette & Font selections as a GUIDE when swapping out to your own selections.  

For example: 

-Where there is a dark color in the pre-selected color palette, replace it with a dark color from your own brand's palette, and vice versa.

-If there is a handwritten or "script" style font in the pre-selected font Header H6, replace it with your own "script" font and set it to be approximately the same size 

OR... 

-If there is one font listed in H1-H3 and a different font in H4 - H5 - follow the same pattern and swap with two different fonts of your own, setting to approximately the same size, etc. 

GLOBAL STYLING - STEP 1: SET YOUR COLOR PALETTE

Updating the color palette of your chosen template to YOUR branded colors is a great first step in customizing your site or funnel to your business. 

As you'll see, you can select a "Primary Color" and 4 "Secondary Colors".  You'll also get to choose the main background color of your pages as well as the Main Text Color.*  

➡️ CHECK OUT THE FULL ARTICLE WITH INSTRUCTIONS ON HOW TO SET YOUR BRAND COLOR PALETTE

*No worries - you'll also be able to change the background color on the page per block or per column. And you also can change the text color per text widget or heading widget on the page as well. 

GLOBAL STYLING - STEP 2: SET YOUR FONTS

It's amazing how much changing the font on your pages can change the look, feel and mood of your site overall. Swapping out the included Template fonts with YOUR branded font choices in Global Styling will instantly update the text and headings across your pages and give you access to the typography that matches your brand.

In this step you'll select from hundreds of free Google Fonts OR upload your own Custom Fonts to add your chosen fonts to a "library" of fonts available for you to use on your site/funnel.

➡️ CHECK OUT THE FULL ARTICLE WITH INSTRUCTIONS ON HOW TO ADD YOUR FONTS 

GLOBAL STYLING - STEP 3: TEXT STYLING

Setting the Global Text Styling is IMPORTANT. When you go to make actual changes to the text on your pages - we recommend adjusting the Global Text Styling settings FIRST - instead of or at least before - using the on-page text-editing toolbar.**

Once you have added your fonts - you will set "what font goes where" across your pages in the Text Styling area. This is the step that will actually update the text and headings across all your pages.  

Swap out the template's text choices for your own by clicking the "Click to Edit" button next to each. You'll be able to select Font Choice, size, spacing, line height and color for each. 

➡️ CHECK OUT THE FULL ARTICLE WITH INSTRUCTIONS ON TEXT STYLING

MORE INFO: 

Note: Text Styling not only relates to how text appears visually on your page - ie: the font choice, font sizing, spacing, color, but ALSO the H1-H6 tags are used by search engines to "rank" the importance of the words set to each of those Heading types.

➡️ CHECK OUT THIS ARTICLE ON HEADING TAGS

**Note: Any on-page text styling edits CAN be made with the text-editing toolbar you'll see when you click into a Text or Heading widget. However, making these styling changes on-page will OVERRIDE the "tie" to Global Styling. This means that future changes to the Global Text styling will not affect this one individual text or heading widget.  

For example - if you change the font choice on-page for a Heading widget from Poppins( global) to Raleway, but you don't change the size or spacing - then you have overwritten the Global Font choice for that particular Heading widget. If later on you were to make changes to the Global Text Styling for that particular Heading (1-6) - the font choice for that one heading widget on-page will NOT change (it will stay as Raleway on the page) - but the size and/or spacing would change to whatever it's now set to in Global Styling.

Please watch this comprehensive "Overview" tutorial below.

CLICK HERE TO VIEW OUR BRAND KIT OPTIONS