Layout Blocks are primarily layout aids, with three key features:

• a layout block can be enlarged or moved pushing down other layout blocks that come after it;
• a layout block can be swapped with another one;
• on multiple devices, layout blocks always have the same order.

Layout Blocks are in many ways similar to boxes, in that they can help provide a visual structure to your page. They’re also similar to groups, in that they contain elements that they’ll drag along. But Layout Blocks go further, in that they also help build out and update more complex pages.

In the canvas a selected Layout Block will be recognizable due to the diamond-shaped bottom handle, which serves a special purpose.

When laying out a long page, it is often necessary to insert or remove content in a section of the page that’s somewhere in the middle. When the page is structured with Layout Blocks you can drag the bottom diamond-shaped handle up or down, and all of the blocks further down the page will follow, moving up or down. A specific mouse cursor further highlights the different resize mode. This can be particularly beneficial with mobile layout adaptation, where it is frequently necessary to make space when adapting a site for a different device.

Additionally holding the CMD key while dragging the layout block (from any place) will move all subsequent blocks on the page along with it.

Layout Blocks also add a tiny bit of semantic structure, they are meant to correspond to a section of the page, and have a consequent behavior. When you drag a Layout Block up or down in the page, and the top edge moves beyond the top edge of another, they will swap places. Moreover the placement will also apply across all devices, keeping the section order consistent.

Because of these features, Layout Blocks are special elements that can only reside at the top level of the page.

You can easily migrate a page to Layout Blocks by selecting one or more top level elements in the canvas and from the Arrange menu, or from the context menu, select “Move to Layout Block”. This will create a new Layout Block with the exact vertical height of the selected elements.

Layout Blocks can have special scrolling behavior, by setting the appropriate options.

“Stick to page top” makes the block pin, or lock, at the top of the browser window instead of scrolling away. When there are multiple pinned blocks, you can opt to have them stack at the top (so they’ll all be visible), to overlap, or to have only one visible at a time, with the last one pushing the previous one away.

“Fix to browser bottom” makes the block not scroll with the page, but stay attached by its bottom-most edge to the bottom of the browser window.

Another way to create stick-to-top elements is via Groups.

Layout Blocks can also be animated as a whole.