Container Element

08/03/2019

One of Fusion Builder’s most important elements is the Container Element. This element is the foundation of all page layouts created within Fusion Builder, and is an integral part in making sure your designs stay organized and intact. All columns and elements must be contained within a Container, or else your layout will break. The Container Element is also widely flexible and provides specific options and settings that allows you to build your site exactly how you want it. Read below to discover all about the Container Element.

Container Element
View the Container Demo Page!

Full Width Sizing

While the Container Element is mostly independent, some of it’s features rely on other factors on your site, such as your Site Width. The Fusion Builder’s Container Element enables the background color, image, or border to span 100% of the browser width depending on the Page Template it’s being used on. Below are some examples of how the Container Element reacts to different types of settings.

  • Default Template – Content is contained to the Site Width of your site.
  • 100% Width Template – Content can expand out to 100% width of the browser window.

  • With A Sidebar – Content stops at the sidebar column.

How To Use The Container Element

Step 1 – Create a new page, or edit an existing one.

Step 2 – Activate the Fusion Builder by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 3 – Insert a Container element into the page by clicking the ‘+ Container’ button. Once you insert a Container, you’ll be asked to choose the column or column layout you’d like to use.

Step 4 – If you’d like to add a Container below an existing Container, simply hover over the existing Container and a ‘+ Container’ button will appear. Click this button to add a new Container directly below your existing one.

Step 5 – Once you’ve added a Container with columns inside it, you can then add elements into the columns.

Step 6 – To re-arrange Containers, simply drag and drop the Container into place.

Element Options

Inside the Container Element’s options, you will find 3 tab groups. The General tab, the Background tab, and the Design tab. Because of the amount of options you can set for the element, we’ve split them into three 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.

General Tab

100% Height

100% Height – Allows you set the container into full-screen or 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. 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.

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.

Center Content – Allows you to center the content vertically on 100% height containers.

Set Columns to Equal Height

When using a set of columns in the Container Element, the height of each column is determined by the length of the content displayed inside it. However when designing, columns with equal heights — regardless of content — looks much cleaner and organised. This is why we’ve added an option called ‘Set Columns to Equal Height’ to the Fusion Builder’s versatile Container Element. When enabled, this option will make all columns inside the Container equal in height. The height for all columns will follow the tallest column in the set.

How To Enable Equal Column Heights

Step 1 – Navigate to the Container Element’s options page by clicking the ‘Container Settings’ on the upper right corner of the element.

Step 2 – Once in the options page, switch to the ‘General’ tab and set the ‘Set Columns To Equal Height’ option to Yes.

Step 3 – Once finished, click the ‘Save’ button.

Menu Anchor Option

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 Option

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 on the Theme Options.

Container Publishing Status

Container Publishing Status – With Avada 5.7, we have introduced this new, very useful feature. Now, with Fusion Builder, 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 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 the image below 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 – 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. 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.

IMPORTANT NOTE: Any content that is in a drafted or scheduled Container is not loaded on the front end for logged out site visitors, and therefore, won’t be indexed by search bots and will have no impact on SERPs.
Container Publishing Status Date and Time Picker
Container Element Publish Icons

CSS Options

CSS Class – This option lets you add a class name to the wrapping HTML 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 – This option lets you add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

Container Element - CSS Options

Background Tab

Background Color Option

Set a custom solid color for your Container Element by entering a hexcode into the ‘Container Background Color’ field, or use our Color Picker tool to choose your desired color.

Background Image Options

Background Image – Allows you to easily upload your desired background image by clicking the ‘Upload’ button. Accepts common image file types such as .JPG, .PNG, .TIF, .GIF, and the like.

Background Position – Controls how your background image is positioned. Choose between Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.

Background Repeat – Controls how your background image repeats. Choose between No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, or Repeat Vertically.

Fading Animation – Enables the background to fade and blur on scroll. This option is specifically for images only. Choose Yes to enable the option, or No to disable it.

Background Parallax – Controls how the background image scrolls. Choose between No Parallax, Fixed, Up, Down, Left, or Right.

Enable Parallax On Mobile – Allows you to enable or disable the parallax effect on mobile. Only works on Up, Down, Left or Right settings. 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 – Controls the scrolling speed of the parallax effect. Accepts a numerical value from 0, which is the slowest, to 1, which is the fastest. For example, .4

Container Element - Background Image Options

Background Video Options

Video MP4 Upload – Allows you to upload a .MP4 format of your video file. For your video to render with cross browser compatibility, you must upload both .WebM and .MP4 files of your video. Make sure your video is in 16:9 aspect ratio. OGV is optional.

Video WebM Upload – Allows you to upload a .WebM format of your video file. For your video to render with cross browser compatibility, you must upload both .WebM and .MP4 files of your video. Make sure your video is in 16:9 aspect ratio. OGV is optional.

Video OGV Upload – Allows you to upload a .OGV format of your video file. This is optional.

Youtube/Vimeo Video URL or ID – Allows you to upload a YouTube or Vimeo video by entering the video’s URL. 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 – Allows you to input an aspect ratio so the video is resized and displayed properly.

Loop Video – Allows you to loop the video. Choose Yes to enable the option, or No to disable it.

Mute Video – Allows you to mute the video’s audio. Choose Yes to enable the option, or No to disable it. Note: 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 – Allows you to upload a preview image that’ll display in the event that your video doesn’t display correctly. Note: This field must be used for self hosted videos. Self hosted videos do not work correctly on mobile devices. The preview image will be seen in place of your video on older browsers or mobile devices.

Container Element - Background Video Options

Design Tab

Background Border Options

Border Size – Accepts a pixel value that sets the border’s thickness. For example, 4px.

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.

Container Element - Border Options

Margin Options

Top Margin – Illustrated as A. Accepts a numerical value that sets the top margin of the Container Element. For example, 25.

Bottom Margin – Illustrated as B. Accepts a numerical value that sets the bottom margin of the Container Element. For example, 25.

Padding Options

IMPORTANT NOTE: Enabling 100% Interior Content Width will remove left and right padding.

Top Padding – Illustrated as A. Accepts a numerical value that sets the padding of the top section of the Container Element. For example, 25.

Right Padding – Illustrated as B. Accepts a numerical value that sets the padding of the right section of the Container Element. For example, 25.

Bottom Padding – Illustrated as C. Accepts a numerical value that sets the padding of the bottom section of the Container Element. For example, 25.

Left Padding – Illustrated as D. Accepts a numerical value that sets the padding of the left section of the Container Element. For example, 25.

Global Options

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 Border Size – Controls the top and bottom border size 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 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.

Container Element Global Options

Container Parameters

Each of these parameters correspond to each individual Element option as shown above, in this document. Likewise, the format illustrated below is what you will see if the Fusion builder is deactivated in your page/post.

Copy to Clipboard
  • hundred_percent – Choose from yes, or no. Sets if the interior content is 100% width or contained to the site width setting. Select yes for full width, and no for site width.
  • hundred_percent_height – Choose from yes, or no. Sets if the container should be fixed to 100% height of the viewport.
  • hundred_percent_height_scroll – Choose from yes, or no. Sets the container to a collection of 100% height containers that share scrolling navigation.
  • hundred_percent_height_center_content – Choose from yes, or no. Sets to center the content vertically on 100% height containers.
  • equal_height_columns – Choose fromyes, or no. Sets all the column elements inside the container to be equal heights.
  • menu_anchor – The unique name you give a menu item.

  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • background_color – Accepts a hexcode ( #000000 ). Sets the icon’s BG color.
  • background_image – The URL path of the background image you’d like to display. For example, http://www.sample.com/image.jpg
  • background_position – Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom. Sets the background’s position.
  • background_repeat – Choose from no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
  • fade – Choose from yes, or no. Sets the image to fade and blur on scroll. Works for images only.
  • background_parallax – Choose from none, fixed, up, down, left, or right. Sets how the background image scrolls and responds.
  • enable_mobile – Choose from yes or no. Enable or disable parallax on mobile. Please be aware this may cause slowdowns.
  • parallax_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • video_mp4 – The URL path of your MP4 video file. WebM and MP4 format must be included to render your video with cross browser compatibility.
  • video_webm – The URL path of your WebM video file. WebM and MP4 format must be included to render your video with cross browser compatibility.
  • video_ogv – The URL path of your OGV video file. This is optional.
  • video_url – The URL path of a YouTube or Vimeo video.
  • video_aspect_ratio – Accepts a numerical value. For example, 16:9, 4:3, or 16:10. Sets the video’s aspect ratio.
  • video_loop – Choose from yes, or no. Enable or disable video loop.
  • video_mute – Choose from yes, or no. Mute or unmute audio.
  • video_preview_image – The URL path of the preview image you’d like to display. For example, http://www.sample.com/image.jpg
  • border_size – Accepts a pixel value. For example, 5px. Sets the border’s size.
  • border_color – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • border_style – Choose from solid, dashed, or dotted. Sets the border’s style.
  • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
  • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • padding_top – Accepts a numerical value. For example, 20. Sets the top padding.
  • padding_right – Accepts a numerical value. For example, 20. Sets the right padding.
  • padding_bottom – Accepts a numerical value. For example, 20. Sets the bottom padding.
  • padding_left – Accepts a numerical value. For example, 20. Sets the left padding.
  • class – Add a custom class to the wrapping HTML element for further css customization.

  • id – Add a custom id to the wrapping HTML element for further css customization.