Customize your site’s blog pages with formatting and layouts.

Blog pages are landing pages that link visitors to individual blog posts. You can customize blog pages to match your brand and style. Use this guide to find the style options for blog pages and their individual posts. To create a blog page and add posts, visit Blogging with Squarespace.

This guide focuses on version 7.1 blog pages. In version 7.0, each template has its own blog layouts and styling options. To learn more, review Style blog pages on version 7.0.

Open the style options

Blog pages are organized in two parts: the blog landing page, which creates a layout of post previews that visitors click to open posts, and the individual posts where you add your blog's content.

You'll style the blog page and blog posts in two main places:

• Blog landing page - Click Edit on the blog page, then click the pencil icon on the blog section
• Blog posts - Click any post on the blog page to open it, click Edit, then click the pencil icon

Blog page layouts

Your blog's landing page is also your blog section. It displays previews of your posts, which visitors click to open individual posts.

After opening the blog section styles, click the Layout drop-down under Format to select a layout. Blog page layouts are either grids, where post previews display in multiple rows and columns, or stacked, where posts are stacked in a single column. Choose from:

• Basic grid blog - A grid layout where featured image aspect ratio is fixed, creating a uniform set of columns and rows.
• Masonry blog - A grid layout where featured image aspect ratios aren't cropped, giving the rows and columns a mosaic look. Depending on your device, featured images may appear out of chronological order to ensure the best fit.
• Single column blog - A stacked layout where featured images display above post titles and other metadata in a single column.
• Side by side blog - A stacked layout where featured images display beside the post titles and other metadata on a fixed side.
• Alternating side by side blog - A stacked layout where featured images display beside the post titles and other metadata on alternating sides.

Each layout has its own styling options. Those settings apply to all blog pages using the same layout on your site.

Keep in mind:

• These changes affect all blog pages using the same layout.
• Changes made to a layout are saved when you change to a new layout. If you return to the previous layout, your settings will be restored as long as you haven't edited that layout on another blog page.
• Most layouts don't show the full blog post on the blog landing page. To show the full content of every post, use the Single Column layout and set the Content Display to Full Post.

Formatting options

After selecting a layout, set the following options in the Format tab. Depending on the layout you choose, some options may not appear. For example, only the Basic Grid and Masonry layout have column settings.

• Width - Select Full for the content to span the width of the section or Inset to increase the padding to the left and right of the content.
• Columns - Set the Basic Grid or Masonry layout to have 2, 3, or 4 columns.
• Horizontal Spacing - Available for Basic Grid and Masonry layouts
• Vertical Spacing
• Image Placement - Set the featured image to appear Above or Below the post title and metadata.
• Aspect Ratio - Set a standard shape for featured images.
• Image Spacing
• Text Alignment - Align the text Left, Center, or Right.
• Image Text Alignment - Align the text with the Top, Middle, or Bottom of the featured image on Side by Side layouts.
• Excerpt - Set excerpts to Show or Hide. Add excerpts in each post's settings.
• Read More Link - Lets visitors know there's more content beyond the excerpt.
• Title Spacing - Set the spacing between the post title and the excerpt.
• Text Content Width - Set the width of the text content for Basic Grid and Masonry layouts.
• Read More Spacing - Set the spacing between the excerpt and the Read More link.
• Meta Position - Set the metadata to display at the Top of the text content or Below Excerpt.
• Primary Meta Data - Set what metadata displays first. You can choose Categories, Date, Author, or None. The date displays in MM/DD/YY or DD/MM/YY depending on your site language.
• Secondary Meta Data - Set what metadata displays second. The options are the same as primary metadata.
• Meta Spacing - Set the spacing between the metadata and post title.
• Delimiter - Select how to divide the primary and secondary metadata. To learn more, review Delimiters.
• Content Display - For the Single Column layout, set what text content displays with the post. Choose Title Only, Excerpt, or Full Post. Add excerpts in each post's settings.

Blog posts

Blog posts use our classic editor, where you'll add and arrange blocks.

After opening blog post style options, you can change the following settings:

• Format - Set the spacing and metadata display. All blog posts on your site, even on different blog pages, share these settings. Review the full list of tweaks below.
• Color - Set your site’s colors or change the blog’s section theme. To learn more, review Blog page colors.

Blog post formatting options

Every post on your site, even on different blog pages, shares these settings. If you make a change on one post, it applies to all other posts.

• Content Width - Set the width of the post content to Narrow, Medium, Wide, or set a Custom width.
• Text Alignment - Align text Left or Center.
• Meta Position - Set the metadata to appear Above Title or Below Title.
• Show Categories - Enable to show categories added to the post.
• Show Date - Enable to show the publication date of the post. On individual posts, only the month and day appear. It's not possible to display the year on posts, but the year appears when the date is visible on the main blog page.
• Show Author Name - Enable to show the post author.
• Show Author Profile - Enable to show the author profile below the post content.
• Delimiter Style - Select how to divide metadata. To learn more, review Delimiters.
• Header Spacing

Delimiters

When displaying metadata like dates, author names, or categories on your blog, you can add "delimiters" or punctuation to visually separate the metadata.

To select or hide the delimiters:

1. Click Edit on the blog page or post.
2. Hover over the blog section or post and click the pencil icon.
3. Under the Format tab, click Delimiters.
4. Select one of the options, or choose None (on blog pages) or Space (on blog posts) to hide them.
5. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Blog page fonts

Fonts on blog pages and blog posts follow your site-wide fonts. To change them, click Edit on a blog page or post, click the paintbrush icon, and click the relevant font style. To change what style a specific text element follows, or to style it independently from your site-wide fonts, click Assign Styles. 

Review the list below for the tweaks in Assign Styles.

Main blog page

Each blog layout has separate font styling options. Under the blog layout in Assign Styles, use the following tweaks:

• Title
• Excerpt - Read More links also follow these settings 
• Meta

Pagination links at the bottom of the main blog page follow your site's Paragraphs styles and Paragraph 2 size. It's not possible to change this.

Blog posts

All blog posts on your site share the same styles. Under Blog Post in Assign Styles, use the following tweaks:

• Title
• Meta
• Author Profile
• Pagination

Blog page colors

After opening the style options for your blog landing page or a blog post, click Colors to change the colors for your blog page and posts.

To change the blog page colors, select a new color theme. Your blog page and all its posts share the same color theme, so changing the blog page's theme also changes the theme of its posts, and vice versa.

To change individual colors in your selected theme:

1. Click the pencil icon next to the theme name.
2.  Scroll down to the Blog tweaks for your layout and the Blog Post tweaks, then click the tweak you want to change and set a new color.
3. Other elements on your blog page follow site-wide styles. For example, most text follows the colors under Text. Changing these colors affects all sections using the same color theme throughout your site.

Keep in mind, the colors in your themes are set by your site's color palette. If you change your palette, it may change your color themes, too. To learn more, visit Changing colors.

Style blog pages on version 7.0

Template families on version 7.0 each have unique blog layout and styling options. To learn more about your blog options, visit your template family's guide:

• Adirondack
• Avenue
• Aviator
• Bedford
• Brine
• Farro
• Five
• Flatiron
• Forte
• Galapagos
• Ishimoto
• Marquee (discontinued)
• Momentum
• Montauk
• Native
• Pacific
• Skye
• Supply
• Tremont
• Wells
• Wexley
• York

To compare layouts and features for each family, visit our template comparison charts.