Container

A Container is a box you put other blocks inside to group, align, and space them. It is the main tool for structuring a section, and it is also the most powerful block, because it can give its contents abilities they do not have on their own (see Supercharge any block).

How to add it

EditorInsert (⌘/)LayoutsContainer

Open the Insert menu (the plus button, or press ⌘ /), search for Container under Layouts, and choose where to place it. To put blocks inside, select the Container and use Insert with the Inside placement (see Adding Components).

A Container holding other blocks1000 x 600

Settings

DirectionToggle

How the blocks inside flow: Horizontal (a row), Vertical (a column), or Wrap (a row that wraps onto new lines).

GapAuto / number

The space between the blocks inside. Auto spreads them apart to fill the Container.

AlignmentGrid

A 3 by 3 grid that positions the contents, for example top-left, center, or bottom-right.

Clip overflowCheckbox

When on, anything that spills past the Container's edges is cut off. When off, it can overflow.

Supercharge any block

The Container is the only block with an Animation section, and one of the few with a Click Event. So wrapping any other block in a Container is how you give it those powers:

Animate anything. Put a Text, Image, or any block inside a Container and use the Container's Animation section to make it fade or bounce in as the visitor scrolls. See Adding Animation.
Make anything clickable. Want a whole image or a designed card to be tappable? Wrap it in a Container and set the Container's Click Event. See Click Event.

Design a clickable card

Build a card (an Image with some Text) inside a Container, then add a Click Event to the Container. The entire card becomes one clickable link.

Styling

Beyond its own settings, the Container has Position, Appearance, Border, Click Event, and Animation, plus a Layout section when it is nested inside a Grid or another Container. All are covered in Common Fields.