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