My Top 6 Blog Design Tips for Squarespace

So you’ve started blogging with Squarespace, that’s awesome! It’s so simple, right?

Related Post > How to Start a Blog With Squarespace

But if you’re new to the platform, you might not be making the most out of the blog design features. I love blogging with Squarespace because you design your posts just like any other page, aka, you have complete creative freedom!

You can add blocks literally anywhere, which makes your blog posts super customizable. Today I’m going to share some tips on how to use different blocks and design features to make your blog posts look extra professional and keep readers coming back to your blog!

 
 

1. design In The Visual editor

First thing’s first, make sure you’re designing in the visual editor, not the pop-up module, this will save you a huge headache trying to get things to look right!

When you first add or click ‘edit’ on your blog post, it will open up this pop up module:

 
Blog Design Tips in Squarespace
 

This pop-up box controls a lot of your blog settings, so it’s really important.

But when you’re actually adding text and images to your post, this isn’t the best place to do it.

  • I recommend entering all of your details (name, categories, thumbnail image etc) and the saving (not publishing) your post and exiting out of this pop-up box.

  • Now you’ll want to click on the post name (in the lefthand sidebar—see visual below) and it will open a preview of the post on your page.
    Note: this can be a bit glitchy sometimes, if it’s not doing anything when you click on the post, just refresh and click on it, now it should work!

  • Now you can view your visual blog post preview to the right of the sidebar. If you hover over the page you will see the grey box that says Edit, click this!

 
How to Start A Blog with Squarespace16.png
 

I recommend you add all of your images and text in this visual editor, rather than in the pop-up box. It will make it SO much easier to see what you’re doing and to see what the final post will actually look like.


2. position Your images

You might already know how to add images to your post: click on the black line that shows up when you hover (as seen below)

 
Screen Shot 2018-11-05 at 7.12.34 AM.png
 

Then choose image from the list of block options:

 
 

What you might not know, is that you can position these images anywhere you want on the page.

There are two options for positioning: Side by Side or Text Wrapping

  • Side by Side: To position your image next to any other element, all you need to do is click and drag your image until you see a vertical black line. Wherever this black line appears is where your image will be dropped.

    This is what image and text side by side looks like:

 
Screen Shot 2018-11-05 at 7.22.02 AM.png
 
  • Text Wrapping: Creating a text wrap around your image is a great idea for blog posts, as they are usually very text heavy. Just click and drag your image over your text box until a grey box appears. This grey box indicates where your image will be placed.

    This is what a text wrapped image looks like:

 
Screen Shot 2018-11-05 at 7.21.50 AM.png
 

With either the Side by Side or Text Wrapped images, you can then hover over the edge of the image and use the drag tool to make it bigger or smaller.

 
Screen Shot 2018-11-05 at 8.43.10 AM.png
 



3. Crop and Focus your Images

Click and drag this little dot up or down to crop your image

 
Screen Shot 2018-11-05 at 8.46.56 AM.png
 

Hover over the image and click Edit. Click and drag the image focal point to adjust where your image crops to. (If your image isn’t cropped, you probably won’t be able to see any changes when you adjust this point.

 
Screen Shot 2018-11-05 at 8.50.00 AM.png
 



4. Adjust your Column Width

When you’re designing your blog post, consider narrowing your column of text. It’s been proven that when paragraphs of text are too wide, they are harder to read.

An easy way to do this is to add spacer blocks of either side of your text.

This is a blog post that has a really wide column of text:

 
 

This is a blog post that has a narrower column of text, by adding spacer blocks on either side:

 
 


5. create hierarchy with your text

Squarespace makes using headings really easy. Just use the text editor to switch between different headings when you’re editing your text.

 
 

Make use of these headings when writing our your blog posts. Use different headings to break text up and draw importance to different things.

I also recommend using line breaks, bullet points and numbered points.


6. Keep your text left aligned

This is something a lot of new web designers seems to get wrong. When you’re writing paragraphs of text (so, blogs), make sure they are left aligned and NOT center aligned.

Centered text is harder to read and looks unprofessional.


 

Related Posts