Layout Blocks are primarily designed to assist during layout editing, but have additional features. During editing in the canvas:

• 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 multi-devices websites, layout blocks always have the same order on all devices.

In the published page:

• a layout block can be collapsed and expanded via On Click actions on other elements;
• scrolling can optionally snap to the layout block edges;
• a layout block is intrinsically a scroll location, once you set its name.

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 options in the Custom Scrolling section of the settings.

“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.

The “Initially Hidden” option is used in conjunction with “Layout Block control” setting of the “On Click” action of another element on the page. For example you can set the Layout Block to be initially hidden, then set a button to show and expand the Layout Block content on the page. A combination of these can be used to build a construct known as an accordion, as illustrated in the video tutorial.

The “Mask Contained Elements” option will prevent anything that would show outside of the layout block itself from showing. The main use is when you have a scroll animation and it’s bleeding out of the layout block itself. For example a scale or motion scroll animation, with masking enabled only the portion of the animated content that’s inside the layout block will be visible.

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

Layout Blocks can also be animated as a whole.