The container element is a layout element that can contain other elements. Containers are a fundamental organizing element of web pages, allowing you to build page layouts by grouping other elements within them, or to control the behavior of multiple elements at once.

For example, if you have a group of images and text that are part of a unit (such as a preview of an article), you can place all these elements within a single container so that they are grouped and will remain together when the screen size is changed.

Nesting elements within containers, and containers within other containers, is also essential to creating certain types of layering effects.

Adding a Container Element to the Page

Click and drag the container element icon from your left toolbar onto the stage:

The container can be placed directly on the page, or may be placed within another grid or container element.

When a container element is dropped on a page, it will appear as an empty box that spans 100% of the width of the page (or its parent grid or container.)

Editing a Container

A container itself is just an empty element. Once placed on the stage, other elements such a text and videos can be placed inside the container by dragging and dropping.

The container itself can be styled using the right toolbar control panels. You can use these panels to set a container's colors, stroke, dimensions, and so on.

Aligning Containers

To align multiple containers next to each other within a single column or component, make the sum width of all elements equal to or less than 100% to float them side-by-side when aligned left or right.

Deleting a Container

To Delete a Container Element, select any container that has been placed on the page by selecting it, then pressing the <delete> key on your keyboard, or choosing "Delete" from the "Edit" menu.

Did this answer your question?