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.

The style editor 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", head to the actual web page itself and 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. 

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 will change all the linked sections, not just that particular one. 


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! 

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 undertand 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 options to edit this section. 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!

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 a pea-sized 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, or if you know the specific hex code, you can input that too. (If you have figured out a colour you like, it would be wise to write down the hsl (hue, saturation, and luminosity) so you can have it on hand for future pages. 


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, 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 or if you think you've made a right mess of your site, 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.

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!