How to align content in Squarespace
This tutorial is specifc for Squarspace fluid engine sections available in Squarespace 7.1.
For more information, visit insidethesquare.co/themes
Have you ever been frustrated with the challenge of aligning content blocks on your Squarespace website? It can be a bit tricky, but luckily there is an easy way to do it, thanks to the latest Squarespace update! 😍
Each content block in a Squarespace fluid engine section can be aligned horizontally or vertically inside its block, and now we can align content blocks with each other too! This tutorial will show you how it works.
Aligning Objects Inside Content Blocks
To align objects inside a single content block, simply click on the object you wish to move and open it's design menu.
For text, you can use the text editor to align the lines left, center, or right.
Outside of this editor, you can use the quick design menu to align vertically within the content block - top, center, or bottom.
For buttons that are set to FIT and not FILL you can use the quick design menu to align them vertically and horizontally.
PRO TIP: Only the vertical alignment can change for desktop vs mobile. Text and horizontal button alignment of left, center, or right will be the same on all devices.
For images set to FIT and not FILL you can use the quick design menu to align vertically and horizontally.
Most other content blocks have vertical alignment options too. Select the content block by clicking on it once, and check the quick design menu for the alignment icon.
Aligning Content Block Groups
The new feature of Squarespace allows you to align multiple content blocks at once with each other.
This means that if you have two objects—a text box and an image box for example—you can easily line them up next to each other by using the new align feature.
Select multiple items at a time by holding down the shift key while you click on them, or clicking on an empty space on your site and dragging your cursor across all of the objects you want to adjust to highlight them.
You’ll see a blue outline of everything you’ve selected. Click on the alignment option and choose to align it horizontally (left, center, right) or vertically (top, center, bottom)
The edge closest to your selection will be the stop point for all content blocks. For example, if you select "align left" the content blocks in the group will align their left edge with the content block furthest to the left.
