All Collections
Element Tutorials
Structure
How to use the Container Element to style and structure page sections
How to use the Container Element to style and structure page sections

The Container element is used to structure page sections and create overlays with image and video backgrounds.

Updated over a week ago

The Container is a containing element that can be used to build page sections and structure your pages by section.

Please note, this element was recently renamed as the Container element, and was previously known as the Section element

How to Use Containers On Your Pages

Containers are super easy to use. Simply drag one onto your page to get started, you will find this within the right-hand side menu.

Setting The Minimum Height of a Container

Setting the minimum height of your Container element can be a great way of showing off your background images, or just ensuring that your content has all the space that it needs. This can be set in the right-hand side menu of the editor.

Setting minimum height of a container element

How to Make Your Containers Full Width

If your page is not full width, you can set the Container to Full Width. This will make use of all available horizontal space of the page.

Setting a container element to full width

How to Set a Background in a Container

The Container element allows you to set an image, color or video background. This is super helpful for creating backgrounds to your content. There are two options: a solid color, or a gradient if you want to get creative.

Setting a background color of a container

Image Background Sizes

Cover ensures that your image fills the whole Container. If you are having issues with your image being cut off, this may be why.
Contain will ensure that your image appears full size, no matter what screen setting it is set to. 

Changing your image background size on the container element

Enabling a Parallax Effect on Your Background

Enabling a parallax effect on your backgrounds is super easy! You can enable this in the right-hand menu of the Container element.

Adding Elements into a Container

You can add any element into a Container. Simply drag the element that you would like into the dropzone of the Container element and continue to build. This is great for adding backgrounds to your content.

Vertically Centering Content in a Container

The Container Element gives you numerous options to align your content vertically: top; bottom; and middle.

Making your Container Element clickable

Making a section of your page clickable is super easy with the Container Element. Simply toggle this on in the settings of the Container Element and insert the link that you would like to direct your user to.

Did this answer your question?