Squarespace blogging: Creating a beautiful Pinterest-like blog grid

I love how beautiful and elegant Squarespace's templates all are.  And the native blogging pages are no exception.  However, sometimes you want to have a bit more control over how your blog posts are presented -- and it can also be useful to know how best to use categories and tags to help your viewers navigate your blog posts more easily.  And one of the trendiest ways to do this these days is by creating a lovely grid of blog post thumbnails!  This tutorial will take you step by step through this relatively simple process.

Blog summary grid presentation | Christina Keddie Photography | Squarespace web design tutorials

PREP WORK: CATEGORIES AND TAGS

To take the fullest advantage of the power of Squarespace's summary blocks, you'll want to have your blog posts tagged with relevant categories, and possibly also tags.  Personally, I recommend using the categories as your higher-order organizing system, and the tags as your more scattershot, one-off, SEO-friendly system.

For instance, my photography blog has categories like weddings, engagement, events, maternity, and family.  These categories are a set system of labels that fit my photography business, and they're the ones I use to create separate blog pages.  My tags are much more scattershot -- I often use the venue name, the specific city, the type of party, etc., as one way to add more SEO-friendly internal links to each of my posts.

For the purposes of this tutorial, make sure that you at least have a basic system of categories in place on your blog posts.

STEP 1: CREATE INDIVIDUAL BLOG CATEGORY PAGES

On your Pages menu, scroll all the way down to the Not Linked section.  We'll be creating new pages in this section, and will wait to pull these pages up to your navigation after they're fully ready to go.

Creating a new unlinked page for blog summary | Christina Keddie Photography | Squarespace web design tutorials

Click the + button next to the Not Linked title, and choose a basic Page.  This Page will be the public face of your new blog (or blog category, if you're creating separate pages for each category), so give it an appropriate page title and URL slug.

Create new unlinked Pages for each blog category section you'd like to create.

STEP 2: THE MAGIC OF SUMMARY BLOCKS

On your new Page, insert a Summary Grid Block (for an evenly spaced grid of thumbnails; feel free to play around with the other summary block options to see what look you like best!):

Summary block options for Squarespace blog presentation | Christina Keddie Photography | Squarespace web design tutorials

Once your block has been inserted, the settings dialog box for it will pop up, and here's where the magic happens.

Important Tip: as you're changing the settings for the summary block, all of your changes will happen in real time in the preview behind the box.  You can click near the top of the settings box to drag it around the screen if you need to see the section of the page right behind it!  Be sure to watch the preview as you're working.

On the first screen, choose the content source for this summary block -- that is, the specific blog Page that you want to pull from.  Then click over to the Layout tab.  This tab is where you can set up the exact look of your new blog page grid -- the aspect ratio (shape) of the thumbnails, the size of the spacing between each thumbnail, the font size, etc.  For what it's worth, these are my settings, but play around with them until your page looks exactly as you'd like it to!

Aspect Ratio: 1:1 (Square)
Column Width: 270
Gutter Width: 25
Text Size: Small
Text Alignment: Center
Metadata Position: Below Title

Finally, click over to the Display tab.  Here, you can set the number of thumbnails on the page, what content to display, and, importantly, the specific category of the blog that you'd like to display on this page.  Again, play around with these settings until you get the summary block looking as you'd like.

And that's it!  Squarespace makes it so easy to design things beautifully and well.  :)

STEP 3: ADD TO YOUR SITE NAVIGATION

Once you're done with your new blog page(s), you're ready to make them go live on your main site.  Simply drag them up from the Not Linked section up to the appropriate spot in your Main Navigation.

On my photography website, I've created a dropdown menu from my main nav bar with all my blog categories as individual links.  The dropdown menu item is created via a Folder in my main navigation -- add a new page, and choose the Folder option, and give it an appropriate title ("Blog," "Recent Work," etc.).  Then drag and drop each of your new blog category Pages into that Folder.

Hopefully, this little tutorial shows just how simple it is to create a beautiful Pinterest-inspired grid for your blog pages!  Feel free to contact me with any questions!

6 Comments