Pre-s. New to Squarespace? You can sign up for a free trial of here! Oh, and I also got ya a little off the price, use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)
Okie! Carrying right along where we left off from Squarespace basics: what are blocks?, and Squarespace basics: pages & navigation options, it’s time to dive into setting the site styles for your website!
There are two ways to make changes to your site’s styles. One is found in the design panel of your site, and the other is using the pencil icon or style editor within each section of the page you’re building.
When I first started using Squarespace to build websites, I would spend a bunch of time designing a page, adding all my bits and pieces, text blocks, and buttons, and then using the design panel settings to make any changes to their style.
When I was happy with how that looked, I’d move on to designing my second page. Only, for this page I wanted my text to look a wee bit different, so I’d quickly hop back into the design panel and make those changes. Easy peasy, right?
Just when I thought things were looking pretty good, I’d go back to my first page to admire my work and find that suddenly my fonts, buttons, and backgrounds were not how I left them!
It turns out that any changes made using the design panel settings are site-wide. ♀️
So, moral of the story? Make sure to set those babies from the very beginning. Then, you only need to make tweaks using the pencil icon or style editor within each section of your page.
Ready for a serious life-hack that is legit going to save you hours of wasted time (and possibly even a few tears) on every Squarespace website you ever design?
Step 1: Create yourself a blank page.
Step 2: Add one of every single type of item you have options for editing within the design panel to that blank page.
This allows you to view all the changes made in real time, and to see how all these elements will fit cohesively together. Basically, think of it as your mood board for your site!
Here’s an example of adding one of every type of font to the first section of your mood board page:
I’ve written out the names of each font type, and then used the text box toolbar to assign to each example text it’s correct formatting (ie. “Extra larger heading” has been set to extra large heading format).
You are also going to want to add one of each button type to be styled. So in the same section, go ahead and use the button block to insert three buttons.
Title them small, medium and large (I’ve added extra eee’s to increase the width of the button for the example) and then change their settings in the button block editor to match.
Now that we have one of each font and button type, it’s time to make ‘em pretty!
Let’s starts with the fonts, shall we? Go ahead and go to design > fonts.
You’ll notice Squarespace has these sort of font packs to help you to pick fonts that complement each other.
Now, you can definitely choose to use those if they feel like the right fit for your site, but if nothing’s catching your eye, you can customize any pack by clicking on the gear icon.
FYI, this will not change the name of the pack to your new font name unfortunately. It will only tack on the word custom to help you keep track of which one you’ve made tweaks to.
You’ll now have the option to edit the heading and paragraph font styles, as well as the fonts used for your buttons. We will use heading fonts for our example.
Family: the actual font type (ie. Times New Roman)
Weight: how thin or bolded your font will appear.
Style: whether that font will automatically appear normally or italicized.
Line height: the space between each line of text.
Be sure to keep this at 1.0 or higher or things start to overlap!
Letter spacing: the space between each letter
Text Transform: whether your font will be lowercase, uppercase, etc.
Size: Just use those sliders to set each font type to your preferred size!
When it comes to the weight of your font, consider keeping things on the thinner side. You can always bold any bit of text you choose using the text block toolbar!
The same goes for choosing your font style and “text transform.” You can use the text toolbar to make your font italics, and your keyboards caps lock button to get that all caps look if you so desire!
Now that you are familiar with the options for styling your fonts, go ahead and make any changes to your paragraph and button fonts by clicking back to your custom font pack’s settings.
Want to keep your site visitors from getting overwhelmed and jumping ship? Break up your content into easy to digest sections!
The easiest way to do this is to use a different colored background to indicate the start of a new section.
There’s just one problem…that pretty pink font you picked for your main heading? Yeah, that’s not going to show up so well on a matching pink background!
So, you’ll need to set up a few different color themes for use throughout your site! At the very least you’ll need a color theme for use in your site header/main navigation (more on the why of this later in this post), one for your footer, one for use on light or white backgrounds, and one for dark or colored backgrounds.
Assuming you followed the steps in Squarespace basics: pages & navigation options, you should already have a few pages (and therefore some links) appearing in your main navigation.
Next, we have just a few things we need to do to prep our site header for it’s color theme makeover!
From your mood board page, click edit, then click edit site header at the top. The site header editor is where you will:
Upload your logo
Add or remove elements from your main navigation (buttons, shopping cart, social icons, etc.)
Change the style and position of your main navigation bar
Select a color theme for your main navigation
Open up the colors panel. See that transparent setting?
That just means that your site header background will match the first section on your page. This can be handy for changing up the look of your site from page to page, but it doesn’t always fit well with your logo. This is why your site header needs it’s own color theme!
With the top two settings toggled off, scroll down through the list of color theme options, and find one that won’t be spoken for any where else on your site.
Whichever you select will then be the theme to edit in your design panel to design your header color theme!
Don’t head into the design panel just yet, though! We still have to assign your other color themes to their example sections!
Click edit on your moodboard page, and click the pencil or style setting icon on the section where your example fonts and buttons currently live.
Then click colors and select the white color theme. This section will be the one to watch when making changes to your color theme for use with white backgrounds.
Add additional blank sections to your page for any other color themes you wish to begin setting.
Copy and paste all your font examples into a new text block in your new section, create your three buttons, and then use the pencil icon to assign a color them to that section.
Do the same for your footer by clicking edit footer > pencil icon. Under the colors tab, toggle off the default color setting to pull up your color theme option. Select a theme which has not already been assigned.
Now that you have assigned a color theme to each of your example sections and header and footer navigation areas, it’s time to get styling!
To get started, head to design > colors, and then click the pencil icon next to the color theme you wish to edit. Set the color of your background for that theme, and then get to work styling the rest!
If you’ve already got set color codes for your brand (ie. those html color codes that look sort of like this: #FAAF99) then go ahead and copy and paste them right into each item’s color panel.
Still playing around with your brand’s colors and vibe?
No worries, Squarespace has got you covered! Just move your cursor around inside each item’s color panel until you find the shade you like!
Oh, and less is definitely more when it comes to colored fonts. There are many other ways to bring color into your site!
As for the rest of the color settings within each theme, you literally have endless options.
But before you go and get too color happy, here’s something to keep in mind…
Say you are editing your site’s headers. You really only need to edit the bits of that theme that will be appearing in your site’s header!
Ps. missing options to edit a certain item? It’s probably because you haven’t added that element to your site yet!
Once you’ve finished editing all your color themes, they are ready to be used anywhere on your site!
Simple add a blank section to your page and use the pencil icon to select which of your new custom site wide color themes that specific section will use!
Oh, and one last thing before you go!
You’ve already set the button fonts under design > fonts, and the button colors under design > colors. That just leaves the style of the button itself! So head under design > buttons. This is where you can edit:
whether your buttons are solid or just an outline
whether your buttons are square, rounded, or pill shaped
how much padding (aka space) there is between your button’s text and your button’s edges
New to Squarespace? You can sign up for a free trial of here! Oh, and I also got ya a little off the price, use code PAIGE10 for 10% off your first year. (Yes, that’s an affiliate link!)