The Fusion Builder Library Overview

The Fusion Builder Library Overview

03/12/2018

The Fusion Builder Library allows you to save, and quickly redeploy any of your Fusion Builder content, from complete Pages through to Containers, Columns, and individual Elements. The Library also allows you to import individual pages from the Avada Demos.

The Fusion Builder Library window has 5 main tabs – Demos, Templates, Containers, Columns, and Elements, organizing the various pieces of content into their own sections. To learn more about each tab, please read the Library Window Tabs section in our article about Fusion Builder's Tools and Icons.

Please read below to see how to take full advantage of the awesome Library in Fusion Builder! You can also watch the Fusion Builder Library Video!

Watch the Fusion Builder Library Video!
Library Tabs Overview

Overview

What Can Be Saved To The Library

> Demos - Avada Demo pages can not be saved, only imported. To see how to load these, see the Loading Avada Demos section below in How to Load Items from the Library.

> Templates - When saving a full-page layout, it is saved as a Template. This includes all containers, columns and elements on the page and their settings, as well as the Page Template, any custom CSS set on the page via the Custom CSS icon on the Fusion Builder, and any settings in the Fusion Page Option panel.

This ensures that your page layout is intact and identical when you load it into another page. We've also added options that give you maximum flexibility on how to load the page template into a new or existing page. For more details, please read our Fusion Builder Custom Page Templates article.

> Containers - You can save individual Containers into the Library. This includes all columns and elements currently inside the Container, as well as their settings.

> Columns - You can save individual Columns into the Library. This includes all elements currently inside it and their settings.

> Elements - You can save individual Elements into the Library. This includes all its current settings, as well. Saved elements can be added back into the same sized columns, or larger or smaller ones as well.

How To Save Items To The Library

Step 1 – Determine what section you’d like to save into the Library.

Step 2 – On the corresponding section’s toolbar, as you can see in the image below, you'll find the 4 ‘Save to Library’ icons, corresponding to Full Page, Container, Column and Element.

Step 3 - Click the appropriate 'Save to Library' icon, and the Library window will pop up. If you're saving a Full-Page Layout, it will be saved under the 'Templates' tab. If you're saving a container, a column, or an element, it will be saved under the corresponding tab.

Step 4 - Using the text field, enter a custom name for your Library item. Use a descriptive name that will make it easy to find the item when redeploying. Once finished, click the 'Save’ button, or hit Enter on your keyboard.

Step 5 – When it has saved, the new Library item will appear in the Library contents. It is now available to be redeployed at any time. You can now close the Library window and return to your page.

Library Saving Locations

Right Click Options

With Avada 5.6 and up, there is some great new right click options, including the ability to save items to the library. This can be used on Containers, Columns and Elements. Try it out, you'll love it!

READ MORE ABOUT FUSION BUILDER RIGHT CLICK OPTIONS HERE

How To Load Items From The Library

Once you have saved your Templates, Containers, Columns and Elements to the Fusion Builder Library, you can then easily load them anywhere, on any page, as many times as you’d like. Loading Containers, Columns and Elements not only loads the content itself, but also all its settings and options. This ensures that you load the exact same template you saved.

Let’s look at how you load the different types of Library content that is available.

Loading Avada Demo Pages

With Avada 5.0 and up, you can now import individual pages from any of the Avada demos and customize them as you like.

IMPORTANT NOTE: Please note that importing a demo page will replace any content that is currently on the page.

When you import a single demo page, you are not only importing the page layout and content, but also the page template that was used, the Fusion Page options enabled, and image placeholders with size specifications. Global theme options, Sliders, Custom Post Types and any licensed images and video are not imported.

To import a Demo Page:

Step 1 - Create a new page or edit an existing one.

Step 2 - Click on the Library tab in the top bar of the Fusion Builder.

Step 3 - Select the Demos tab.

Step 4 - Choose your preferred demo from the dropdown list.

Step 5 - Select the page you want to import.

Step 6 - Choose Load and click OK in the dialog to confirm.

Loading a Demo Page from the Library
Read more about Installing Individual Demo Pages Here

Loading Page Templates

Previously saved full-page templates can also be loaded from the Fusion Builder Library. With Avada 5.0 and above you now have three options of how to load this type of content, including Replace all page content, Insert above current content or Insert Below current content. This makes it easy to add type of content to both new pages and pre-existing pages.

To load a Page Template:

Step 1 - Create a new page or edit an existing one.

Step 2 - Click on the Library tab in the top bar of the Fusion Builder.

Step 3 – The Templates tab will be selected.

Step 4 - Choose your saved Page Template from the Library Content area.

Step 5 – Mouse over Load and select the loading method you prefer.

The content will now load into the page.

Loading Containers

Step 1 - To load a saved Container from the Fusion Builder Library, you access the Library by clicking on the + Container Icon. If you are starting a new page, the + Container Icon is directly under the top bar of the Fusion Builder, and if you already have content on the page, the + Container Icon can be located at the bottom right of every container. See images below.

Step 2 - On the Insert Containers dialogue that pops up, select the Library Containers Tab.

Step 3 – Click on the desired saved Container. It will be inserted directly into your page.

If you wish, you can then, of course, reorder the containers on your page by moving them around by the title bar.

Loading a container on a new page
Loading a container on an existing page

Loading Columns

To load a saved column, you must first have a container to load it into.

Step 1 – Create or select a Container to load the Column into. You can add a blank Container or a pre-populated one, but the saved Column will load with the size it was saved with (1/1, 1/2, 1/3 etc.), so depending on any pre-existing Container content, the column might need to be resized or moved.

Step 2 – To access the Library, click on the + Columns Icon at the bottom right of the Container (see image below).

Step 3 – On the Insert Columns dialogue that pops up, select the Library Columns Tab.

Step 4 – Click on the desired saved Column. It will be inserted directly into your Container.

Adjust as needed.

Loading a column on an existing page

Loading Elements

To load a saved Element, you need a pre-existing Container and Column. Unlike Columns, saved Elements do not have a pre-set size. So, you can insert the same saved Element into any sized Column (if it is appropriate for the content).

Step 1 – Create or select a Container with a Column. Inside the Column, you will see the + Element Icon (see image below).

Step 2 – To access the Library, click on the + Element Icon and on the Select Element dialogue that pops up, select the Library Elements Tab.

Step 3 – Click on the desired saved Element. It will be inserted directly into your selected Column.

Ho to load a saved library element

Global Elements

With Avada 5.0 and up, you can now save items to the Fusion Builder Library as Global elements. This applies to Containers, Columns and Elements.

This allows you to set up one instance, that in turn can be deployed across your site, wherever you choose. Edit the Global Element once and see the changes populated across the entire site.

For more details on saving and deploying Global Elements, please read our Fusion Builder Global Elements article.

Managing Fusion Builder Library Assets

With the release of Avada 5.6, we have added a Fusion Builder element library admin section, so you can easily manage, and edit your saved elements, columns, and containers, as well as your global elements. You can edit them individually, delete them, and sort them per category type. The Library section is found under Fusion Builder in your main WordPress Menu. See an example below.

Managing Library Assets

Category types are labelled as Element, Column, Container and shown in different colors. Global items have the global icon. You can sort the items per category type or global items. The colored category types and the global icon can also be clicked to go to their corresponding list. For example, if you click Column label, it will go to the list of all your saved columns.

How To Edit Saved Elements

Step 1 - When you hover over the title of the item you wish to edit; an Edit and Trash links will appear.

Step 2 - Click the Edit link.

Step 3 - You will be sent to the saved element, column, or container which looks like a page. Here you can edit the element, column, or container. View screenshot below. Note: This is not a real page, only a saved element, column, or container.

Step 4 - Make the necessary changes.

Step 5 - When you are finished, click the Update button.

Editing saved elements in the Library

You will notice that the Library UI is slightly different for element, column, and container. Elements will only have the edit function, as you cannot add anything with it. Columns will have the edit function for the column, as well as edit, clone, and delete options for the element, and an option to add a new element. Containers will have the full options (e.g. add, edit, clone, and delete column; add, edit, clone, and delete element).

We have also added Right Click Options in the Element Library in Avada 5.6.1, so you can easily manage your saved global and non-global elements.

IMPORTANT NOTE: When editing a saved element, column, or container from this Fusion Builder Library, the changes will be visible on the saved element, column, or container across your site once you click the Update button.

How To Delete Saved Elements

Step 1 - When you hover over the title of the item you wish to edit; an Edit and Trash links will appear. View screenshot here.

Step 2 - Click Trash link. Or you can also choose to delete the saved items in bulk by checking the checkboxes and clicking the Bulk Actions dropdown menu and choose ‘Move to Trash’, then click Apply button. View screenshot here.

Step 3 - The item will be moved to the Trash list. Hover over the item and you can choose if you want to restore or delete it permanently. View screenshot here.

IMPORTANT NOTE: When deleting a saved non-global element, column, or container from this Fusion Builder Library, it will not delete the particular item used in your pages except for global elements. Global element deleted from the Fusion Library will delete the instances where it is used on your pages.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept