top of page

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.

EXPLORE MORE TUTORIALS

Grid

TUTORIAL

Grid

Discover the Editor X workspace

WEBINAR

Discover the Editor X workspace

Building a slider using a Layouter

TUTORIAL

Building a slider using a Layouter

Was this lesson helpful?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

bottom of page