How To Display Blog Tags In Sidebar Squarespace

How to Add a Sidebar to Any Squarespace Blog

Sidebars are a great way to offer clickthrough opportunities to your readers and organize your content in a pretty way. As I've mentioned before, the Brine Family is my go-to, but since sidebars aren't a block that exists in Squarespace, I'm going to break down how to build a faux sidebar for your blog. It's so easy, you might be surprised!

Step 1: Assemble Your Elements

To get started, you'll need to decide what you want to include in your sidebar and create images for each element. If you're not sure what to include or how to get started, here are some ideas to get you brainstorming:

Your photo
A short bio
Social links
A search bar

Your lead magnet
Popular posts
Blog categories
Featured products

Below are the components of the sample sidebar I'm going to show you how to build today. When making your elements, make sure to save them separately, including a separate image for each of the categories. No Photoshop? No problem. I highly recommend Canva.

Headshot

Accent Divider

Lead Magnet

Instagram

Step 2: Create a "Blog"

To add a sidebar to posts and pages on our Squarespace site, we're going to use a Summary Block. Summary blocks pull the content from an image gallery, blog, or shop into a pretty, summarized form. We're going to create a separate 'blog' page to be a behind the scenes home for our sidebar content and imagery.

A major perk of creating your sidebar: if you update your sidebar content or images on the blog we create, your changes will appear universally wherever your lovely sidebar exists 🙌.

To create a new blog for your sidebar, go to the Pages menu and scroll down to bottom section labeled Not Linked. "Not Linked" means the new page is not linked in the main navigation of the website, but everything is still live.

Click the + and add a Blog. Name your new blog Sidebar to keep everything crystal clear.

Screen Shot 2020-07-30 at 11.18.42 AM.png

Screen Shot 2020-07-30 at 11.21.34 AM.png

Step 3: Upload Elements

Click into your new 'blog' titled Sidebar and click the + to add a new post. Squarespace blogs auto-display in chronological order, so we'll add the last piece of our sidebar content first, so it displays at the bottom.

Instagram

First up, let's add our Instagram image and text. Under Content, type in the text you would like to show up below your image as the Title.

*Note: As we walk through the tutorial, you'll see only my headshot and Instagram image have titles, as I wanted these to appear with additional text. The rest (except for the accent) will be linked images without title text. Alright - let's dive in!

Screen+Shot+2020-07-30+at+11.25.19+AM.jpg

Next, click on the Options tab and upload your image as the Thumbnail Image.

Add your Instagram link under Source URL and tick the "Post Title should link to Source URL" box. This will allow the title and the image to become clickable links.

Click Save & Publish.

Screen Shot 2020-07-30 at 11.28.57 AM.png

Lead magnet

After the Instagram block, I added my lead magnet image and linked it to the sign up page for my email list. I didn't add a title to this section as I didn't want any text below.

category buttons

Next up are our category images and links. We'll add those one by one. I did not add titles for these either since I want the image to act as the clickable button.

Screen Shot 2020-07-30 at 11.41.12 AM.png

Screen Shot 2020-07-30 at 11.42.24 AM.png

*Repeat this exact same step for each button.*

Accent

The next piece of content we'll add is our accent and we'll add it in the same way. This will act as a fun flourish and divider between our headshot and category buttons. For this piece, we're going to leave the title section as well as the Source URL link sections blank since this piece is not acting as a button anywhere.

Screen Shot 2020-07-30 at 11.49.56 AM.png

Headshot

Finally, we're going to add our headshot plus a little text as the Title (I made mine "Hi, there! I'm Hannah) and a small blurb about ourselves in the Excerpt section. We'll link this piece of our Sidebar to our about page so our visitors can read more about us.

Double check the "Post Title should link to Source URL" circle is ticked to ensure your buttons link to the right page.

Screen Shot 2020-07-30 at 11.56.31 AM.png

Don't forget to click Save & Publish! At this point in the process you should be able to see all your sidebar elements lined up in the correct order within your blog.

If you accidentally added anything out of order, simply save them all to draft, and then publish them again in the correct order. Or you can manually change the dates; the one with the publish date furthest in the past will show up at the bottom of your sidebar.

Step 4: Add Sidebar to Blog Posts

Here's where the work pays off! Let's add our new sidebar to a blog post as a Summary Block and see it instantly populate with our new new content. At the top of your blog post click the hover and click on the black droplet and select Wall under Summary.

You'll be asked to choose a 'blog' to pull content from, click Sidebar then Apply.

Screen Shot 2020-07-30 at 12.21.45 PM.png

Screen Shot 2020-07-30 at 12.23.48 PM.png

Step 5: Some Quick Formatting

Under Layout, reduce the Gutter Width to 0 so your images are spaced properly.

Under Display, make sure tick the circles for Show Title, Show Thumbnail, and Show Excerpt. Select None under Primary Metadata.

Screen Shot 2020-07-30 at 12.31.05 PM.png

Click Apply and voila!

Simply click and drag it to the right or left hand side of your blog post. Hover over the dividing line between your content and sidebar and move it to the right so that it becomes narrower. When you're happy with its sizing, click Save and boom, you have a sidebar!

Bonus: How to Edit the Bio Text Style Using CSS

By default, Squarespace makes the excerpt font tiny, without giving us any Style Editor settings to make it any better. I've included a small CSS code snippet that is an easy tweak to editing the size of the excerpt font

                      .summary-excerpt                    p                    {                    font-size:                    18px;                    line-height:                    1.5em;                    font-weight:                    400;                    text-align:                    center; }

Create a Blog Template with Your New Sidebar

As a business owner, you wear a lot of hats! This means building time-saving processes is always a good idea. After all, time is the most valuable currency, right? A great way to blog without having to set up and format your sidebar each time is to use a blog template.

For tips on creating and using blog post templates in Squarespace, check out my post here.

Use Your Sidebar on Other Pages

I love they way a sidebar can look on a blog landing page as well. You can easily make a new custom archive-like page for your blog using an index with a grid summary to and add your sidebar there. Hit me up in the comments if you have any questions!