Moving blocks to customize layouts

Move blocks around your pages to customize layouts or create columns and rows. This guide is a next step to Adding content with blocks, which we suggest you read first if you're new to Squarespace.

Note: You can move a block within the page content area where it was added. It's not possible to move blocks between pages or separate content areas, such as from a footer to a blog post.

Watch a video

This video shows the classic editor.

Move a block

Wherever you add blocks in Squarespace, you can move blocks around to customize the layout. To move a block:

Fluid Engine layouts

The current block editing experience on Squarespace is called Fluid Engine. It's supported on version 7.1 sites in any area where you add block sections, including layout pages, portfolio sub-pages, and your footer. Collection items and any block sections added before Fluid Engine's release use the classic editor.

Because of the grid system in Fluid Engine, moving a block may cause some blocks around it to move slightly as well. This happens to preserve overall balance of the section layout. 

Keep in mind, in Fluid Engine, you'll set the computer and mobile views separately.

Center blocks

To center a block horizontally, click and drag the block toward the middle of the section and release it when a yellow line appears vertically through the center of the grid. The block may resize itself slightly to ensure it's in the center of the section.

Set content alignment and overlap

After you move a block to a new place in Fluid Engine, the block's toolbar appears.

• To align the content of the block horizontally, vertically, or both within the borders of the block, click the alignment icons in the block's toolbar. Keep in mind, some blocks, like image blocks and button blocks set to fill, don't have alignment options.
• If blocks overlap, the toolbar displays Move Forward and Move Backward icons, so you can set which block is on top. If many blocks overlap, you may have to click multiple times to bring the block all the way forward or back.
• To help make block content more visible on overlapping blocks, add background colors to certain blocks.

Move multiple blocks at the same time

To move multiple blocks at the same time:

1. Click and drag in the section background to highlight the blocks.
2. Click one of the blocks and drag. This moves all of the highlighted blocks at the same time, preserving their current layout.

To highlight and move all blocks in a Fluid Engine section at the same time, press Command + A or Control + A, then click and drag them.

Classic editor layouts

All block areas on version 7.0 sites use the classic editor. It's also in some areas of version 7.1 sites:

• Blog posts, events, and product additional information
• Block sections added before Fluid Engine

Moving blocks

In most areas using the classic editor, an invisible grid supports up to 12 columns and an unlimited amount of rows. Some areas, like footers, may have different limitations.

• When clicking and dragging a block to change its position in the grid, the block appears semi-transparent.
• When moving a block, lines called guidelines appear to show you where you're placing the block. These are especially useful when you’re creating columns and rows.
• If you’re floating a block in a text area, like when creating a pull quote, a gray box will appear wherever the block is placed to show how text will wrap around it.

Placing blocks

As you drag a block, guidelines appear to show what will happen when you release it:

• Vertical line the height of the content area - The block will span the full height of the page, creating a new column
• Horizontal line the width of the content area - The block will span the full width of the page, creating a new row
• Line matching the height or width of another block - The block will be added to an existing column or row, at the same height or width as that block

Separate blocks into columns and rows

Line blocks and spacer blocks are useful tools for separating content into columns and rows.

• Because text blocks often merge when stacked, use a line or spacer block to divide text and prevent merging. Review the section below on text blocks for help with this.
• You can also use line and spacer blocks to temporarily separate content while laying out a page or content area. Use a line or spacer block to divide rows, then add blocks to create new parallel columns. After the content is arranged, remove the line or spacer blocks, keeping in mind text blocks will merge after removing the line or spacer.

Mobile layouts

How blocks are arranged on mobile browsers depends on which editor the blocks are in:

• Fluid Engine - The mobile and computer layouts are separate. Click the Mobile View icon in the top-right corner to view and edit the page's mobile layout. Moving blocks in the computer layout doesn't affect the mobile layout. 
• Classic editor - It's not possible to edit the computer and mobile layouts separately. The mobile layout matches the computer layout, and blocks rearrange automatically to fit smaller devices.

Create columns and rows

Your site includes a number of options for automatically creating columns and rows with common types of content. You can add more content to these over time without a lot of manual rearranging. We recommend using these options for clean, consistent columns and rows, including:

• Auto layouts (version 7.1) - Images, text, and buttons
• Gallery sections (version 7.1) - Images and text
• Gallery blocks - Images and text
• Summary Blocks - Images and text pulled from collection pages, like blogs

However, if you need to create columns and rows with other types of content, or in layouts not supported by the above options, you can create columns and rows with sets of blocks:

• Fluid Engine - Put blocks in place and resize them using the grid guidelines for consistent columns and rows, then arrange the mobile layout into different columns and rows if necessary.
• Classic editor - Creating columns and rows is more complex. The rest of this guide covers how to manually create columns and rows in the classic editor.

This video shows version 7.0, but also applies to the classic editor in version 7.1.

Create columns in the classic editor

Columns can span the entire height of the content area or align with a block in an existing row to create a matching-height column. To create a column:

1. Hover over a block you want to move. Your cursor will turn into a hand icon. If the hand doesn't appear, click the block first.
2. Click and drag the block to move it around the page.
3. As you move the block, guidelines appear that show the new column that block will occupy.
4. Follow the steps below to either add the column to a full-page or matching-height column.

Create a full-page column

To create a new column that stretches the full height of the page, click and drag a block until the guideline stretches vertically along the entire page. This creates a new column that splits the entire page.

Create a matching-height column

To match a new column to the height of another block, click and drag the block until the guideline matches the height of the other block. This is useful for placing blocks side-by-side above or below wider blocks.

Change column width

To create columns that are all the same width, you'll need to have one of these numbers of columns:

• 1
• 2
• 3
• 4
• 6
• 12

If you have a different number of columns, they'll have varying widths. This rule applies to all content areas of your site except sidebars and some footers.

To change a column's width:

1. Hover your cursor between two blocks until you see two arrows, pointing left and right.
2. Click and drag to expand and shrink the column.
3. This changes both the column width and the overall size of both blocks.
4. Repeat with the spaces between other blocks in the row as necessary.

Create rows in the classic editor

Rows can span the entire width of the content area or align with a block in an existing column to create a stack. To create a row:

1. Hover over the block you want to move. Your cursor will turn into a hand icon. If the hand doesn't appear, click the block first.
2. Click and drag the block to move it around the page.
3. As you move the block, guidelines appear to show the column or row the block will occupy.
4. Follow the steps below to either place your block into a full-page row or aligned row.

Tip: Image blocks, spacer blocks, map blocks, and carousel gallery blocks include a cropping handle which you can use to to adjust the block's height. Use these blocks to customize row heights on your page.

Create a full-page row

To create a new row stretching the entire page or post, click and drag a block so the guideline stretches horizontally across the entire page.

Create a matching-width row

To match the width of another block, move a block above or below another block until the guideline shrinks to match the width of the existing block. Instead of creating an entire row across the page, this action stacks individual blocks on top of each other.

Create text-only columns and rows in the classic editor

Moving text into columns or rows can be tricky. Text blocks will often merge when stacked. You can avoid this by using spacer blocks to separate content while building the page.

Text columns

Moving text into columns is a great way to visually divide content or to pair text with other blocks, like image blocks. To create text columns:

1. Add your first text block anywhere on the page.
2. Click an insert point anywhere on the page to add a spacer block. Click and drag the block next to the first text block.

3. Click an insert point anywhere on the page to add your next text block. As text blocks can sometimes be difficult to move after they're placed, click and drag the Text icon directly from the block menu. Guidelines will appear, just as they do when you move a block that’s already been placed.
4. Drag the Text icon toward the spacer block until the guideline shrinks to the same height, then release it and add your text.

5. Repeat the process of adding spacer blocks and text blocks for as many text columns as you need.
6. When you've placed all your text columns, delete the spacer blocks to leave only the text columns.

Text rows

Text blocks stacked often merge into a single block. To keep these blocks separate, we recommend dividing your text with a line or spacer block. For more defined spaces, use a line block. For an open space, use a spacer block.

Combine columns and rows in the classic editor

You may want to combine columns and rows to customize your page. A common example is a company bio page, where you might want to place text blocks with corresponding image blocks in even rows. In this example, we’re combining three image blocks and three text blocks.

To combine columns and rows:

1. Add three image blocks, each in their own column, using the steps for creating matching height columns above.
2. Add a text block below each image block. Ensure that the guideline matches the image block above it, which will create a new row within the existing column below each image.

If you need titles, add them at the top of each column using additional text blocks aligned with the image blocks.

Troubleshooting columns and rows in the classic editor

My images are different sizes

For best results, it helps to ensure each image you’re using has the same aspect ratio before uploading. Usually, we recommend using images at least 1500 pixels in width. For help adjusting your images, visit Formatting your images for display on the web.

My layout of columns and rows doesn't appear on a mobile device

To keep your site legible and prevent visitors from having to pinch, zoom, and scroll to view your content, Squarespace's responsive design automatically stacks blocks vertically on mobile devices. The order of your blocks will depend on the structure of your columns and rows.

To learn more, visit How blocks stack on mobile in the classic editor.