Squarespace Blogging: Design, Style, and Layout
Now that we have you up and running with your Squarespace blog, let’s take a peek into the design options so that you can style your fonts, colors and layout for a more cohesive and professional look.
For this blog post we’re going to go through the ‘Design’ options in the style editor located in the backend of your website. When you first build your Squarespace site, it can be a little fiddly getting everything set up. But the good news is that once it's done and you’re happy, you’ll never have to touch it again.🙂
If you’re a little lost, you’ll want to read this post all about how to start blogging in Squarespace before you join me any further.
These articles will help you too:
Hopefully, by the end of this post, you’ll be more confident showing off your blog! Don’t forget to share it in the comments below so that I can have a peek.😉
Okie dokies… Let’s get started!
How to customize your blog design in Squarespace 7.1
For this article, head over to the Design tab in your website’s backend. We’ll be hanging out there for the duration of this post.
Changing the blog title font
Your blog post title automatically defaults to the font that has been set as your H1 in your site styles. But if you’re looking to use a slightly different variation of your H1 font or another font all together, here’s how you do it.
Select Fonts -> click on the gear icon of the font selection you’ve chosen -> Advanced
You’ll find the below options where you can now style the fonts of your blog posts.
Under blog post ‘Title’ select if you want to use a ‘Heading’ font or a custom font.
Choosing a ‘Heading font’ the styles will default to your H1, H2, H3 or H4 styles.
If you choose ‘Custom’ you can change the blog post title to another font that you love, adjusting the font weight, letter spacing, line height etc… To go with it.
Generally, as best practice I would suggest that you leave this as a H1, as this will help your website rank better. H1 tags are important for SEO because they tell search engines what your page is about.
Buuut… If you’re dying to achieve another look, this is where you do it.
The same can be done for your Meta data, Author Profile and Pagination.
The Pagination appears at the end of the blog post and tells your site visitor what the previous or next blog post is to read. Normally this defaults to H3 but I like to use H4 sometimes.
As fun as it can be to customize fonts on your website, remember we’re going for a cohesive and pro look so aim to use no more than 2-4 fonts for your entire site. 😉
Blog page color themes
After reading this post, you’ve chosen which layout you’d like for your blog page. There are a few more fun things we can do to customize your blog so head over to:
Design -> Color -> Section themes -> Click the pencil icon for color theme you picked for your blog page
Scroll down to the Blog layout options.
Below I have a side-by-side layout. Underneath ‘BLOG: SIDE BY SIDE’ I can now change the colors of the Post Title, Meta, Excerpt, and Read More link.
If you click on the little circle, you can choose a color from your palette or choose a custom color. To keep your blog looking professional, I suggest sticking with your brand colors.🙂
Go through all of the options until you’re happy with the look.
Blog post color themes
Now let’s do something similar for your blog posts. You’ve chosen a color theme for your posts and now it’s time to customize it. Head over to:
Design -> Color -> Section themes -> Click the pencil icon for color theme you picked for your blog post
Now we can customize the colors for your Post Title, Post Meta, Post Pagination Icon, Comment Text and Author Profile to name a few...
As mentioned above, you’ll want to keep your colors consistent with your brand colors so it’s best not to use a custom color unless you really need to.
If you’re using different color themes for different blog posts, you’ll need to customize each color theme unless you’re happy with the default.
I would suggest sticking with one color theme for your blog posts to keep things consistent and easier to maintain.
Buuut… If you’re thinking it’d be cool to have different themes for each blog category, experiment and see what works best for you but I’d try not to go too overboard to help keep your sanity.
And there we are! I’m sure your blog’s design, style, and layout are looking pretty awesome!
It can be really finicky at first but once you set it, you can pretty much forget it until you’re looking to redesign.
