How to Rearrange Blocks with LayoutEngine on Squarespace
Squarespace’s LayoutEngine enables you to position blocks in several ways. The process is almost magical. The root of LayoutEngine’s magic is a column grid that governs how blocks are positioned on the page. You use the grid to perfectly align blocks to create neatly organized pages that are visually pleasing to the eye.
To move and rearrange blocks on a page, do the following:
Hover your mouse cursor over a block until the cursor changes to a multidirectional arrow.
Click and hold down your mouse button on the block you want to move.
All the blocks on your page become outlined in a faint, bluish glow so that you can see their edges and precisely position the block you are moving.
A multidirectional arrow icon appears in the upper-right corner of certain blocks when you hover your mouse cursor over them. If you see this icon, you must click it to drag that block.
Drag the block to another location on the page.
As you drag the block closer to the edge of another block, the edge is highlighted with a blue line, and one of four anchor options appears. You can control which option appears by the position of your cursor near the edge:
Row: Adds the block to a new row. Position your cursor closer to the bottom or top edge of another block.
Insert: Attaches the block to the top or bottom of another block. Position your cursor farther inward from the top or bottom edge of the block to which you want to attach the block you’re moving.
Column: Adds the block next to another block or set of blocks. Position your cursor close to the left or right edge of another block.
Float: Allows you to place an image block or a map block within a text block so that the words wrap around the sides of the floating block. Position your cursor to the left or right of the paragraph that you want the image or map to float beside.
Drop the block in place by releasing the mouse button.
How to separate blocks into rows
When you add a block to a page, the block is added to a new row and spans from the far left to the far right of the page. The block’s height is fluid, expanding to contain the content you add to it. You can rearrange blocks up and down the page.
If you’re adding a block to a page that already contains blocks, the new block will be added below the existing ones.
When you create a new page or a new blog post, a text block is added automatically.
How to create columns of blocks
When you rearrange blocks, you can place them to the left or right of each other, creating columns within a row. These columns affect only the row containing the blocks. For example, you might arrange three blocks on one row but five blocks on another row.
LayoutEngine uses a 12-column grid structure. If you’re arranging blocks in a row and want them to be the same width, you must use 1, 2, 3, 4, or 6 blocks. (These numbers are evenly divisible into 12.)
To adjust the width of two adjacent blocks, position your cursor between the two blocks. A thin, vertical line appears and the cursor changes to a resize cursor. Click and drag to adjust the width of the blocks. Resizing one block affects the size of the adjacent block.
How to insert blocks
When you insert a block above or below another block, you connect those blocks within the same column. The blocks will be displayed together, which can be helpful when you create intricate page layouts.
In addition, when your site resizes to fit the width of a mobile device, the blocks will reflow to stack on top of each other.
Typically, you insert blocks above or below another block. However, you can also divide text blocks with another block by inserting a block between paragraphs in the text block.
How to float blocks within content
When you have a floating block, the text on the page wraps around the sides of the block. The only blocks that can float in a text block are image blocks and map blocks.
You can float a block next to any paragraph of text in the text block. To position your block, you use the icons that appear at the top of the image or map block. Your floating options are
Left: Floats the block to the left of the text.
No wrap: Floats the block within the text but does not display text on the left or right side of the block. The map block will stretch to fill the full width of the text block.
The image block will do the same unless the image is not large enough, in which case the image will be displayed at its largest size, centered in the full width of the text block.
Right: Floats the block to the right of the text.
Now that you’ve looked at how to add, remove, and rearrange blocks within your pages, it’s time to move on to Part IV, where you look at all the different types of blocks you can add to your site.