One of Fusion Builder’s most important elements is the Container Element. This element is the structural 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, otherwise your layout will break. The Container Element is also hugely flexible and provides a great range of functional and design options that allow you to build your site exactly how you want it. Read below to discover all about the Container Element.
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.
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. As you insert a Container, you’ll be asked to choose the 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.
Inside the Container Element’s options, you will find 4 tab groups. The General tab, the Design tab, the BG (Background) tab, and the Extras Tab. Because of the amount of options you can set for the element, we’ve split them into 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 all screenshots here show ALL options, (achieved 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.
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.
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.
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.
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.
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.
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.
BG (Background) Tab
The BG (Background) Tab has been re-arranged into four sub-tabs, controlling all aspects of possible container backgrounds. With the addition of gradient backgrounds, there are a multitude of background options, and these options can also be combined; for example you can have a background image with a background colour or gradient (with opacity) as an overlay.
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.
The new Gradient tab allows you to add a color gradient as the background of a container. You can choose from a radial or a linear gradient, and there are many options to control the angle and starting and ending point of the gradient. Like the color tab option, the gradient colors can also have any level of transparency, enabling them for use as overlay colors for background images or videos. See the full options below.
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. This field can also take dynamic content.
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
Background Blend Mode – Choose how belending should work for multiple background layers. For example, if you have a background image and add a color overlay (by adding a background color or gradient with opacity) then this options controls how those two layers interact.
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 – 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 – 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.
This new 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 independetly and in conjunction with filters set in columns. There is a multitude of possibilities for this new feature, and a new Filters Feature page showing more examples of what you can do and a video on this feature are both under production and will be released shortly.
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 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.
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.