The Column Element goes hand in hand with the Container Element and is another essential structural component when building your site. Once you’ve inserted a container element into your page, you can then insert a column or set of columns inside it, and then insert elements inside the columns. Continue reading below for a list of column sizes available, a guide on how to use them in the Fusion Builder, and a list of customization options.
How To Use Columns in Fusion Builder
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. You can add an empty Container, but usually, it is at this stage you add Columns to your Container.
Step 4 – To add new columns to the Container, hover over the Container you’d like to add a new column to and you’ll see a ‘+ Column’ button. Click this button to add a new column.
Step 5 – To change the size of an existing column, click on the ‘Resize Column’ icon on the upper left corner of the column. It will appear as the size your column currently is. For example, if it’s a 1/4 column, then the Resize Column option will appear as ‘1/4’.
Step 6 – To re-arrange columns, simply drag and drop the column into place. You can also drag and drop columns into different Containers elements.
How To Use Columns in Fusion Builder Live
Step 1 – Create a new page.
Step 2 – Activate Fusion Builder Live by clicking the ‘Fusion Builder Live’ button on top of the page editor.
Step 3 – Insert a Container element into the page by clicking the ‘Add Container’ Icon on the Fusion Builder Starter Page. Once you insert a Container, you’ll be asked to choose the column or column layout you’d like to use. You can add an empty Container, but usually, it is at this stage you add Columns to your Container, as seen below.
Step 4 – To add new columns to an existing Container, hover over the Column directly before where you’d like to add the column. Mouse over the Column controls and you’ll see an ‘Add Column’ icon. Click this icon to add a new column. You will be presented with the Select Column dialog, where you can choose the layout of your new column/s.
Step 5 – To change the size of an existing column, click on the ‘Column Size’ icon on the column controls. It will appear as the size your column currently is. For example, if it’s a 1/4 column, then the Column Size option will appear as ‘1/4’. Choose your new Column size from the options box.
Step 6 – To re-arrange columns, simply mouse over the Column controls, and drag and drop the column into place. You can also drag and drop columns into different Containers elements.
Different Column Sizes
A column can only be used inside a Container element and will always base its divisions on its width. Most of the time, this will be the Site Width you’ve set for the site. For example, if you’ve set the Site Width to be 1200px, then a 1/2 column will be 600px wide, minus any column spacing you’ve set.
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Column Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Column Element
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Column Element 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.