Container Element

14/12/2022

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.

With Avada 7.0, we have 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.

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

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 - Fusion Builder 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 - Fusion Builder 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.

Avada Website Builder

870,062 Businesses Trust Avada

Avada Website Builder

870,062 Businesses Trust Avada

Avada Website Builder

870,062 Businesses Trust Avada

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 Tab

  • Container Type – This option will only be visible on sites with Enable Legacy Support enabled (Options > Avada Design Elements > Container). Select the type of container you want. Choose from Flex or Legacy. See the Introducing Flexbox to Container and Columns doc for more information.

  • Interior Content Width – Select if the interior content of the Container is contained to Site Width or 100% Width. This option is only available when the page is using the 100% Width Template. Note that this option is for the Interior Content. When the 100% Width Template is in use, any background color or images of a Container will fill the full width of the viewport by default. Also note that enabling 100% Interior Content Width will remove left and right padding.

  • Height – Select the height of the Container. Choose from Auto, Full Height, or Minimum Height. In Avada 7.0, this replaces the 100% Height option. Larger content that is taller than the screen height will be cut off, this option works best with minimal content. Note: Mobile devices are even shorter in height so this option can be disabled on mobile in Theme Options while still being active on desktop.

  • Minimum Height – Allows you to set a minimum height for the container. This sets a minimum height for the container regardless of content. Once the content is longer than the value set, it will grow automatically. This option shows only when Minimum Height is selected in the Height Option. NB. This option is now part of the Responsive Option Sets, which means Minimum Height can be set indpependently for large, medium and small screens.

  • Enable 100% Height Scroll – Allows you to add the container into a collection of 100% height containers that share scrolling navigation. This option is available only if you have set ‘100% Height’ option to ‘Yes’. Note: When this option is used, the mobile visibility settings are disabled. This option is only visible when Full Height is selected.

  • Row Alignment – This defines how rows should be aligned vertically within the container. Important: this will only take effect if multiple rows are present. Choose from Stretch, Top, Center, Bottom, Space between, Space Around, or Space Evenly. This option is only visible when Full Height is chosen in the Height Option.

  • Column Alignment – Select how you want columns to align with rows. Choose from Top, Center, Bottom, or Full Height. If you have multiple columns in one row in a container, this option controls how they align with each other in that row. The default is top, but you can center them, align them to the bottom, or make them all stretch to full height.

  • Column Justification – Select how the columns will be justified horizontally. Choose from Start, Center, End, Between, Space Around or Space Evenly. Columns must fill less than 100% of the row for this to have effect.

  • Column Spacing – Controls the column spacing between one column to the next. This can be overriden in the Column Spacing set on the individual Columns. Enter values including any valid CSS unit, ex: 4%.

  • Container HTML Tag – Choose container HTML tag, default is div. Options are Section, Header, Footer, Main, Article, Aside, or Nav.
  • Name Of Menu Anchor – This option lets you assign an anchor to the Container Element. The same anchor can be used to reference that particular section in your navigation menu, or one page text links. Learn more about Anchors here.

  • Container Visibility – This option lets you show or hide the container in small, medium, or large screens. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab > Visibility Size Options in the Theme Options.

  • Container Publishing Status – We introduced this very useful feature with Avada 5.7. Now you can create containers and control their front end visibility through a set of simple publishing options. There are now 4 states a container can have – Published (default), Published Until, Published After, and Draft.
    Published is the default state for all Containers. If you choose Published Until, you set a date, and optionally a time, and the Container will be published until that date, after which it will revert to a draft. If you choose Published After, the Container will remain unpublished in draft mode, until the time specified. If you choose Draft, the Container will simply remain unpublished. This gives you a lot of options to pre-develop content for a specific event or time period, while being able to see how it interacts with your other page content. Logged in users (Author user role or above) will always be able to see Containers in ALL states on the front end, so to check the front end for how visitors will see it, you will need to log out.
    To give clarity in the back end, when a Container has either a Published Until, Published After, or a Draft state, an icon will be visible at the top right on the Container. See a screenshot here to see the Icons. The Published After and Published Until states show an icon for a Scheduled Container, while the Draft Icon shows an icon for a Draft Container. At any time, you can click on the icons to override the Publish status. This will immediately publish the Container and remove the icon.
  • Container Publishing Date – This option will be visible when you have chosen Published Until, or Published After selected. To set the date and time on a container, click the Calendar Icon in the Container Publishing Date Field. This brings up the Date Picker (see screenshot here). The current month comes up by default, and current day is selected. To change the date you can select a date, navigate using the arrows backwards and forwards through the months, or you can click on the Month Title to see a wider range of months, and then the Year Title to see a wider range of years. To set a specific time, click on the Clock icon at the bottom of the Date Picker to open the Time Picker. You can move the hours, minutes and seconds up and down, or you can click on the hour, minute or second to choose from a wider range of times. Alternatively, you can just type in the date and time, but if you do this, make sure you enter it in the correct SQL time format: YYYY-MM-DD HH:MM:SS, e.g: 2018-10-10 12:30:00. The timezone of the website (as set in Dashboard > Settings > General) is used for time calculations.

  • CSS Class – Allows you to add a class for the Element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID for the Element. The ID must be unique to each CSS ID.

Design Tab

  • Margin – Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%. This option can be set indpendently for Large, Medium and Small screens. On Flex Containers, there will be a Responsive Set icon on this option.

  • Padding – Enter values including any valid CSS unit, ex: 10px or 10%. On Flex Containers, there will be a Responsive Set icon on this option.

  • Container Link Color – Controls the color of any links inside the container. Leave empty for default value.

  • Container Link Hover Color – Controls the hover color of any links inside the container. Leave empty for default value.

  • Container Border Size – Accepts a pixel value that sets the border’s thickness for each side of the Container.

  • Container Border Color – Accepts a hexcode value that sets the border’s color. You can also use our Color Picker tool to choose your desired color.

  • Border Style – Controls the style of the border. Choose between Solid, Dashed, or Dotted.

  • Box Shadow – Set to “Yes” to enable box shadows. Choose from Yes, or No.

  • 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, from 0 to 100.

  • 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, from -100 to 100.

  • 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. Z index allows controlling of layering.

  • Overflow – Value for container’s overflow CSS property. Choose from Default, Hidden, Scroll, Visible, or Auto.

BG (Background) Tab

The Background Tab has been re-arranged into six sub-tabs, controlling all aspects of possible container backgrounds. With the addition of masks and patterns, there are a multitude of background options, and some these options can also be combined.

Extras Tab

  • Rendering LogicAdd conditional render logic for the element. See Conditional Element Rendering in Avada for more details.

  • Position Absolute – Turn on to set container position to absolute.

  • Responsive Absolute Position – Choose which screen sizes you want the container to be absolute on. Options are Small Screen, Medium Screen, or Large Screen.

  • Sticky Position – Turn on to have the container stick to the browser on scroll.

  • Responsive Sticky Position – Choose which screen sizes you want the container to be sticky on. Options are Small Screen, Medium Screen, or Large Screen.

  • 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 the top offset from the container and top of viewport when sticky. Can pass 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 – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Select the incoming direction for the animation. Choose from Top, Right, Bottom, or Left.

  • Speed of Animation – Type in speed of animation in seconds (0.1 – 5).

  • Offset of Animation – Controls when the animation should start. Choose from Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of Element enters viewport.

  • Filter Type – This feature allows you to set various filters on the two states of the Container – Regular and Hover. There are eight filters to choose from – Hue, Saturation, Brightness, Contrast, Invert, Sepia, Opacity, and Blur.
    You can set the same, none or different filters for the hover state. This feature is also found in Columns, and works both independently and in conjunction with filters set in columns. There is a multitude of possibilities for this new feature. For more information on this awesome new feature, check out the How To Use The Container/Column Filter Options documentation and accompanying video.

  • Hue – The Hue Blend Mode preserves the luminosity (brightness) and saturation (the intensity of the color) of the base pixels while adopting the hue (the color itself) of the blend pixels. Hue can be used to change hues in an image while maintaining the tones and saturation of the original. The slider travels the full 360 degrees of the color wheel.

  • Saturation – The Saturation Blend Mode preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully desaturate an image, and up to 200 to fully saturate the image.

  • Brightness – The Brightness (luminosity) Blend Mode preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully reduce the luminosity an image, and up to 200 to fully increase the luminosity of an image.

  • Contrast – The Contrast Blend Mode increases or decreases the contrast in the image, by lightening or darkening the lightest pixels and lightening or darkening the darkest pixels. The slider is set to 100 by default, and can go down to 0 to fully reduce the contrast of an image, and up to 200 to fully increase the contrast of an image.

  • Invert – The Invert Blend Mode inverts all of the colors in the image, making each color its exact opposite color, for example, replacing greens and browns with magenta and blues. The slider is set to 0 by default, and can go up to 100 to fully invert the colors in the image.
  • Sepia – The Sepia Blend Mode effectively reduces an image to greyscale (black & white) and adds a mid brown color filter over the image, originally designed back in the mid 1800s to warm black and white images. The slider is set to 0 by default, and can go up to 100 to fully desaturate and apply a sepia tone to the image.

  • Opacity – The Opacity Blend Mode gradually increases transparency into the image. The slider is set to 100 by default, which is fully opaque, and can go down to 0 to make the image fully transparent.

  • Blur – The Blur Blend Mode adds a Gaussian blur to the image as the slider is increased. The slider is set to 0 by default, and can up to 50 to fully blur the image.

Global Options

These options are found at Options > Avada Builder Elements > Container, and set global options for Containers. Here you can set the default behavior for your containers, so go through these and configure the containers how you prefer. You can always override these options in the individual instances of the container.

  • Container Padding for Default Template – Controls the top/right/bottom/left padding of the container element when using the Default page template. Enter values including any valid CSS unit, ex: 0px, 0px, 0px, 0px.

  • Container Padding for 100% Width Template – Controls the top/right/bottom/left padding of the container element when using the 100% width page template. Enter values including any valid CSS unit, ex: 0px, 0px, 30px, 30px.

  • Container Background Color – Controls the background color of the container element.

  • Container Gradient Start Color – Controls the start color for gradient of the Container Element.

  • Container Gradient End Color – Controls the end color for gradient of the Container Element.

  • Container Border Sizes – Controls the border sizes of the container element. In pixels.
  • Container Border Color – Controls the border color of the container element.

  • Container 100% Height Navigation Background Color – Controls the background colors of the navigation area and name box when using 100% height containers.

  • Container 100% Height Navigation Element Color – Controls the color of the navigation circles and text name when using 100% height containers.

  • Container 100% Height AnimationSelect the animation of the scrolling transition on 100% height scrolling sections. Choose from Fade, Slide, Stack, Zoom, Slide Zoom In, and Slide Zoom Out.

  • Container 100% Height Scroll Sensitivity – Controls the sensitivity of the scrolling transition on 100% height scrolling sections. In milliseconds.

  • Container 100% Height Scroll SpeedControls the speed of the scrolling transition on 100% height scrolling sections. In milliseconds.

  • Container 100% Height Dots NavigationEnable / Disable the dots navigation for 100% height containers. Disabling dots navigation may be useful if using custom navigation.

  • Container 100% Height On Mobile – Turn on to enable the 100% height containers on mobile. Please note, this feature only works when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop, but will need disabled on mobile.

  • Enable Legacy Support – Enable container legacy support.

Avada Website Builder

870,062 Businesses Trust Avada

Avada Website Builder

870,062 Businesses Trust Avada

Avada Website Builder

870,062 Businesses Trust Avada