Fusion Builder Tools & Icons

03/06/2019

To gain a better understanding of how to use the Fusion Builder and how it functions, we’ve created an article that explains all the tools and icons that you’ll encounter when using the Fusion Builder and the other areas included in it.

Main Control Bar

Fusion Builder Main Control Bar

Builder Tab – Illustrated as A. Contains all your page content and elements. This is where you add and modify the columns, elements and the like.

Library Tab – Illustrated as B. Allows you to import any of our demo content into your page. On this tab, you can also view and load custom templates you’ve saved.

Collapse Icon – Illustrated as C. Click this icon to collapse or expand all of your existing Containers on the page.

Custom CSS Icon – Illustrated as D. Click here to expand the custom CSS field. Click again to collapse it. Custom CSS added through this field will only affect the specific page.

Save Page Layout Icon – Illustrated as E. Click here to save the current page layout as a template. Once you save a page as a custom template, you can load it as many times.

Delete Page Layout Icon – Illustrated as F. Click here to delete your current page layout and clear the page editor.

History States Icon – Illustrated as G. Click here to expand the history tab. Here, the past 20 or so actions you’ve done will be displayed. You can click on any of these actions to revert back to any one of them.

Info Icon – Illustrated as H. Click here to read the Fusion Builder documentation.

Library Window Tab

A. Demos Tab

Select any of our demos from the dropdown and all it’s pages that are available to import will display in a list. Select the page you’d like to import into your page from the list, and click the ‘Load’ button beside it. Importing a Demo Page will overwrite any page content you currently have on the page.

Fusion Builder Library Tab

B. Templates Tab

Enter a custom name in the text field provided, then click ‘Save Template’ to save your current page as a Custom Page Template. You can also load, edit and delete custom page templates you’ve already created.

Fusion Builder Template Library

C. Containers Tab

View your saved Containers on this tab. You can delete saved Containers, but you can’t load them from the Library window. To load saved Containers, click the ‘+ Container’ button and switch to the ‘Library Containers’ tab.

Fusion Builder Container Library

D. Columns Tab

View your saved Column sections on this tab. You can delete saved columns, but you can’t load them from the Library window. To load saved Columns, click the ‘+ Columns’ button and switch to the ‘Library Columns’ tab.

Fusion Builder Column Library

E. Elements Tab

View your saved Elements on this tab. You can delete them, but you can’t load them from the Library window. To load saved elements, create a Column first. click ‘+ Element’ and switch to the ‘Library Elements’ tab.

Fusion Builder Elements Library

Containers

Fusion Builder Containers

Name Field – Illustrated as A. Click on the title to give the Container a custom name.

Settings Icon – Illustrated as B. Click here to view the options for the Container.

Clone Section Icon – Illustrated as C. Click here to clone the Container.

Save Icon – Illustrated as D. Click here to save the Container as a template.

Delete Icon – Illustrated as E. Click here to delete the Container.

Collapse Icon – Illustrated as F. Click here to expand or collapse the Container.

Add Container – Illustrated as G. Hover over the bottom area of the current Container, and a ‘+ Container’ button will appear. Click this to add another Container directly below your current one.

Add Columns – Illustrated as H. Hover over the bottom area of the current Container, and a ‘+ Columns’ button will appear. Click this to add more columns to the Container.

Columns

Fusion Builder Columns

Add Element – Illustrated as A. Click here to add an element.

Resize Column Icon – Illustrated as B. Click here to bring up the available column sizes, then simply select a size you’d like your column to change to.

Settings Icon – Illustrated as C. Click here to bring up options for the column.

Clone Section Icon – Illustrated as D. Click here to clone the Column.

Save Icon – Illustrated as E. Click here to save the Column as a template.

Delete Icon – Illustrated as F. Click here to delete the Column.

Elements Window

Fusion Builder Elements

Builder Elements Tab – Illustrated as A. View all the available elements here. Click the Element to add it to the column.

Library Elements Tab – Illustrated as B. View all your saved elements here. Click the Element to add it to the column.

Nested Columns Tab – Illustrated as C. View all available Nested Column elements here. Click your desired column layout to add it to the column.

Search Bar – Illustrated as D. Use the search bar to look for specific elements from the list. Use simple keywords, such as Button.

Elements – Illustrated as E. Choose from the full range of Elements shown in the Elements Window.