5 Ways To Use (+ Set Up) The Squarespace Summary Block

Squarespace is one of my favorite things, if you hadn’t guessed that before. I love it. It’s simple, it’s efficient, it’s got great support, it’s easy to pass off to clients, and it’s just a really nice tool for online business owners and bloggers.

I’m launching a little mini-series today all about Squarespace. Today we are talking about one of my favorite blocks in Squarespace: the summary block.

The summary block is incredibly useful and can be used to accomplish an incredible amount of tasks on your Squarespace site. Through my site I use a summary block on nearly every page and quite a few on the blog itself. I’ve got five ways you can utilize the summary block on your own Squarespace site and a walk-through on actually setting it up below.

Learn five great ways to use the Squarespace summary block! [Tweet That!]

---

BLOG ARCHIVES

Creating blog archives are a fabulous way to get traffic to your old posts and let people see everything you offer at once. I saw my old blog posts views skyrocket when I created and promoted my archives page (plus it makes sharing your content easier, no more shuffling through your blog to find a post). The initial set up, if you do it similar to mine, will take a little bit of time – but difficulty level is basically nonexistent.

First things first, decide how you want to showcase your different blog posts. I chose to do mine in date order, but you might choose to do it by category instead. Either way, this is where the time portion comes into play – you’ll have to revisit each blog post and make sure there is an appropriate tag or category on each post.

What I mean by that: my archive is my month/year, so each of my blog posts has a tag that says “September 2016” or “May 2016” or whatever month/year it was that I created the post originally. When I created my archive, I had to revisit old posts to add those tags. It’s not exactly difficult, but slightly time consuming (this is the sort of task I would do when I was watching The Bachelor or something – thoughtless, but time consuming).

You’ll also want to make sure that each of your blog posts has a thumbnail assigned to it, preferably one that is ‘on brand’ and has a unified, cohesive look. You wouldn’t want a random image to appear in your summary block/archives, but rather something that has the title on it and fits with your overall aesthetic.

As far as setting up the page, you’ll need to first create a new page (probably an unlinked page, so it doesn’t show in your main navigation). You can title it archives, or whatever you deem appropriate.

The summary block will be the main element in the page. All you do is click the teardrop shaped tool and scroll down to the third section titled “summary”. I prefer the grid for this, but there are options that you can choose between (another popular one is the ‘wall’ for a Pinterest-esque look).

A box will pop up with further settings. From here you choose where to pull content from (your blog) and some general visual settings (that you can see the changes in real time to determine what looks best). For me, I chose a square, since my thumbnails are always square. I also chose small text, center aligned, and no metadata to show. The important part comes near the end, under ‘display’. This is where I tell this particular summary block to only show posts tagged with whatever corresponding month/year.

If you look at my archive page, that might make more sense. But each section is a separate summary block (all with the same exact settings, but a different tag filter). I separate the months with a little design element, just to make it look nice and cohesive with the rest of my site.

---

RELATED POSTS

Another great use for the summary block is within your actual blog post. You’ll notice in all my blog posts, at the very end, there’s an area that says “you might also be interested in:” and four other related blog posts. This is created through a summary block within the actual post.

Having a related post section is a huge value; it leads visitors onto the next post and keeps them on your site longer. If you are writing stellar posts you want to keep that momentum going and have visitors stick around for as long as possible (and even become a subscriber).

Setting up the summary block to function in this way is similar to the archives page, except this time we are going to do it within a blog post. So, if you are in the blog post window (where you’d actually type in your content), those same teardrop shaped icons appear to the left. Clicking that brings up the same options for adding different blocks, and the third section will be a summary block.

For my own blog posts I again use the square ratio, small size text that is centered, and show no other information or meta data (just the title and thumbnail). I use the grid here too, but carousel would be another great option if you wanted to show a lot of relevant posts (I only show 4). This time I use the category filter and only show related posts by category (so if the post is about social media, the related posts will be ones that I’ve categorized as social media posts as well).

---

TOP/FEATURED POSTS

In a similar fashion to the previous two examples, we can set a filter for a tag or category that you’ve created to mark your top posts. This again might take a little bit of time to travel back to posts that have done exceptionally well or you’re particularly proud of and tagging them accordingly. I tag mine as “top posts” (very original, I know!).

It’s a common idea to place this summary block into a start here page, a 404 page (learn more about customizing your 404 page here), or into your blog sidebar. Another common place would be a start here page, where I would use a carousel block to best showcase multiple posts.

I would use a carousel block because it easily shares more posts, but still could be designed as a small section that doesn't feel overwhelming or too distracting. The carousel option adds left/right arrows to allow visitors to scroll through however many posts you decide to share.

It might seem slightly overwhelming to go through and manage all the settings for each summary block – but once you know the settings that best fit your visuals, it will become second nature very quickly. If you generally make your thumbnails more vertical, you’ll use a different ratio than me. If you want to include the date or an excerpt for posts, you’ll toggle that information on.

---

PORTFOLIO PAGE

If you have a portfolio of work you can use a summary block to link to the individual pages or posts that showcase the work. Here’s how my portfolio works:

I have a separate blog that doesn’t have a sidebar and functions as my “portfolio posts” with each client’s work as a separate post. The link that I direct people to for my portfolio functions similar to my archives page, except it pulls content from my “portfolio blog” versus my normal blog.

You can do this too! Squarespace allows you to have multiple blogs. So, if you have any sort of client work to showcase or a need for some sort of portfolio, I recommend creating a secondary blog (instead of separate pages – keep your page count lower), and go through the same steps as we did in the archive page. The difference might be in how you display the thumbnails (I made the thumbnails larger), but you can edit that easily within the settings.

---

A FAUX “READ MORE” BLOG

This is very similar to an archive page too, but sometimes I have clients that want to create a blog that uses excerpts and “read more” buttons. Although Squarespace templates definitely allow for that (you just need to actually add the excerpt for it to toggle that feature ‘on’ – under the options setting within individual blog posts), there are some limitations within certain templates. The main limitation is whether or not the thumbnail or blog post graphic will show.

After hitting that bump a few times, I figured out a way to create a faux “read more” page for blog posts. This is set up exactly the same to an archive page, except I use the “list” option so that the page follows a more traditional blog look. The excerpts are added manually within each blog post, and the only settings difference is I turn the checkmark on to show excerpts and I don’t use any sort of category/tag filter (so all the posts show).

If your template doesn’t allow you to turn on a sidebar on regular pages you can go through the steps of manually creating a sidebar that is the same as your actual blog page (by using the teardrop icon to add the different elements and then drag/dropping/resizing it to be the same size).

---

---

Create Optimized + Shareable Pins For Pinterest

Pinterest is the favorite tool for many bloggers and online business owners. It’s a powerful social media platform that works as a search engine and drives people to your website – if you create the appropriate graphics and pins.

In The Shop (launching September 1) you can get high quality but affordable templates for blog graphics that will work amazingly on Pinterest. Follow this guide with your new templates to create Pins that will boost your blog views and make Pinterest your number 1 referral site in no time! 

In the meantime, here’s the anatomy of a perfect Pinterest pin in five easy steps.

---

VERTICAL

First and foremost, make pins vertical. Think about how you actually use and view Pinterest: it’s a grid that you scroll down through. Vertical images take up more real estate in that regard and will be seen for much longer of a ‘scroll’ than horizontal ones. The same applies with using Pinterest on your phone or tablet. Vertical = better.

The width of a pin is best at 735 pixels, though the height can be whatever you choose (most people’s come in somewhere around 1100px, though I know there are some pins that are much longer). In The Shop I’ve created templates to get you started creating your own Pins that have varying lengths so you can test out what works best for you. ** Updated in 2018: the new recommended size is 600x900 pixels!

Action Item: if you have old pins circulating on Pinterest that are more horizontal than vertical, take time to create new images for them and start getting those out there too. It’s definitely okay to have multiple pins (and images) per blog post, so unless your old pins are drastically underperforming, I’d leave them up. Chances are your newer, more optimized pins will start getting more re-pins, likes, and click-throughs a lot quicker and the older pins will start to fade away.

---

LARGE READABLE TEXT

In the actual Pinterest image you create the text should be large and readable, to quickly gain attention of someone scrolling through their feed. What I mean by this is:

leave the curly, swirly, elaborate fonts alone and pick something that's easy to read for Pinterest [Tweet That!]

In my own graphics I like to emphasize parts of the title of blog posts by bolding a portion of the title that is most important (like the words ‘business’ or ‘branding’). I also include a small detail that shows if there is some sort of free download, like a worksheet or checklist, to gain attention and build the probability of a click-through. 

From a branding standpoint, I need to make sure I take a moment and tell you to use consistent fonts, colors, and styles on your graphics so that you begin to make a cohesive presence on Pinterest and become quickly recognizable by someone seeing multiple pins from you.

Action Item: Look through your old pins and evaluate if the text is large and readable or if you need to create newer, more legible graphics.

Are your current pins all unified enough that they’re obviously from the same blog or business? [Tweet That!]

---

USE RICH PINS

Rich Pins are an awesome and easy way to direct more people to your website and give a more polished, professional vibe on Pinterest. What are rich pins? They’re the small details you see beneath pins (you’ll see them beneath my pins) that include your website name and favicon, as well as the blog post title and description.

Rich pins are awesome from a visual standpoint, but they also make it easier to get noticed during a scroll, which in turn can lead to more click-throughs and traffic to your blog. You’ll end up taking up more vertical space and having more of an opportunity for key-word rich descriptions.

Action Item: Get rich pins set up on your blog ASAP. Squarespace makes this SO easy. After you’ve connected your Pinterest account under settings>connected accounts you can head over to this validator and put in one of your blog posts to enable it. No code necessary!

---

SEO-FRIENDLY DESCRIPTION WITH CTA

Besides the actual pin itself you want to spend time crafting a great description that is SEO-friendly (Pinterest is a search tool first and foremost) and includes some sort of “Call To Action” to help people want to click through.

I usually say something like “Click through to read the five ways to best optimize your Pinterest graphics (and get the free download)” at the end of the description because that’s straightforward and has some more key words in it. I’ll include my website name and small mention of what I do (like “Branding Design + Strategy”) just to set people up for what they will see when they travel to my site.

As far as the rest of the description, it’s usually some portion of the beginning of my blog post, because I’ve already worked to get some key words in there. I don’t try to make it more work on myself – work smarter, not harder right?

Action Item: Go through old blog posts and update the description that will show up when someone pins your blog post (In Squarespace it’s either the caption you use, or the “filename” field if you don’t use captions). That way, from here on out anytime someone pins your blog post they are adding your new, updated, awesome description. If you are feeling really productive then go and update some of your pins on Pinterest (I’d start with the ones from your website’s content board, since that’s probably where a lot of re-pins come from).

---

MAKE SURE YOUR LINK WORKS

Lastly, the best-optimized pin is a pin that actually leads to the blog post you say it will. Nothing makes me sadder than thinking I am about to read some awesome post I found on Pinterest to find it only leads to www.whateverwebsitetheysaid.com/blog and shows their latest blog post instead. What a buzzkill!

Branding is all about creating an experience and that’s a bad first impression that someone could have with your business. Make a habit of double checking yourself when you pin from your website!

Action Item: On your website’s content board, at least, go through and check your pins and make sure all the links are correct. If they aren’t, take time to edit and correct the link!

---

---