Fusion Builder

The Fusion Builder is a drag and drop editor that allows you to add complex layout and elements to your page, without code. In some cases, the Fusion Builder will open a dialogue that uses the standard WYSIWYG editor to define the output of an element. Because of this, it is recommended you review the section on the WYSIWYG editor before using the Fusion Builder.
To use the Fusion Builder, click “Use Fusion Builder” in the page editor.

The Main Toolbar

(From left to right)

Builder: The Builder is where you do all of you editing and layouts (more below).

Library:  The Library gives you access to all of your saved Templates, Containers, Columns, Elements and Demos. Basically anything you create that you’d like to reuse can be saved. If you had a layout or sidebar you’d like to use on several of your pages, you can save it and you’d find it here. Saving these does include content, it’s not just for layouts. The Demo pages are premade pages provided by Avada that you can edit for your own use.

Toggle All Containers (solid arrow icon): Quick shortcut to collapse all of your containers so that you can reduce the need to scroll through long pages.

</> (Custom CSS): This is where you enter Custom CSS for the page. If you are unable to achieve the modifications you desire through the Fusion Builder, you can define custom CSS here for this page only. Most every building block in the Fusion Builder has the option to assign an ID or Class to each element in edit menus. Simply reference it here, and it will be applied. For example if you wanted all text within a container to be red, you could enter something like “redtext” into the containers CSS Class field. Then in </> enter “ .redtext{color: red;} “ and all text in that container will be red.

Save Page Layout: Save the entire page layout to be reused later via the Library.

Delete Page Layout (trash can icon): Resets the page to blank.

History (clock surrounded by arrow icon):  Similar to Adobe Photoshop’s History, you step back and forth between actions you’ve taken.

Basic Building Blocks

The basic building blocks are containers, columns, and elements. Each has it’s own set of controls in the upper right, upper left, or upon hovering.

Containers have (from left to right) Edit Settings, Clone, Save and Delete. You can also hide a container to collapse it and clean up your workspace. The container settings have all kinds of settings you can explore to adjust the look and feel.

Columns fit inside containers and dictate how the space is divided. Columns have similar settings to containers with the addition of a resize column option (leftmost option denoted by fractions e.g. 1/1, ½, ⅕, etc.) This option allows you to change the way space is divided, even if elements have already been added to the column.

  • Within the edit settings options, Columns have an animation tab. You can use this to animate the contents within, for example if you wanted this block of content to fade in from the side.

Elements are pieces of content. Each have their own settings and dialogue boxes. Most are self explanatory. When you add an element to a column, you can select from a list of Fusion Builder Elements, saved library elements, or nested columns.

  • For more information on what they are exactly you can view the documentation with examples here. Mouse over elements in the main menu, and select the one you’d like to know more about.

A container with a 1/1 column (100%) and a text element inside that column.

Click to enlarge.

A container with two ½(50%) columns with the text element in the left column.

Click to enlarge.

A container with a 1/4, ⅙, and a ½ column

Click to enlarge.

You can also nest columns inside of columns.

The same container with six ⅙ columns under the text element in the right column.

Click to enlarge.

This should give you an idea of just how far you can go defining your layout. And remember, you can save them for later use.

NOTE: Containers, columns and elements are all drag and drop, you can move and arrange them as you wish so long as the sizes are correct. For example, you cannot add a column to a container that has two ½ columns in it.

Adding Containers, Columns, and Elements

When you enable the Fusion Builder on a blank page you will receive the following dialogue.

Click the blue “+Container” button and select a size to begin. An empty container with a 1/1 column will look something like this.

The column options are located at the top left of the column. They are:

  • Resize Column
  • Edit Settings
  • Copy Column
  • Save to Library
  • Delete Column

Mousing over the lower right corner of the column will reveal two more buttons:

+Container adds additional containers.

+Columns adds additional columns to this container.

Clicking anywhere within the dotted border in the center with +Element in it will allow you to place an element into the column. You may place more than one element into a column. This also reveals the option to add nested columns to further define your layout. Please take some time to explore the various elements offered here. Mouse over elements in the main navigation and click on an individual element to see examples.

Fusion Page Options:

At the bottom of the page are the Fusion Page Options. These are options for editing various elements on the page. You are not permitted to make changes to the Page Title Bar, Header, or Footer with the exception of Main Navigation in the Header section(more information under menus).

Saving to Library

You have the ability to save at each level of building blocks in the Fusion builder using the save button (icon pictured below).

Take note of which level you saved at in order to re-use it. When you are ready to re-use something that you saved, you can retrieve it when creating a new building block (element, column, container or page template). Just look for the “Library + [type of building block]” tab.

Fig. 1

Fig. 2

For example, if you saved a container, you can re-use it by adding a new container to the page (see fig. 1) and then selecting the “Library Containers” tab from the corresponding pop up (see fig. 2).

Similarly, If you saved an element, you can re-use it by adding a new element to the page, and then selecting the “Library Elements” tab from the corresponding pop up.