Formatting Blog Posts in Squarespace 7.1
TL;DR
Blog Posts in Squarespace 7.1 use the Classic Editor, not Fluid Engine. This post details the ins and outs of how to use the classic editor to streamline the formatting of your blog posts.
If you are accustomed to using the Classic Editor, you will know exactly what to do! But if you’re new, these tips may save you from frustration.
The biggest advantage of Squarespace 7.1 and Fluid Engine is having the ability to style your website specifically for mobile; however, blog posts do not use Fluid Engine, they still use the Classic Editor.
So if you’ve become used to overlapping elements and blocks, moving items around freely on the grid, etc. you may become a little frustrated with blog post formatting if you’re not used to the Classic Editor.
Blog Post Formatting for Desktop View
Here we’ve used Squarekicker to fill each spacer block with color to make them stand out.
Stick to One- or Two-Column Layouts
While all 12 columns are available on a Desktop View, we suggest keeping your post to a single column whenever possible – unless you’re okay with the columns stacking from left to right on mobile view (this means the left column will stack on top of the right column into a single column on mobile view)
Here’s an example of using a 2-column layout to break up long bulleted text compared to a single column.
Using two columns of text to break up this long list
Creating Space and Adjusting Widths of Blocks
In Fluid Engine, you’re able to adjust the width and height of the majority of individual elements on web pages. But in a blog post, if you insert a block, the only way to adjust the width is by sandwiching it in between spacer blocks.
This video starts at the exact moment you can start dragging elements around to create columns. (This is being demonstrated in 7.0 so some things may look different, but the principles are the same).
Skip ahead to the 0:10 second mark
Blog Post Formatting for Mobile View:
Mobile View Only Has One Column
Simple enough right? The Classic Editor will default all elements on the page from left to right in the stacking order. Because blog posts are usually text-heavy, it makes sense that Squarespace kept blog posts in the Classic Editor style for this reason.
Spacer Blocks Are Removed on Mobile Layout
Since mobile layout defaults to a single-column layout, spacer blocks aren’t necessary – except for one use-case scenario: adding spacing above and below links.
At the end of this blog post, I have added resource links to Squarespace Support Articles related to the items being discussed. But, if I were to have a line of text linked to one article and a new link on the next line, the spacing often isn’t adequate enough for a mobile phone. (Think about your fingers trying to tap on one link and getting frustrated because you ended up clicking another link that was too close).
Instead of inserting a Line block in between, I have a hard return in between the lines of text to create space.
And, yes, Google will ding you for this since it negatively impacts user experience!
Since you can’t use spacer blocks for this specific issue, instead, use the button block, or add a divider line block between each text link. In this case, I need more text describing the link (this is called anchor text), so a button isn’t going to work well for this.
Before you begin formatting your blog post, always, always draft your content in a Google doc, word doc, any other text editor. Composing content directly in a blog post is ill-advised as you could have a random glitch and lose all of your content!
By formatting your content in a text editor, you can plan out your content, graphics and image placement, and more.
Overview of the Classic Editor
Adding blocks in the Classic Editor is a bit different – you will be using “insertion points” to add blocks at various points on the page. In this example blog points, you will see the blue plus signs indicating where you can insert a block.
Clicking on any of the blue plus symbols will enable you to insert any block type.
Creating Pull Quotes
Highlighting specific text as a Pull Quote is a great way to add visual interest to your blog!
Here’s an example of what a Pull Quote can look like (note – you can add any text styling you want just like any text block).
This video will show you how to create a pull quote. The video is using Squarespace 7.0 but this still applies to Blog Posts in 7.1 because they use the Classic Editor.
Placing Images
There’s more than one way to go about adding images and how they are “placed” on the blog post page.
Just like the Pull Quote, you can drag images to be placed amongst the text. This causes the text to wrap around the image. Below is a screen capture comparing how an image appears on both desktop and mobile views.
Alternatively, you can add an image block using an insertion point, and leaving it full width, or use spacer blocks to make it more narrow.
Classic Editor Image Block Layouts
Image Blocks use Classic Editor Layouts, which means you have 6 layout options available to you. Below we have demonstrated all 6.
We have always been a fan of these as it’s a fun (and consistent) way to highlight important text with an image to breakup endless amounts of text!
NOTE: Each image style often requires tweaking in Site Styles to get everything to look just right. Each block can be styled individually, and below we have chosen different shapes for the flower image. Some design layouts automatically change their layout depending on whether you’re on Desktop or Mobile — for example, the Card Design will have an image on one side and text on the other, while on mobile, it stacks the image on top of the text.
Inline Style
Poster Style
Card Design
Overlap Design
Collage Design
Stack Design
Always Check the Mobile Layout
Our last piece of advice is to always check the Mobile Layout while you’re editing your blog post and save often.