LESSON 04

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 Container Boxes, Layouters, Repeaters and Lightboxes. The most basic type is a container box.

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. 

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 change its design, move it around and more.

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.

Applying a grid.

You can apply a grid to your container to help structure the content inside it, and control the exact positioning of elements during resizing. Select anywhere inside your container, then click Apply Grid.

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.

Media fill.

You can 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.

TRY IT YOURSELF

Exercise on containers.

​Open Academy X from desktop to complete this exercise.

Start these exercises on the desktop breakpoint (1001px & Up). Use the drag handles to resize the canvas and see how the container responds to different screen sizes.

01

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.

02

Attach elements. Drag an image into the container to attach it. Now do the same with some title text and a button.

03

Move a container. Select the container and drag it anywhere on the page. 

04

Stretch to fill. Select the image and click the Stretch icon in the top right.

Watch related videos.

Editor X

The rest is up to you.