Container Element

Last Update: September 1, 2025

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, 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.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Avada Builder Elements!

Container Interaction With Templates

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.

100% Width Template – Background colors, images, and borders span 100% width of the browser window by default, while content, by default, is at Site Width, but you can choose to expand it out to 100% width of the browser window (minus any Container padding you set). For more information, please see the 100% Width Template documentation.
Default Template – All content is contained within the Site Width of your site.

Avada Responsive Option Sets

Another new 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.

How To Add An Avada Container To Your Website

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.

Element 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.

NB. Please note that the screenshots here display all container options (achievable by disabling Avada’s Option Network Dependencies options in Advanced > Features), and therefore may differ from your initial options panel. This option is on by default and only shows various options when the relevant options are enabled. For more information on this crucial feature of the Avada Options Network, please see the Avada Options Network Dependencies help file.

General

Heading		Description
Interior Content Width		Select if the interior content is contained to site width or 100% width.
Height		Select if the container should be fixed to 100% height of the viewport. Larger content that is taller than the screen height will be cut off, this option works best with minimal content. IMPORTANT: Mobile devices are even shorter in height so this option can be disabled on mobile in Global Options while still being active on desktop.
Minimum Height		Set the minimum height for the container.
Enable 100% Height Scroll		Select to add this container to a collection of 100% height containers that share scrolling navigation. IMPORTANT: When this option is used, the mobile visibility settings are disabled. This option will not work within off canvas.
Row Alignment		Defines how rows should be aligned vertically within the container. IMPORTANT: These settings will only take full effect when multiple rows are present.
Column Alignment		Select how you want columns to align within rows.
Column Justification		Select how the columns will be justified horizontally.
Content Wrap		Controls whether flex items are forced onto one line or can wrap onto multiple lines.
Column Spacing		Controls the spacing between columns of the container.
Center Content		Set to "Yes" to center the content vertically on 100% height containers.
Set Columns to Equal Height		Select to set all columns that are used inside the container to have equal height.
Container HTML Tag		Choose container HTML tag, default is div.
Name Of Menu Anchor		This name will be the id you will have to use in your one page menu.
Container Visibility		Choose to show or hide the section on small, medium or large screens. You can choose more than one at a time.
Container Publishing Status		Controls the publishing status of the container. If draft is selected the container will only be visible to logged in users with the capability to publish posts. If publish until or publish after are selected the container will be in draft mode when not published.
Container Publishing Date		Controls when the container should be published. Can be before a date or after a date. Use SQL time format: YYYY-MM-DD HH:MM:SS. E.g: 2016-05-10 12:30:00. Timezone of site is used.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%.
Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty for default value of 0px, 0px, 0px, 0px on Site Width template. Leave empty for default value of 0px, 30px, 0px, 30px on 100% Width template.
Container Link Color		Controls the color of container links.
Container Border Size		Controls the border size of the container element.
Container Border Color		Controls the border color of the container element.
Border Style		Controls the border style.
Border Radius		Enter values including any valid CSS unit, ex: 10px. IMPORTANT: In order to make border radius work in browsers, the overflow CSS rule of the container will be set to hidden. Thus, depending on the setup, some contents might get clipped. You can change the overflow using the overflow option below.
Box Shadow		Set to "Yes" to enable box shadows.
Box Shadow Position		Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur Radius		Set the blur radius of the box shadow. In pixels.
Box Shadow Spread Radius		Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow Color		Controls the color of the box shadow.
Box Shadow Style		Set the style of the box shadow to either be an outer or inner shadow.
Z Index		Value for container's z-index CSS property, can be both positive or negative.
Overflow		Value for container's overflow CSS property.

Background

Heading		Description
Color
Container Background Color		Controls the background color of the container element.
Gradient
Gradient Start Color		Select start color for gradient.
Gradient End Color		Select end color for gradient.
Gradient Start Position		Select start position for gradient.
Gradient End Position		Select end position for gradient.
Gradient Type		Controls gradient type.
Radial Direction		Select direction for radial gradient.
Gradient Angle		Controls the gradient angle. In degrees.
Image
Background Image		Upload an image to display in the background.
Skip Lazy Loading		Select whether you want to skip lazy loading on this image or not.
Background Position		Choose the position of the background image.
Background Repeat		Choose how the background image repeats.
Background Size		Choose the size of the background image or set a custom size.
Background Custom Size		Set the custom size of the background image.
Fading Animation		Choose to have the background image fade and blur on scroll. WARNING: Only works for images.
Background Parallax		Choose how the background image scrolls and responds. This does not work for videos and must be set to "No Parallax" for the video to show.
Enable Parallax on Mobile		Works for up/down/left/right only. Parallax effects would most probably cause slowdowns when your site is viewed in mobile devices. If the device width is less than 980 pixels, then it is assumed that the site is being viewed in a mobile device.
Parallax Speed		The movement speed, value should be between 0.1 and 1.0. A lower number means slower scrolling speed. Higher scrolling speeds will enlarge the image more.
Background Blend Mode		Choose how blending should work for each background layer.
Slider
Slider Images		Upload background slider Images.
Background Position		Choose the position of the background slider images.
Skip Lazy Loading		Select whether you want to skip lazy loading on background slider images or not.
Loop		Enable background slider Loop.
Pause On Hover		Enable to pause background slider on hover.
Slideshow Speed		Controls the speed of the slideshow. 1000 = 1 second.
Animation		Select background slider animation.
Slider Direction		Select slide animation direction.
Animation Speed		Controls the speed of slide transition from slide to slide. 1000 = 1 second.
Blend Mode		Choose how blending should work for background slider.
Video
Video MP4 Upload		Add your MP4 video file. This format must be included to render your video with cross-browser compatibility. WebM and OGV are optional. Using videos in a 16:9 aspect ratio is recommended.
Video WebM Upload		Add your WebM video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. Using videos in a 16:9 aspect ratio is recommended.
Video OGV Upload		Add your OGV video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. Using videos in a 16:9 aspect ratio is recommended.
YouTube/Vimeo Video URL or ID		Enter the URL to the video or the video ID of your YouTube or Vimeo video you want to use as your background. If your URL isn't showing a video, try inputting the video ID instead. Ads will show up in the video if it has them.
Video Aspect Ratio		The video will be resized to maintain this aspect ratio, this is to prevent the video from showing any black bars. Enter an aspect ratio here such as: "16:9", "4:3" or "16:10". The default is "16:9".
Loop Video
Mute Video		IMPORTANT: In some modern browsers, videos with sound won't be auto played, and thus won't show as container background when not muted.
Video Preview Image		IMPORTANT: This field is a fallback for self-hosted videos in older browsers that are not able to play the video. If your site is optimized for modern browsers, this field does not need to be filled in.
Pattern
Pattern		Select pattern.
Custom Pattern		Upload your custom pattern.
Pattern Color		Set the pattern color.
Pattern Style		Select the pattern style.
Pattern Opacity		Set the pattern opacity.
Pattern Size		Set the pattern size. Enter values including any valid CSS unit, ex: 20%.
Pattern Blend Mode		Set how pattern will blend with element background.
Mask
Mask		Select mask.
Custom Mask		Upload your custom mask.
Mask Color		Set the mask color.
Mask Accent Color		Set the mask accent color.
Mask Style		Select the mask style.
Mask Opacity		Set the mask opacity.
Mask Transform
Mask Blend Mode		Set how mask will blend with element background.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.
Conditional Logic		Add conditional logic when the element is used within a form.
Position Absolute		Turn on to set container position to absolute.
Responsive Position Absolute		Choose at which screen sizes the container should get position absolute on.
Position Sticky		Turn on to have the container stick to the browser window on scroll.
Responsive Position Sticky		Choose at which screen sizes the container should be sticky.
Sticky Container Background Color		Controls the background color of the container element when sticky.
Sticky Container Minimum Height		Controls the minimum height of the container when sticky.
Sticky Container Offset		Controls how far the top of the container is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector.
Sticky Container Transition Offset		Controls the scroll offset before sticky styling transition applies. In pixels.
Sticky Container Hide On Scroll		Controls the scroll distance before container is hidden while scrolling downwards. Set to 0 to keep visible as you scroll down. In pixels.
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.
Filter Type
Hue		Filter hue.
Saturation		Filter saturation.
Brightness		Filter brightness.
Contrast		Filter contrast.
Invert		Filter invert.
Sepia		Filter sepia.
Opacity		Filter opacity.
Blur		Filter blur.

Container Element

Container Interaction With Templates

Avada Responsive Option Sets

How To Add An Avada Container To Your Website

Element Options

General

Design

Background

Extras

In this article