Container Element

One of Avada’s most fundamental and versatile Design Elements is the Avada Container Element. This Element serves as the structural foundation for all page and post layouts created with the Avada Builder and is an integral part of ensuring your designs remain organized. The Container and Column Elements are based on CSS Flexbox. This means that extremely flexible positioning and spacing are built in. For more information on that, please see the Introducing Flexbox for Containers and Columns documentation.

The Container Element is highly flexible, offering a wide range of both functional and design options that enable you to build your Avada website exactly as you want it. Watch the video below for a visual overview of the Element, view the Avada Container Element page for a live example, and read on to see the complete list of options for the Avada Container Element.

While the Container Element is mostly independent, some of its features do rely on other factors on your site, such as your Site Width and the Page Template used. The Container Element enables the background color, image, or border to span 100% of the site width or the browser width, depending on the Page Template it’s being used on.

Another feature for Containers and Columns is Responsive Option Sets. You can see the Responsive Icons at the top right in the image below of the Container Element. Please see the Responsive Option Sets documentation for more in-depth information. It allows you to specify the screen size for which you want specific option values to be valid, and enables you to have up to three individual option sets for the included options.

You will also see a screen icon for the particular options that are a part of this feature. A simple example of how this feature might be used is to enable different container margins or Column widths on mobile view, as opposed to tablet or desktop view.

Whenever you add a new page or post using the Avada Live Visual Builder, you are always greeted with the Starter Page, as shown below, which guides you through the process of adding a Container. Click on the “Add Container” button, and you can then choose from the full range of Container layouts to add to the page. This can be an empty Container, but much more usefully, it can include any combination of Columns as well.

Adding a new Container to an existing page with content is equally straightforward. As shown below, in the Avada Live Visual Builder interface, hover over any Container Controls and click the “Add Container” Icon.

In the back-end interface of the Builder, as shown below, the “+ Container” Button is located at the bottom of every Container.

In both cases, this brings up the Select Container dialog screen, as seen below. Select the Container/Column combination you’d like to add, and the new Container will be placed directly below the Container from which it was inserted.

Once you have added your Container and have Columns inside it, you can begin to add content via the Avada Builder Elements. But do not neglect to explore the Container itself. It can also play a massive role in your page layout.

By editing the Container Options (accessible through the pen icon on the Container toolbar), you can access powerful settings that help you achieve a wide range of layout scenarios. Read on below to see the complete list of Container options.

Within the Container Element options, you will find 4 tabs: General, Design, Background, and Extras. Due to the numerous options available for the element, we’ve divided them into four logical tabs, allowing you to locate the desired option easily. Please continue reading below for a detailed description of each tab and its associated options.