How I Took A Meh Squarespace Template and Made it Unique. FREE Workbook Included!

how-i-edited-my-squarespace-site.jpg

Note: my template has changed since writing this post. You should still get some good ideas from it for your own template. 

If you are looking for a Squarespace template that not only looks stylish but converts then check out Square Your Bizz. 

 
 

I love Squarespace for so many reasons, I could and probably will write a blog post on it one day. While Wordpress has some great plugins and themes, I kind of wanted to keep things minimal with this blog, so I went with Squarespace. And although Squarespace is great for keeping things simple it's always good to have a blog that doesn't look like everyone else who uses Squarespace. Below I'll show you how I took a meh template and made it unique.

Choosing a template 

When I first started out I 100% knew I wanted my blog to have a sidebar and if you know Squarespace then you know not every template caters to the sidebar. After exploring the templates I decided to use the theme, Ishimoto. It look liked it had the potential to achieve what I was after. 

Ishimoto.jpg

Let's dig in shall we?

Navigation and header design

I wanted the nav bar above my logo. I also wanted the logo in the centre of the header and not off to the side like in the demo. 

Before

header2.jpg

After

header.jpg

Let me show you how I got this snazzy new look.

navigation.jpg

First I went into Design>Style Editor. I made sure the 'top navigation alignment' was set to centre. I also made sure the 'top navigation position' was set to above banner. Everything else here is personal preference, including font choices and colours, so go wild!

header.jpg

As for the header, where my logo lives, I made sure the 'banner content' section was set to empty. This will allow you to centre your logo. Also, if you notice your logo is looking a little on the stretched side make sure 'stretch page thumbnail' is turned off.

Adding a second navigation menu

Oh hey, did you know you can have TWO nav bars with this theme? Sometimes just one nav bar ain't enough, you know? Let me show you how I accomplished this.

secondnav.jpg

This theme allows for Blog Header Content, which allows you to add just about anything your heart desires. I chose to use this area as a second nav bar on my blog where the categories will live. Cool huh?

secondnav2.jpg

To make this happen I clicked 'edit' in that grey box that says 'BLOG Header Content.' 

secondnav3.jpg

Next I Clicked 'text' and typed in my categories. I spaced the words out nicely and centred them so they weren't crowded together. Once I had them laid out, I selected one of the typed out categories and turned it into a link that is connected to the appropriate category.

secondnav4.jpg

How do you link it to the appropriate category page? Easy peasy, friend. 

secondnav5.jpg

When I clicked the link button, like we did above, I made sure to select 'content' then select 'blog.' It's here you can see the option to choose 'category' or 'tag.' Whenever I write a blog post I make sure to properly categorize my post (you can add the appropriate category or tag at the bottom of your post) and it will automatically be placed in the correct category. You can use this are for just about anything including summary blocks, images, a newsletter box, etc. 

Featured blog post

Another thing I wanted for my blog was a big ol' featured post above my other posts. Can you guess what section I put this in? Ding, ding, you got it! The BLOG Header Content. The same place we put the second nav bar. 

To achieve this look I selected the 'grid' summary block, although you could probably use any of them. 

secondnav6.jpg

After I selected 'blog', it looked something like this..

featuredpost.jpg

In order to get the post to fill the whole width make sure the column width is set all the way to 600. You can also bring the gutter width down to 0 since there's only the one post. 

featuredpost2.jpg

If you scroll all the way down in that box you can find more options. I prefer the text large in this box, so I switched it from the default medium. 

featuredpost3.jpg

Next I clicked on 'display' in the box to customize a few more things.

featuredpost6.jpg

I set the number of items to 'one' so just the one post appears. You can also choose if you want to show an excerpt or the date. Finally, if you scroll down in the box you can chose if what content you want the featured post to show. 

The Ishimoto theme also has a BLOG Footer Content area that sits above the footer. In this section I decided to put a summary block for my 'don't miss these posts.' When writing this post I only had the one post on my blog but soon 3 posts will live there in a grid format.

dontmiss.jpg

I then hit the 'edit' button in the grey box shown above, and set the summary block to show 3 posts.

dontmiss2.jpg

I only wanted the post title visible so I disabled the date and excerpt. Again, this is all personal preference. 

Sidebar

My sidebar is pretty basic, but that's okay. You don't want a cluttered sidebar anyway. I just filled the area with Squarespace blocks including, an image of me, a short bio, social icons, a newsletter box, Instagram feed, and finally a popular posts area. 

sidebar.jpg

In order to get the popular posts section you just need to pop in a summary block and connect it to your blog. You can decide what posts you want to feature. 

sidebar2.jpg

If you haven't already noticed the Squarespace summary block is a magical thing. 

And there you have it friend, a walk through of how I set up my Squarespace blog. If you have CSS knowledge you can continue to make changes using the Custom CSS editor in the design section. 

While Squarespace doesn't have all the bells and whistles that Wordpress has that can be a good thing. Less is more in my opinion. And if you are looking to make your site a little more original I suggest checking out: http://squareplugins.com. They plenty of free and paid plugins for Squarespace. 


I hope this post was helpful and taught you a few new things that you can do with Squarespace. Having a well thought out blog layout is not only nice to look at but it provides your reader easy eye movement. You don't want to distract your reader toooo much so avoid adding anything that isn't necessary. 

Now it's time for you to take action. I've included a free blog layout workbook! Download this baby and start reevaluating your blog layout. The workbook is 7 pages and includes, questions, a sketch area for your ideas, and a checklist. 

I would love to see your workbook photos so please use the tag #forthandworkbook :)

Talk soon,

Meagen