Prefer to watch?

Here’s the step-by-step video!

Mentioned in the video:

Rather read all about it?

Here are those steps written down…

If you caught last week’s video I shared a step-by-step look at how to easily get set up to start blogging in Squarespace!

We looked at:

  • how to add a blog to your Squarespace site

  • how to add, manage and edit blog content

  • as well as some general blog settings and best practices to know!

In this video, we will be chatting about…

How to customize the look and layout of your built-in blog page in Squarespace 7.1

Pro-tip: I definitely suggest having a few posts published and ready to go before trying to customize the look of your blog-page, otherwise you won’t be able to watch those changes you’re making happen in real time!

Remember, you can always keep your blog hidden from visitors by leaving it in your unlinked section and you can un-publish any posts you don’t want live after you’ve got things looking just the way you like them!

To get to your blog page, just head to pages > ‘blog’ (or whatever you named your blog.)

Then click edit.

When we talk about customizing your blog page, what we are really talking about is how to customize the one special built-in blog section – the section Squarespace gives you to automatically display any content you publish.

All the other content on your blog page can be added & styled as usual, so if you want additional content on your blog page besides just your blog post previews, just add new sections above or below your special blog section.

But since your blog section has it’s own set of rules, I’ll use today’s video to let you in on what those are and how to tweak them!

Choosing a blog page layout in Squarespace 7.1

You currently have 5 options for the way your posts will appear in your special blog section:

  • Basic grid blog layout

    Where your content will be organized into 2 or more columns and neat, symmetrical rows.

  • Masonry style blog layout

    This is similar to your basic grid, the difference being that your thumbnails will not be forced to crop at the same aspect ratio, so rather than symmetrical rows, each preview will be as tall or as short as it needs to be.

  • Side-by-side blog layout

    Which is where your text will appear beside your posts in a list down the page.

  • Alternating side-by-side blog layout

    Where your content will be side by side like before, but this time rather than having all your images on one side and text on the other, they will alternate down the page.

  • Single column

    Where your post previews will be stacked down the page single file

Customizing your new Squarespace blog page layout

Each of these 5 main layout settings will have it’s own options for further customization.

So if I select basic grid, these are my options:

  • Page width

    Whether my content will span the full width of my page, or be inset a bit.

    Head’s up! If you’re wondering why this setting doesn’t seem to be doing anything, it could be due to how you have your overall site spacing set in your site styles.

    This is found by going to design > spacing.

    If the screen you are viewing your site on is smaller than your site’s default max page width, you may not be able to see those changes in real time since technically your content hasn’t reached the edge of the limits you’ve set.

    It still technically has room to responsively grow before it hits that border and Squarespace would have to force that content onto a new line.

    So this full-width or inset option is in relation to your site’s max page-width limit, not to the actual edge of your actual screen.

    They do this so that it would appear inset on a normal, larger screen, but it wouldn’t make your content crazy skinny on something like mobile.

  • Columns

    The set number of columns I wanted my content organized into.

  • Padding

    How much space I want horizontally or vertically between each blog post preview.

  • Image placement

    Whether I want my preview text to appear above or below it’s thumbnail on the page.

  • Aspect Ratio

    What shape I want Squarespace to use when uniformly cropping all my thumbnails in that section.

  • Text alignment:

    To left align, center, or right align my preview text.

  • Text Display:

    Whether to hide or display my blog post excerpts and this little read more link.

    Btw, if you decide not to display this link, visitors would just read that post by clicking on it’s thumbnail image instead.

  • Text Spacing

    The spacing and width of your preview text content.

  • Meta Data Display & Spacing

    How and when to display your meta data or BTS info that goes along with each post like your categories, tags, author, and post publish date.

    Orrrr you can hide them all together by setting the primary and secondary meta data to be displayed as none. Use the little slider to adjust the space between your meta data and preview text.

  • Delimiter style

    The little bullet, dash, line, or space that separates one bit of meta data from the next!

Special blog-page layout settings to know in Squarespace 7.1

Like I said, each layout will have it’s own settings to help you fine tune it, so let’s quickly look at what’s different with those other layouts that you wouldn’t find in a basic grid.

  • Masonry style

    So really the only difference you will see here is that you don’t have the option to choose an aspect ratio.

    Your thumbnail image height and the length of your preview text is what determines how tall your preview will be, so it won’t be neatly cropped and organized into symmetrical rows like your basic grid layout.

  • Side-by-side

    The main difference to note here is that you do have the option to decide when you want your text or your image to be on the left of the page, and what you want your image size to be.

  • Single Column

    The biggest difference with this layout is that you actually have the option to display more than just the preview text.

    So you could have entire posts display one right after the other to keep visitors scrolling down the page.

    The only downside to this is that your blog page would not be as easy to navigate if someone came in search of a specific post.

Customizing the colors in your built-in blog section

Okie dokes, so now that we are happy with the layout of our blog page or that one special blog section, let’s get to tweaking those colors by heading under the colors tab.

If you haven’t watched my video on setting your colors in your site styles settings, I highly highly encourage you take a moment and do that now: Squarespace tutorial: a guide to using the new style editor (7.1) PT 2

Don’t worry, this video/post will still be waiting for you when you get back, and I promise you what I’m about to show you will make a heck of a lot more sense!

So under the colors tab, we have the usual option for assigning one of our pre-made color themes to our section.

But if you didn’t have a blog added to your site back when you were creating these themes, you may not have had the option to tweak the colors for some of these elements that are specific to your blog page…

since Squarespace will only give you options for customizing what already exists on your site.

So let’s look at what you can customize.

Remember, if you want to tweak a particular color theme, make sure that theme has been already been applied somewhere on the page you have open so you can watch any changes you make in real time.

Now, the easiest way to see what you can customize for any specific page or section is to have that page open, then head to your design panel and click on the appearance setting you hope to change.

So if I have my new blog page open in my page builder window, and I want to see what options I have for colors, I would go design > colors and click on the color theme I want to edit.

Now I’m just going to click on the area I want to see my options for. So in this case, it’s my blog section.

You can see a blue box appears to let you know what you’ve selected.

And it automatically pulls up what is specific to that type of block or section.

So in this case, I can tweak my blog section’s title, meta data, excerpt, and read more link. To choose a color from my site’s main palette, I just click palette.

If you’re looking for your palette colors, click palette, and if you want to add a new color that isn’t already in your palette, click custom, instead.

Now, you would have already set the background color when you originally designed this section theme, but if you want to change it, just remember that it will affect the background of any section on your whole site that has that theme applied.

(Not just your blog page!)

Adding additional content above and below your blog section

Like I mentioned in the beginning of this post/video, the only part of your blog page that has special rules for what you can customize is the built-in blog section.

But you can add and style pretty much any other type of content you can think of by introducing new sections above and below your blog-section.

For more on adding and styling content, you’ll want to circle back around to these tutorials:

If you’re stuck for what else to be including on your blog page, I’ve got a tutorial coming down the pipe where I’ll be sharing blog page design best practices, as well as a creative hack for designing a completely custom layout for your blog page if you are feeling limited by what Squarespace’s built-in section can do.

I’ll add that link to the “mentioned in the video” area at the top of the post once it’s live!

You you can visit me on YouTube, subscribe to my channel and hit that bell notification so you don’t miss when it drops!

Oh, and if blogging is more than just a hobby…

…and your goal in putting all this content out into the world is to drive more traffic to your site and get eyeballs on your paid offerings, then I invite you to check out my most popular free training called Build a site that sells 101.

This in depth, 60-minute on-demand webinar covers the site-building best practices you need to know to turn all those blog visitor into actual paying clients and customers!

Just click on the image below to get instant access!



You’ll Also Love…

Squarespace tutorial: customizing your built-in blog page (7.1)