Have you been using the Fluid Engine editor in Squarespace? Maybe you're a pro at it and love it, or maybe you're a beginner and just starting to get the hang of it? Either way, this post has a great time-saving tip for you!

How to Align Multiple Blocks of Content at Once

Squarespace released a minor update in the Fluid Engine editor that allows you to align multiple blocks of content with the click of a button. 

It may not sound like much, but it's a small change with a big impact that makes designing much easier and quicker.

YOUTUBE VIDEO

I’ll walk you through the process of how to do this below, but if you prefer watching a tutorial, be sure to view the companion video on my YouTube channel.

Step by Step: How to Align Multiple Content Blocks

Step 1: Select the blocks you want to align

Using your shift key and mouse, click on each block you want to align. (Alternatively, if it’s enabled on your site, you can drag your mouse over the blocks to highlight and select them.)

As shown below, I have selected an image, text, and button block I wish to align. And in the upper left corner, there is an icon that looks like two horizontal rectangles with a vertical line to the left of them. This is the option for setting alignment. 

Step 2: Choose the alignment you want to use

If you click on that icon, all of the options will appear as shown below.

Your options are from left to right: 

• Align Horizontal Left

• Align Horizontal Center

• Align Horizontal Right

• Align Vertical Top

• Align Vertical Center 

• Align Vertical Bottom 

Here are examples of what those will look like:

Align Horizontal Left 

Vertical Alignments

In these images, only an image and a button block are selected to align. This illustrates how you can place a clickable item over an image if you choose.

Step 3: Save your work

Once you have your blocks exactly how you want them to appear, hit Save!

Tips to make the most of this feature

This feature can be very useful if you want to recreate a series of blocks in a section.  For example, if you are highlighting multiple services or products, you can create one, format and align the elements exactly how you want them, and then with all the blocks selected, hit “duplicate.”

Voila!

Now all you need to do is update the image or text for that service/product and you’re done!

No more recreating each block and aligning them separately with every service/product!

And if you do this to create a section you love, be sure to save that section (click on the heart ♥️ in the section editor menu) so you can re-use it in the future!

And that's all there is to it! It's a simple and minor update to the design editor, but it'll make your life a lot easier by saving you a few extra clicks and frustration during your design process!

You may also find these articles helpful: