Lesson 5: Reviewing the Site Styles section

 

Now that you have these guidelines for good web design, it's time to apply all that knowledge to your website! It's time to head back into Squarespace!

In this lesson we will: 

  1. Understanding the “Site Styles” section

  2. Set Fonts

  3. Update the website with Brand Colours

  4. Adjust additional page content

 

Step 1: Understanding the “Site Styles” section

Go to Home > Design > Site Styles

You'll now see the menu is displaying all the style choices of your site. Everything that can be edited visually can be found in this section. You will not be able to edit the actual content of your site while in the "Site Styles" section. If you need to adjust something, you will have to return to "Pages" to make additional content changes.

Site Styles” is organized by sections, such as SITE (which pertains to the whole thing), HEADER, MAIN, CONTENT, FOOTER, etc. Instead of going through each section of the "Site Styles" and deciding on your fonts and colours from there, the best way to navigate this portion would be to head to any page on your site first and then access the “Site Styles”. The reason you pull up a web page first is so that you can see, in real time, the changes you’re making to your content.

Once you are on a page of your site, select “Home” in the top left hand corner of the menu, select “Design” and locate “Site Styles”. Hover your mouse on the section you want to edit. You'll see a blue box appear around. This indicated what section is being modified. Click on it and you will see the style editor display all the editable fields for that portion of your site.

Blue-Outline.gif


From there, you will be presented with all the individual options you can adjust in that section. Note that certain sections are linked; making an adjustment to Heading 1 on this page will change the look of Heading 1 in all subsequent pages.

 

Step 2: Set Fonts

So now that we know how the "Site Styles" works, we should be able to modify all the content you placed on your site in Module 3! If you were unable to play around with fonts in Lesson 1, using all the new tips you learned, you can go ahead and start experimenting here!

TIP: Remember that, for SEO purposes, "Heading 1" should be used on each page introduction or title only. Google will gather data from Heading 1 and if it's used multiple times on a page, Google will get confused and not understand how to classify your business. This is not good for SEO. 

Select the content block where you placed "Heading 1" text. You should now see, in the “Site Styles”, the option to edit this section. Select the down arrow under “CONTENT: FONTS” and a menu will pop up.

Font-Menu.gif
 
 
Step 1 - Font Style.png

From top to bottom:

  • Choose your typeface here

  • Weight - How thick or thin the text is. 

  • Style - Choose between Normal or Italic

  • Size - How big you want your letters to be

  • Letter Space - How much space is between each letter

  • Text Transform - Choose between Uppercase, Lowercase or Capitalize

  • Line Height - How much space is between each line of text

Notice every time you make an adjustment in the "Site Styles", you'll see a little grey dot next to the section you've made an edit. If you aren't happy with the changes you've made and want to revert back to the previous version, hover your mouse over the grey dot. You will see an "x". Click on that and it will revert back to the last setting. 

Step 1 - Change Font Style.png
 

Note that once you've settled on a font you like for "Heading 1", this will be the default setting every time you use that classification on a block of text. 

After you've set "Heading 1", continue on to content blocks where you may have used "Heading 2", "Heading 3", "Normal" and "Quotes" and adjust as necessary.

 

Step 3: Update the website with Brand Colours

Now that fonts are set, you can begin adding your brand colours to your site, including headings and body copy.  Just like we did in STEP 2, you can begin by selecting different content sections. Every time you see the little coloured dot on the "Site Styles", that's an indicator that the colour can be modified. 

You can drag the white circles on the colour chart to specific hues and shades you want.

Colour.gif
 

By dragging the white circle at the bottom of the colour selector, you change the opacity of the colour. Decide you don’t like the colour? Just like with fonts, you can select the little grey dot next to “Heading 1” and and it will revert back to its previous state.

Colour-1.gif
 

If, using the selector on Squarespace, you’ve figured out a colour you’d like to continue using for your brand, it would be wise to record the HSLa (hue, saturation, lightness and alpha, respectively) so you can have it on hand for future pages. Alpha refers to the opacity/transparency value—how transparent the colour is. 0.0 = Completely Transparent, 0.5 = 50% Transparent, 1.0 = Completely Opaque.

For more information on HSLa, click here.

Need a brief refresher on Hue, Saturation and Lightness (or Brightness, as we referred to it)? Read about it in Lesson 3.

TIP: You must enter the HSLa exactly as it is shown on Squarespace or you will have no luck trying to locate the colour. It might be wise to open a document on your computer to copy and paste the code into so that you don’t have to manually type it in when you need it.

 

In this instance, this colour sits around 240 degrees on the colour wheel, is 63% saturated with colour, has 43% lightness in it, and is 69% transparent.

 
 

Know the specific hex code of your brand colours? You can enter that too!

hex-code.gif
 
 

Step 4: Adjust additional page content

You won't know what looks good unless you play around. In addition to your fonts and colours, you will also be able to just the look of your links, buttons, backgrounds, navigations, footers, etc. If it's on the page, chances are, you can adjust it to suit your brand needs! Don't forget to save pages you've edited so you don't lose progress and have to add your settings all over. If you think you've made a right mess of your site and want to start from the beginning, the "Cancel" button is your friend! 


Work through, page by page, until you're satisfied by the outcome. Don't worry, this stage does not have to be quick. It most likely will not be. Take your time to play around and experiment. Use the resources we’ve given you to help you work through these lessons. The Brand Personality worksheet might aid in figuring out the best colours for your site, as will your sitemaps and wireframes.

You can continue to adjust until you know it's perfect; just don't forget to be consistent in your design choices across the entire site! And when in doubt, consult a friend! A second set of eyes is a very valuable resource, especially when it comes to designing. And when you’re ready, move on to Module 5!