The Avada Builder Library Overview

02/09/2020

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

The Avada Builder Library window has 5 main tabs – Websites, 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 Avada Builder’s Tools and Icons.

Please read below to see how to take full advantage of the awesome Library in Avada Builder, or watch the video below for a visual overview.

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

Overview

What Can Be Saved To 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 Avada Builder, and any settings in the Avada 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 Avada 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. Remember you can save an Element, a Column, a Container, or a full page layout.

Step 2. Click the appropriate ‘Save to Library’ icon, and the Library window will pop up, with the appropriate tab open. 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 3. 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 4. 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 > Save Container

Right Click Options

There are also 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 AVADA BUILDER RIGHT CLICK OPTIONS HERE

How To Load Items From The Library

Once you have saved your Templates, Containers, Columns and Elements to the Avada 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 Prebuilt Avada Website Pages

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

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

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

To import a Prebuilt Website 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 Avada Builder.

Step 3 – Select the Websites tab.

Step 4 – Choose your preferred prebuilt website from the dropdown list.

Step 5 – Select the page you want to import.

Step 6 – Choose Load (Avada Builder) or the Plus icon (Avada Live) and click OK in the dialog to confirm.

IMPORTANT NOTE: In Avada 5.8.1 and up, there is also an alternative way to load demo pages. On the right hand side at the top, you can simply paste a URL of any live demo page, and the page will instantly show below with a load button to import it.
Import Prebuilt Website Page
Read more about Installing Individual Prebuilt Website Pages Here

Loading Page Templates

Previously saved full-page templates can also be loaded from the Avada Builder Library. You 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 Avada Builder toolbar.

Step 3. Select the Templates tab.

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

Step 5. Mouse over Load (or the plus symbol in Avada live) and select the loading method you prefer.

The content will now load into the page.

Library > Load Page Template

NB. This is the Avada Builder (back-end) interface here, but it’s almost identical in Avada Live.

Loading Containers

Step 1. To load a saved Container from the Avada Builder Library, it depends on which interface of the Builder you are using. In Avada Builder, you access the Saved Containers by clicking on the + Container Icon. If you are starting a new page, the + Container Icon is a blue button that is part of the Starting Page. 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.

If you are in Avada Live, you mouse over the Add Container Icon on the Element Controls of the Container immediately preceding where you want the new container to go. On a new page, you would just click on the Add Container link on the Starter Page.

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.

Avada Builder Starter 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). In Avada Live, click on the Add Column Icon from the Element Controls of the preceding Column, or the empty Column added when you add a Container.

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 preset 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 Avada 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 Avada Builder Global Elements article.

Managing Avada Builder Library Assets

With the release of Avada 5.6, we added an Avada 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 is found under Avada > Library, from the WordPress Dashboard. 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 Library Item

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 the Avada 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.

Step 2 – Click Trash link. You can also choose to delete saved items in bulk by checking the check boxes, clicking the Bulk Actions dropdown menu and choosing ‘Move to Trash’, then clicking the Apply button. View screenshot below.

Step 3 – The item will be moved to the Trash list. If you hover over the item in the Trash, you can choose to restore it or delete it permanently.

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