Containers

A container is a layouting tool that helps you structure the content on your site. You can attach elements to a container like text, images and grids.

Adding a container

You can drag any type of container onto your canvas from the Add panel. Under Layout Tools, you'll see Empty Boxes, Grids, Layouters, Repeaters, Lightboxes and Multi-State Boxes. The most basic type is an empty box.

The add panel is open and Layout Tools is highlighted. Empty Boxes is selected from the menu to show various empty box options.

Attaching elements

Drag elements into your container to attach them. Now when you move the container, all of the elements inside will move with it.

A square shape is dragged into the container and the option to Attach is shown.

Selecting your container

If you've attached a few elements to your container, you can still select the container itself using the breadcrumbs model. Click anywhere on the container and hover over the blue text box. Select the word Container, then use the floating action bar to animate, add a comment and more. To adjust the design of your container, use the Design tab in the Inspector panel.

The element is selected and the word Container is clicked from the breadcrumbs above.

Setting sizing options

From the Inspector panel, under Sizing options, you can control the way your container—and the elements attached to it—resize in relation to each other, and to changes in the screen size.

The inspector panel is opened. The Fluid Sizing options is selected.

Applying a grid

Apply a grid to your container to help structure the content inside it, and control the exact positioning of elements during resizing.

The Apply Grid panel is opened to show Grid options. The 2x1 option is currently selected.

Overflow behavior

Decide how the container behaves in the case of content overflow. Select your container, then from the Inspector panel, under Overflow content, you can choose whether it will show all the content, hide some of it or scroll to reveal more.

Here, the Inspector panel is open to show Overflow content options. The Show option is currently selected.

Media fill

Fill your entire container with a stretched image. Drag the image inside the container to attach it, then click the Stretch icon in the top right.

The element within the container is selected and the cursor is hovering over the Stretch icon in the top right corner of the element.

Follow these steps in the editor

Open exercise template →

Resize a section with a container inside. Use the drag handles to resize the canvas. Notice that the container width resizes as a percentage of the section across different breakpoints.
Attach elements. Drag an image into the container to attach it. Now do the same with some title text and a button.
Move a container. Select the container and drag it anywhere on the page.
Stretch to fill. Select the image and click the Stretch icon in the top right.