How to design your blog page

Design your Blog page

If you are starting a blog for your website or adding one to an existing website, it’s helpful to review your choices for your blog page’s design. Most websites can include a blog, including my favorite DIY platform, Squarespace.

First, the terminology: Blog, blog page, blog post

A blog is a collection of your original writing, photography, or other expressions of your knowledge and ability. The blog can be creative, instructional, or motivational, but serves to establish your credibility and expertise in your field. The collection is stored with your website and complements the design and purpose of your website. It also suits the interests of your audience. You build a blog over time by writing blog posts regularly (as much as once a week or as infrequently as every few months). As you create blog posts and build the collection, the blog also helps your website rank well in search results and generates customer leads.

A blog post is an individual piece of writing or journaling about a specific subject. The blog post has a title, some text, perhaps some images, a publishing date, and some other information unique to that blog post. When you publish the blog post, it becomes part of your blog.

The blog page is a special page you add to your website that organizes and displays blog posts. You must create a blog page before you can create blog posts. When you open the page in your website editor, you can create or edit blog posts. When your website visitors open the blog page in a browser, they see your blog posts within the blog page you’ve designed.

Squarespace has many choices for blog page design

If you know your blog is going to be an important part of your website and you haven’t chosen a website platform yet, I recommend going with Squarespace. A blog page on Squarespace can show blog posts as summaries and gives you some attractive options for arranging the posts. Visitors click a link from the summary to read a full blog post.

Sample Squarespace blog page designs

Examples of Blog Page designs on Squarespace

Are you using Squarespace 7.1 or 7.0?

If you don’t know if you are running your website on Squarespace 7.0 or 7.1, see this article. If your website was created before 2020, chances are you’re on the older version, Squarespace 7.0.

Naming your blog page

A blog page is shown as part of the navigation at the top of your website, along with other pages, such as Home, About, or Contact. It’s usually listed after the pages you most want people to see first, such as Products or Services. When you create your blog page, you name it with the label that you want people to see in the navigation. Often the page is simply called “Blog,” but you can change that name to be more specific to your website, such as “Inspiration,” “Journal,” “Tips,” or “News” as long as your audience knows what it will contain.

Creating a Squarespace 7.1 blog page

All templates in Squarespace 7.1 have the same blog options. Start by creating a new page of the type “Blog.” Choose the way that your blog posts will be summarized.

  • Blog 1 - Posts listed one after the other (Single Column Blog)

  • Blog 2 - Posts with images of the same size shown in columns and rows in a grid (Basic Grid Blog)

  • Blog 3 - Posts with images of different sizes shown in columns (Masonry Blog)

  • Blog 4 - Posts with images in the left column and the blog title on the right (Side by Side Blog)

Give the page a name and move it to the appropriate place in the Pages list so it shows in the navigation in the correct order.

Add extra sections on the Blog page

You can add a section to the page to appear before the blog post summaries if you want to add a description or introduction.

You can add a section after the blog posts to include a call to action.

Customize the settings

In the Blog Settings, you can determine how many blog posts show on the page before a visitor has to use a Previous or Next link. You can add up to 20 at a time.

Click back to your website Settings - Blogging section to set up additional preferences. You can:

  • Select “Use Simple Liking” (recommended).

  • In Comments settings, allow comments of different types and optionally require approval.

Squarespace 7.1 blog format examples

Example of a Single Column Blog - Squarespace 7.1 Paloma template

Example of a Masonry Blog - Squarespace 7.1 Stanton template

Squarespace 7.1 Basic Grid Blog image

Example of a Basic Grid Blog on my website

Other examples

Hester template (click to see the example) - Basic Grid style, two across

Colima template (click to see the example) - Grid style, layout of Alternating Side by Side Blog. (This additional style is set in the Layout section when editing your Blog page.)


Creating a Squarespace 7.0 Blog page

Choose a template

Squarespace 7.0 templates allow for blog pages that show post summaries as a grid (rows and columns) or a stacked list (summaries shown one after the other). To have a choice of a grid or a list for your blog page, choose a template from the Brine, Tremont, or York families, as described in this Squarespace help article. I recommend choosing a template from the Brine family because you’ll get the most design choices overall for your website. If you have already have a template, you can only use the blog page style(s) available for your template. To check the blog page styles for your template, see this Squarespace help article.

Create the Blog page

Start by creating a new page of the type “Blog” and giving it a name in the Page Settings box. Move the new page to the appropriate place in the list so it shows in the navigation in the correct order.

Set the style of blog summaries

With the Blog page open, click back to Design, then Site Styles. Scroll down to the Blog: List section. Select Style: Grid for the grid layout or Style: Stacked for the list layout if it’s available for your template. There are many more options for each type of style, as described in this Squarespace help article. I recommend: Grid Style with Image shown.

Customize the banner

If your website has an image banner at the top of every page, return to the Pages editor. Open Blog Settings and select Media. Then add the image you want. You can also add a Page Description in Blog Settings - General, which will show up as text with some templates.

Customize the settings

In the Blog Page settings, you can determine how many blog posts show on the page before a visitor has to use a Previous or Next link. You can add up to 20 at a time.

Go to your website Settings - Blogging section to set up additional preferences. You can:

  • Select “Use Simple Liking” (recommended).

  • In Comments settings, allow comments of different types and optionally require approval.


Adding a sidebar of repeated information

If you are using Squarespace 7.1, you can’t add a sidebar unless you purchase and set up a plugin, like the one from SQSPC Themes. A Squarespace developer I follow, Kerstin Martin, outlines the full steps here. She also cites a lot of reasons why sidebars are a good idea.

The sidebar option is available for some templates in Squarespace 7.0 to allow you to add a repeated set of links and text.



Kerry A. Thompson

You don’t need a big agency to get your website done. You just need the one right person. I offer Squarespace website design and content development services for creatives, coaches, and healers. Learn more in a free 30-minute consultation.

Previous
Previous

Three keyboard shortcuts for fixing your text bloopers

Next
Next

Button up your site with SSL