My Simple Tip for Styling Your Squarespace Site

It’s no secret I love Squarespace—it’s what I’ve used for my site since starting my business in 2015 and it’s what I design all of my client’s sites on. One of the reasons why it’s my favorite platform is that the learning curve isn’t too dramatic. 

The simplicity, clean backend design, and fairly intuitive design nature of the platform makes it perfect as a DIY option that your business can continue to grow into, or perfect for handing off to a designer and then easily maintain once it’s created. 😉

Simple Squarespace Styling Tip.jpg

If you fall into the DIY camp, today’s post is for you. It’s going to be a short and sweet tip with step by step instructions about how to make styling your site easier.

When you first create your Squarespace account and get started with a template, the first step to making it your own is digging into the Site Styles.

The Site Styles is where you can tweak all the design elements on that page to be your brand colors and fonts, change the navigation layout, add more padding, and SO much more. (More advanced styling can be done in the CSS section on Squarespace, but today we’re keeping it simple.)

If you’re just starting to get acquainted with this platform, I can see how the styling process would be overwhelming! There are just so many things you can change.

Sometimes you’ll think you’ve styled everything on a page, and then you add in a new block and it still has the original template’s styling.

Like, what the heck?!

Luckily, I’ve got a simple tip that will ensure you’ve got EVERYTHING styled to your brand’s standards and avoid that “what the heck?!” moment.

Before we get started, let’s overview how Squarespace’s Site Styles work.


Basically, when you open the Site Styles panel, you have the option to style all the elements that are currently on that page. What causes the “what the heck?!” moment is when you put a new block/design element on a page that wasn’t there when you set the style settings. Blocks that haven’t been changed to fit your branding will automatically use the template’s original settings.

Now that we’re good to go, here’s my tip for styling your site, broken down step by step:

STEP 1
Under your Pages, create a “Test” page in the Not Linked section that you can delete later on.

STEP 2
Under the Test page settings (accessed by clicking on the gear icon), head to the Media section. Insert a banner image and save your changes.

Note: the white circle on your image is the image focal point. That means your image will scale up and down on different devices around that point. You’ll want to keep it on the important part of the image so it doesn’t get cropped when scaled for mobile use.

To open page settings, go under your Pages panel, find your Test page and click the gear icon. This will open a window like this one where you can change the page’s Navigation Title, URL, page description for SEO, and add in banner/hero images.

To open page settings, go under your Pages panel, find your Test page and click the gear icon. This will open a window like this one where you can change the page’s Navigation Title, URL, page description for SEO, and add in banner/hero images.

STEP 3
Now that the page has been created, hover over the banner image until the “Edit Intro” option shows. Click this and start adding the following blocks to this section:

  • Text block with a line of h1, h2, h3, and body text

  • Text block with hyperlinked text

  • A quote block

  • Small button

  • Medium button

  • Large button

  • Line

  • Form

  • Newsletter

Note: This is an important step because certain blocks have additional color styling options when they are overlaid on a photo. They are called “Alternate Color” settings.

Here’s an example of what your intro section will look like when you’ve added the blocks to it. Remember: the point isn’t to be pretty, it’s to get everything on the page so you can get it styled.

Here’s an example of what your intro section will look like when you’ve added the blocks to it. Remember: the point isn’t to be pretty, it’s to get everything on the page so you can get it styled.

STEP 4
After your intro section has all those blocks placed on it, you’ll need to head to the main part of the page and click “Edit Content.” Insert each of the following blocks on the page:

  • Text block with a line of h1, h2, h3, and body text

  • Text block with hyperlinked text

  • A quote block

  • Small button

  • Medium button

  • Large button

  • Line

  • Image Layouts (Note: put in placeholder image for the time being. Also add in text so you can style fonts; add in a button under Edit Image > Design > Image Link > Button to be able to style the color and font used on the buttons)

    • Poster

    • Card

    • Overlap

    • Collage

    • Stack

  • Form

  • Newsletter

Note: Certain blocks don’t need specific changes under Site Styles. For example: you don't need to style gallery, summary, calendar, or social link blocks since those automatically pull in text styling from you h1, etc. Changes to the layout, metadata, light or dark color scheme, and more are made under these block’s individual settings.

Here’s an example of what your main page content will look like when you’ve added the blocks to it. Remember: the point isn’t to be pretty, it’s to get everything on the page so you can get it styled.

Here’s an example of what your main page content will look like when you’ve added the blocks to it. Remember: the point isn’t to be pretty, it’s to get everything on the page so you can get it styled.

STEP 5
After all the blocks on the list above have been placed on the page, save your changes.

STEP 6
Go back to your Home menu and navigate to Design > Site Styles. Now that all your blocks are available, you’ll be able to get all your page elements on brand in one fell swoop with the exception of your blog.

Note: There will be a lot of design options, so it make be overwhelming to scroll though the whole design panel to find each block and its settings. To make it easier, you can click on the single block you want to work on to only show those settings. 

Bonus step if you have a blog (or are planning on having one):

Finish up your styling by navigating to your blog page. Once on your blog page, style the main page where your posts/excerpts will be. Save these changes. Next, click on an individual post (you may need to create a sample post) to give you styling options for sharing icons, pagination, etc.


And that’s all! Once you’ve gotten your site styling on brand, you can delete the test page and commence with designing your site. Hope you find this helpful as you’re building your site and making sure each element in line with your branding!

 

Ready to ditch the stress of DIYing your site and stop wasting precious hours? I work 1-on-1 with creatives (like you!) who need a stunning + strategic site that acts as a business-growing tool. Let’s get the conversation started!