Container Element

Last Update: March 13, 2023

One of Avada’s most fundamental and versatile Design Elements is the Container Element. This element is the structural foundation of all page layouts created within Avada Builder, and is an integral part of making sure your designs stay organized and intact, as well as being a great design tool for your layout.

Back inAvada 7.0, we completely re-imagined both the Container and Column elements, basing them on CSS Flexbox. This means that extremely flexible positioning and spacing have now arrived in Avada. At the same time, we have kept our classic setup for Containers and Columns, in case you want to keep using it on pre-existing sites.

By default, Flexbox will not be enabled on existing sites and containers, but will be for new sites and new containers on existing sites. For more information on these exciting changes, please see the Introducing Flexbox for Containers and Columns documentation. And for a full rundown of Legacy settings for Containers, please see our Container and Column Element Legacy Settings document.

The Container Element is massively flexible, and it provides a great range of both functional and design options that allow you to build your site exactly how you want it. Read on below to discover all you need to know about the Container Element, and watch the video below for a visual overview of this most important of Elements.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

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 to the Site Width of your site.

Responsive Option Sets

Another new feature for Containers and Columns in Avada 7.0 is Responsive Option Sets. You can see the Responsive Icons at the top right in the below image of the Container Element. Just note, that this feature is only available on the new Flexbox Containers, and not on Legacy Containers.

Please see the Responsive Option Sets documentation for specific details of this awesome new feature, but in short, it allows you to change what screen size you want certain option values to be valid for, and allows you to have up to three individual option sets for the included options. You will also see a screen icon on the individual options that are a part of this feature. A simple example of how this feature might be used would be to enable different container margins or column widths on mobile view, as opposed to the tablet or desktop view.

Container Element > Tabs

How To Add A Container

When adding a new page, whether in Avada Builder, or Avada Live, you are always greeted with the Starter Page, as seen below, which leads you into the process of adding a container. Simply 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.

Avada Live Starter Page

On an existing page with content, adding a new Container is equally simple. As seen below, in Avada Live, you just hover over any Container Controls and click on the Add Container Icon.

Add Further Containers - Avada Live

In the back-end interface of the Builder, as seen below, the Add Container Button is found at the bottom of every existing Container.

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

Add Containers - Avada Live

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 huge role in your page layout. By editing the Container Options (through the pen icon on the Container toolbar) you access the Container Options, which are very powerful, and can help you achieve a wide range of layout scenarios. Read on below to see the full list of Container options.

Element Options

Inside the Container Element options, you will find 4 tabs – General, Design, Background, and Extras. Because of the amount of options you can set for the element, we’ve split them into these four logical tabs, so you can easily locate the option you’re looking for. Continue reading below for a full description of each tab, and the options within them.

NB. Please note that the screenshots here show ALL Flex Container options, (achieved in this case by Photoshop magic, but normally by turning the Avada’s Option Network Dependencies options off in Advanced > Theme Features) and so may look different to your initial options panel. This option is on by default and only shows various options when they relevant options are enabled. For more information on this important feature of the Avada Options Network, please see the Avada’s Option Network Dependencies document.

General

HeadingDescription
Interior Content WidthSelect if the interior content is contained to site width or 100% width.
HeightSelect 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 HeightSet the minimum height for the container.
Enable 100% Height ScrollSelect 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 AlignmentDefines how rows should be aligned vertically within the container. IMPORTANT: These settings will only take full effect when multiple rows are present.
Column AlignmentSelect how you want columns to align within rows.
Column JustificationSelect how the columns will be justified horizontally.
Content WrapControls whether flex items are forced onto one line or can wrap onto multiple lines.
Column SpacingControls the spacing between columns of the container.
Center ContentSet to "Yes" to center the content vertically on 100% height containers.
Set Columns to Equal HeightSelect to set all columns that are used inside the container to have equal height.
Container HTML TagChoose container HTML tag, default is div.
Name Of Menu AnchorThis name will be the id you will have to use in your one page menu.
Container VisibilityChoose to show or hide the section on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
Container Publishing StatusControls 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 DateControls 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginSpacing above and below the section. Enter values including any valid CSS unit, ex: 4%.
PaddingEnter values including any valid CSS unit, ex: 10px or 10%. Leave empty for default value of 0px, 0px, 0px, 0px on default template. Leave empty for default value of 0px, 30px, 0px, 30px on 100% width template.
Container Link ColorControls the color of container links.
Container Border SizeControls the border size of the container element.
Container Border ColorControls the border color of the container element.
Border StyleControls the border style.
Border RadiusEnter 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 ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet 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 RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet 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 ColorControls the color of the box shadow.
Box Shadow StyleSet the style of the box shadow to either be an outer or inner shadow.
Z IndexValue for container's z-index CSS property, can be both positive or negative.
OverflowValue for container's overflow CSS property.

Background

HeadingDescription
Background Options
Gradient Start ColorSelect start color for gradient.
Gradient End ColorSelect end color for gradient.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Container Background ColorControls the background color of the container element.
Background ImageUpload an image to display in the background.
Skip Lazy LoadingSelect whether you want to skip lazy loading on this image or not.
Background PositionChoose the position of the background image.
Background RepeatChoose how the background image repeats.
Background SizeChoose the size of the background image or set a custom size.
Background Custom SizeSet the custom size of the background image.
Background Custom SizeSet the custom size of the background image.
Background Custom SizeSet the custom size of the background image.
Fading AnimationChoose to have the background image fade and blur on scroll. WARNING: Only works for images.
Background ParallaxChoose 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 MobileWorks 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 SpeedThe 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 ModeChoose how blending should work for each background layer.
Video MP4 UploadAdd 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 UploadAdd 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 UploadAdd 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 IDEnter 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 RatioThe 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 VideoIMPORTANT: 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 ImageIMPORTANT: 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.
PatternSelect pattern.
Custom PatternUpload your custom pattern.
Pattern ColorSet the pattern color.
Pattern StyleSelect the pattern style.
Pattern OpacitySet the pattern opacity.
Pattern SizeSet the pattern size. Enter values including any valid CSS unit, ex: 20%.
Pattern Blend ModeSet how pattern will blend with element background.
MaskSelect mask.
Custom MaskUpload your custom mask.
Mask ColorSet the mask color.
Mask Accent ColorSet the mask accent color.
Mask StyleSelect the mask style.
Mask OpacitySet the mask opacity.
Mask Transform
Mask Blend ModeSet how mask will blend with element background.

Extras

HeadingDescription
Rendering LogicAdd 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 LogicAdd conditional logic when the element is used within a form.
Position AbsoluteTurn on to set container position to absolute.
Responsive Position AbsoluteChoose at which screen sizes the container should get position absolute on.
Position StickyTurn on to have the container stick to the browser window on scroll.
Responsive Position StickyChoose at which screen sizes the container should be sticky.
Sticky Container Background ColorControls the background color of the container element when sticky.
Sticky Container Minimum HeightControls the minimum height of the container when sticky.
Sticky Container OffsetControls 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 OffsetControls the scroll offset before sticky styling transition applies. In pixels.
Sticky Container Hide On ScrollControls the scroll distance before container is hidden while scrolling downwards. Set to 0 to keep visible as you scroll down. In pixels.
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.
Filter Type
HueFilter hue.
SaturationFilter saturation.
BrightnessFilter brightness.
ContrastFilter contrast.
InvertFilter invert.
SepiaFilter sepia.
OpacityFilter opacity.
BlurFilter blur.