Fusion Builder Tools & Icons

09/10/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 both the back-end wireframe Fusion Builder and the new Fusion Builder Live Editor.

The Fusion Builder Toolbar

Fusion Builder (Back-End) Toolbar

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.

Fusion Builder Live Editor Toolbar

Fusion Builder Main Control Bar

Fusion Builder – Illustrated as A. This is the Fusion Builder Icon, and shows the Builder version if you mouse over it.

Toggle Sidebar Icon –  Illustrated as B. This opens and closes the Sidebar, where you can access the Theme Options, Page Options, and the Element Settings.

Library Icon – Illustrated as C. This accesses the Fusion Builder Library.

History Icon – Illustrated as D. This shows the latest 25 history states, allowing you to step backward throughout your actions.

Preferences Icon – Illustrated as E. Here you can access the Fusion Builder Preferences.

Add New Icon – Illustrated as F. This icon allows you to add a new Post, Page, Portfolio, FAQ, Layout or Element.

Clear Layout Icon – Illustrated as G. This clears the layout from the page.

Support Icon – Illustrated as H. Offers links to our Getting Started documentation, our Support portal, and the keyboard shortcuts available.

Responsive Icon – Illustrated as I. Here you can preview the page in responsive mode, in desktop, tablet, and phone preview.

Toggle Wireframe Icon – Illustrated as J. Click this icon to toggle the back-end wireframe in the Front-End Builder.

Preview Icon – Illustrated as K. Preview mode closes all panels and removes front-end icons to give you a  quick, clean page preview.

Publish Icon – Illustrated as L. This button allows you to quickly set the state of the page to Published.

Draft Icon – Illustrated as M. This button allows you to quickly set the state of the page to Draft.

Save Button – Illustrated as N. The Save Button allows you to save all the work done in the Front-End Builder, including edits to Elements, and theme and page options settings.

Exit Button – Illustrated as O. The Exit Button allows you to exit the builder, to the page front-end, the page back-end, or the WordPress dashboard.

Containers

Fusion Builder (Back-End) Container Icons

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.

Fusion Builder Live Editor Container Icons

Fusion Builder Containers

Drag Container Icon – Illustrated as A. This icon activates the hand icon, with which you can drag your containers around in your layout.

Delete Container Icon – Illustrated as B. This deletes your container.

Save Container Icon – Illustrated as C. This opens the Library to the Containers tab, where you can save your container.

Clone Container Icon – Illustrated as D. This duplicates the container and places it directly below in the layout.

Container Settings Icon – Illustrated as E. This opens the Container Settings dialog in the Sidebar.

Add Container Icon – Illustrated as F. This opens the Add Container dialog, where you can add an empty container or any combination of Container and Column.

Add Element Icon – Illustrated as G. This opens the Add Element Window. This will only show if there is a column inside the Container.

Columns

Fusion Builder (Back-End) Column Icons

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.

Fusion Builder Live Editor Column Icons

Fusion Builder Containers

Column Settings Icon – Illustrated as A. This opens the Column Settings dialog in the Sidebar.

Add Column Icon – Illustrated as B. This opens the Add Column dialog, where you can add an empty container or any combination of Column.

Column Size Icon – Illustrated as C. This allows you to adjust the size of your Column.

Clone Column Icon – Illustrated as D. This duplicates the Column and places it directly below in the layout.

Save Column Icon – Illustrated as E. This opens the Library to the Columns tab, where you can save your Column.

Delete Column Icon – Illustrated as F. This deletes your Column.

Drag Column Icon – Illustrated as G. This icon activates the hand icon, with which you can drag your Column around in your layout.

Add Element Icon – Illustrated as H. This opens the Element Window, allowing you to add an Element to your Column.

Container Control Icons – Illustrated as I. These are the initial Container Element Controls, visible for the Container the Column is inside.

Elements Window

Fusion Builder

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

Fusion Builder Live Editor

Fusion Builder Containers

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 layouts 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 D. These are the available Fusion Builder Elements.

Fusion Builder Library Tabs

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