Avada 文档

Avada Builder Tools & Icons

To gain a better understanding of how to use the Avada 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 Avada Builder and Avada Live, the front end editing interface.

The Avada Builder Toolbars
ContainersColumnsElement Window
Avada Library Tabs,The Avada Builder ToolbarsAvada Builder (Back-End) ToolbarBuilder 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 Avada Builder documentation.
Avada Live (Front-End) ToolbarAvada Builder – Illustrated as A. This is the Avada Icon, and shows the current version if you mouse over it.
Toggle Sidebar Icon – Illustrated as B. This opens and closes the Sidebar, where you can access the Global Options, Page Options, and the Element Settings.
Library Icon – Illustrated as C. This accesses the Avada 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 Avada 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. This is now also a Responsive Editing Mode, for use with the Responsive Option Sets.
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 global 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.,ContainersAvada Builder (Back-End) Container IconsName 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.
Avada Live (Front-End) Container IconsDrag 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.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,ColumnsAvada Builder (Back-End) Column IconsAdd Element – Illustrated as A. Click here to add an element to the Column.
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.
Avada Live (Front-End) Column IconsColumn 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 WindowAvada BuilderBuilder 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.
Avada LiveBuilder 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 Avada Builder Elements.,Avada Builder Library TabsA. Websites TabSelect any of our pre-built websites from the dropdown and all its 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 Pre-built Website Page will overwrite any page content you currently have on the page.
B. Templates TabEnter 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.
C. Containers TabView your saved Containers on this tab. You can delete and edit saved Containers here, 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.
D. Columns TabView 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.
E. Elements TabView 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.

Avada Builder Right Click Options

A small, but awesome feature, that was added back in Avada 5.6, is the ability to manage your Avada Builder Elements, Columns, and Containers through a right click menu.
When you right click within the Avada Builder, or within Avada Live, a contextual menu appears, with options for you to edit, clone, save, remove, copy, and paste elements. This provides easier element interactions and improves your workflow efficiency. Continue reading below to know more about the options available in the Avada Builder right click feature, or watch the video below for a visual overview.
Right Click Feature MenusThe Avada Builder right click feature gives you largely common choices for the various assets. The main differences are the paste options for Elements vs. Columns vs. Containers. Please see below examples of what the menu looks like, and the list of the options available, when you right click on Containers, Columns, or Elements.
Avada Builder Container Right Click Options
Edit – this will open the Settings of the specific Container where you can customize it.

Save – this opens the Library window, where you can save the specific Container, as a normal or a global Container.

Clone – this will clone the specific Container and place the cloned Container directly after its original.

Remove – this will delete the specific Container from your layout. If you delete an element by mistake, you can use the History feature to undo it. For more information on this, view the History Feature document.

Copy – this will copy the specific Container. Once a Container has been copied, paste options will be available when you right click on a Container again.

Paste At Start – this option is only available in Columns and Containers. If you copy an Element, and right click on a Column, it will paste the copied Element at the start of the Column, or if you copy a Column and right click on a Container, it will paste the copied Column at the start of the Container.

Paste At End – this option is only available in Columns and Containers. If you copy an Element, and right click on a Column, it will paste the copied Element at the end of the Column, or if you copy a Column and right click on a Container, it will paste the copied Column at the end of the Container.

Paste Before – You will get this right click option, when you copy an Element, Column or Container, and then right click on the same type of element again. This will paste the copied item before the item you have right clicked on.

Paste After – You will get this right click option, when you copy an Element, Column or Container, and then right click on the same type of element again. This will paste the copied item after the item you have right clicked on.
Avada Builder Column Right Click Options
Edit – this will open the Settings of the specific Column, where you can customize it.

Save – this opens the Library window, where you can save the specific Column, as a normal or a global Column.

Clone – this will clone the specific Column and place the cloned Column directly after its original.

Remove – this will delete the specific Column from your layout. If you delete an element by mistake, you can use the History feature to undo it. For more information on this, view the History Feature document.

Copy – this will copy the specific Column. Once an element has been copied, paste options will be available when you right click on a Column again.

Paste At Start – this option is only available in Columns and Containers. If you copy an Element, and right click on a Column, it will paste the copied Element at the start of the Column, or if you copy a Column and right click on a Container, it will paste the copied Column at the start of the Container.

Paste At End – this option is only available in Columns and Containers. If you copy an Element, and right click on a Column, it will paste the copied Element at the end of the Column, or if you copy a Column and right click on a Container, it will paste the copied Column at the end of the Container.

Paste Before – You will get this right click option, when you copy an Element, Column or Container, and then right click on the same type of element again. This will paste the copied item before the item you have right clicked on.

Paste After – You will get this right click option, when you copy an Element, Column or Container, and then right click on the same type of element again. This will paste the copied item after the item you have right clicked on.
Avada Builder Element Right Click Options
Edit – this will open the Settings of the specific element where you can customize it.

Clone – this will clone the specific element and place the cloned element directly after its original.

Save – this opens the Library window, where you can save the specific Element, as a normal or a global Element.

Remove – this will delete the specific Element from your layout. If you delete an element by mistake, you can use the History feature to undo it. For more information on this, view the History Feature document.

Copy – this will copy the specific element. Once an element has been copied, paste options will be available when you right click on an element again.

Paste Before – You will get this right click option, when you copy an Element, Column or Container, and then right click on the same type of element again. This will paste the copied item before the item you have right clicked on.

Paste After – You will get this right click option, when you copy an Element, Column or Container, and then right click on the same type of element again. This will paste the copied item after the item you have right clicked on.
Library Right Click OptionsThere are also right click options in the Avada Builder Library Edit Screens. The Library allows you to save and redeploy any elements, columns or containers, and even save pages as templates. Read more about the Avada Builder Library here.
If you are editing a saved library item, you will also have right click menus. If you right click on the same element type that it has been saved as, (e.g. right clicking on an element if the library type is for element) then it will only show Edit and Copy options. Other options such as Clone, Save, Remove, and Paste will be available if for example you right click on an element in a column or container library type.
IMPORTANT NOTE: You can copy an Element, Column, or Container from one page/post and then paste it into any other  pages/posts as you require (or as many times). This includes adding Elements to widgets.

Avada Builder Quick Start Guide

The Avada Builder is ThemeFusion’s very own page builder, now available in both front-end and back-end interfaces. With this fully featured, and easy to use page builder, you can build complex layouts without any coding knowledge at all.
With the release of Avada 6.0, we introduced ‘Fusion Builder Live’, an awesome companion to the traditional wireframe builder. In Avada 7, Fusion Builder Live was renamed to Avada Live.
Read on below to get an overview of the Avada Builder, and for links to many Avada Builder resources.
Learn More About ‘Avada Builder vs Avada Live’,The Avada Builder Creation ProcessRegardless of whether you are editing with the traditional Avada Builder wireframe editor, or Avada Live, the creation process is the same. You always start by creating a Container. Then you add columns to the container, and then finally, add Avada Builder elements to the columns. This makes your content easier to organize and allows for maximum compatibility. To get a full description of the building process, see the ‘How The Avada Builder Works’ link below.
Learn About ‘How The Avada Builder Works’767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Avada Builder Tools & FeaturesThe following documents are about the Avada Builder’s tools and features, and how to use them.

Avada Library – With the Avada Builder Library, you can save and redeploy all types of page content, from elements, columns, containers and even full pages.
History Feature – Redo and undo almost any action you’ve done while building a page with Avada Builder with our new History States feature.
Right-Click Feature – With the Avada Builder right-click feature, you can access many commands and Library functions very easily.

Nested Columns – You can now insert columns within columns to build more intricate and flexible page layout designs.

Element Search Function – Never have difficulty finding an element again with the new Element Search Function.

Custom CSS Per Page – Insert Custom CSS per individual page for even more in-depth design and customizations.

Avada Builder Starter Page – This is the starter page that you’ll encounter when building a new page with the Avada Builder.

Avada Builder Visibility System – Easily control which Avada Builder elements are visible on different device sizes.

Avada Builder Tools & Icons – To build pages with ease, it’s important to become familiar with the Avada Builder’s tools and icons.
Avada Builder Import Prebuilt Website Pages – Import any page from any prebuilt website with just one click!
Advanced Options Network Correlation – Quickly view and change Global Options.

Adding Elements – If you are the developer type, you can also learn how to add Avada Builder Elements in Avada Builder.

Responsive Option Sets – In Avada Builder, there is now an awesome feature to help you design for different screen sizes, using the same Elements.,Avada Live Docs & VideosThe following documents specifically explore Avada Live.

Avada Live Workspace – This document looks at the Avada Live Workspace in detail.

Avada Live Global Options Management – This document looks at how you can access many global options directly from Avada Live.

Avada Live Local Options Management – This document looks at how you can access many local options directly from Avada Live.

Using The Avada Live Wireframe – This document looks at the Avada Live Wireframe view, and how to use it.

Best Practices for Inline Editing in Avada Live – This document looks at Inline Editing in Avada Live, and covers the best practices for its use.

Cloning, Copying & Moving Elements in Avada Live – This document looks at how you can clone, copy & move elements around in Avada Live.

Adjusting Margins & Padding in Avada Live – This video looks at new methods to adjust margins & padding in Avada Live.,Technical & TroubleshootingThese document articles are about the Avada Builder’s technical features. This list includes articles about converting pages created using the old Avada Builder, the Avada Builder’s settings, and the like. Please read these articles to learn more about the Avada Builder’s technical features.

Avada Builder Options – The Avada Builder has its own options, that enable you to optimize it to suit your needs.

Add On System For Developers – Create your own add-ons and contribute to the Avada Builder Library and Elements collection!

Avada Builder Options

The Avada Builder has a vast array of options that allow you to configure the Builder to suit your preferences and website environment. These options include activating and deactivating the Avada Builder on custom post types, enabling or disabling any of the Avada Builder Elements to improve performance, and exporting or importing your Avada Builder settings. Continue reading below to learn more about these options.
OverviewHow To Access Avada Builder OptionsAvada Builder Auto Activation
Disable/Enable Avada Builder Elements
Activate/Deactivate Avada Builder on Custom Post TypesImport/Export Avada Builder Content
Avada Builder Elements Customizations,How To Access Avada Builder OptionsBefore you can access the Avada Builder Options, you must first install and activate the Avada Builder Plugin. Once this is activated, navigate to the Avada Dashboard and head to Options > Builder Options. Here, you will find all of Avada Builder’s available options. Customize these options to your liking, then click ‘Save Settings’ to save your changes.
Read our Avada Builder Plugin article!,Avada Builder Auto ActivationThe Avada Builder Auto Activation option allows you to enable or disable the Avada Builder user interface by default when creating or editing a page, or post. When active, the Avada Builder will automatically load when creating or editing a new page or post. Otherwise, the default WordPress content editor field will be displayed. Simply toggle the option to On to enable, or Off to disable.,Disable/Enable Avada Builder ElementsIMPORTANT NOTE: Use with caution! Disabling an Avada Builder Element will disable it from all existing pages or posts. Disabled elements will render as regular code snippets on the front end.Under the Avada Builder Elements section, you’ll find a checklist of all existing Avada Builder Elements, including Design Elements, Layout Elements and Form Elements. If you are not using a particular Element on your website, you can disable it here. Disabling individual Avada Builder Elements can slightly increase performance and load speed. Please be aware though, that disabling an Element will disable it on all existing pages or posts. Any disabled Elements that have been used across the site will render as code snippets, so make sure you haven’t used it anywhere before disabling it. To help with this, the Run Element Scan option was added in Avada 7.3.
Run Element ScanThe Run Element Scan button does exactly what it says. It scans the website, and finds and disables the Elements which are not in use. You could use this feature when you are finished with a website, to easily find the disable the Elements you are not using. Just note, that this feaure may not fully run on large websites with a lot of content.,Activate/Deactivate Avada Builder on Custom Post TypesUnder the ‘Post Types’ section, you’ll find a checklist of all your existing custom post types. What you see here will be depenedant on the plugins you have installed. Using these options, you can activate or deactivate the Avada Builder on any of your custom post types. Simply check the checkbox of the custom post type you’d like to activate the Avada Builder in, or uncheck to disable it.
Learn More About The Avada Builder On Custom Post Types,Import/Export Avada Builder ContentYou can also export your entire Avada Builder settings and content which you can use as a backup, or import to another Avada installation.
ImportingTo import your Avada Builder content, simply browse to and select the XML file with your saved content and click the ‘Import’ button and wait for it to finish loading.
ExportingYou can choose to export your entire Avada Builder content (saved containers, columns, or elements), or just your full page templates. Simply click the appropriate button and an XML file containing your saved content will be downloaded to your computer.,Avada Builder Elements CustomizationsIf you’d like to customize each Avada Builder Element globally, you can do so by going to the Avada > Options panel, then switching to the Avada Builder Elements tab. On this tab, you can globally customize each element to your liking. If you’d like to customize each Avada Builder Element individually, then you can do so by editing the individual Element while building your page or post.
You can also access these Element Global Options when you are in Avada Live. Simply click the Toggle Sidebar icon on the Toolbar, and choose the Global Options Tab. Scroll down to the penultimate option, called Avada Builder Elements, and here you can also set the global defaults for the Elements.

Avada Builder History Feature

The Avada Builder includes a useful feature called History. This feature tracks the last 25 actions that have been performed in the editor and allows you to revert back to any state before or after an action. To learn how to use this feature, continue reading below.
IMPORTANT NOTE: This feature is only available in Avada 5.0 and up.Read About Avada Builder’s Tools and IconsHow To Use The History FeatureStep 1 – Activate Avada Builder, or Avada Live.
Step 2 – Create your page layout as you’d like. Each action you make is recorded under the History icon as a history state. In the back end editor, the History Icon is found on the right uppermost corner of the Avada Builder toolbar. In Avada Live, the History Icon is on the left side, the 4th icon along on the toolbar.
Step 3 – Once you click the ‘History’ icon, you’ll see all your actions in a list. To revert to a particular history state, simply click the history state in the list. You can jump between any history state in the History list as often as you wish, until you save.
IMPORTANT NOTE: Saving or refreshing the page will reset your history states.

Avada Builder Elements Search

How To Use The Element Search FeatureStep 1 – Activate Avada Builder or Avada Live.
Step 2 – Add a new Container, then add columns into it. Click the ‘+ Element’ button to bring up the Elements window.
Step 3 – In the ‘Select Element’ window, there’s a search field on the upper right corner of the window. This is active immediately when opening the Element window.
Step 4 – In the search field, type in the keywords for the element you’re looking for. For example, button. This search method is a LIVE search, thereby elements will be filtered and displayed as you type.

Avada Builder Element Generator

The Avada Builder Element Generator allows you to add Avada Builder Elements directly from the WordPress editor. You can use this tool in a variety of ways. It lets you insert Inline Elements into your text content, and you can even insert Elements inside other Elements!
You can access the Avada Builder Element Generator in the WordPress Editor toolbar, which means you can access the Element Generator in any Element that has a WordPress Content Editor, such as the Text Box, Title, or Checklists Elements to name a few.
IMPORTANT NOTE: The Avada Builder plugin must be installed and active in order to access the Element Generator.,How To Use The Element GeneratorStep 1 – Activate Avada Builder, or Avada Live.
Step 2 – Insert a Container on the page, then select your desired column layout.
Step 3 – Insert any element that has a WordPress Content Editor by clicking the ‘+ Element’ button on any column. For example, the Text Block element.
Step 4 – Click the ‘Edit Settings’ icon on your chosen Element to bring up its options window.
Step 5 – On the WordPress Content Editor toolbar, find the Element Generator which is represented by an Avada Logo icon.
Step 6 – Clicking the Element Generator icon will bring up the Elements window. Here, you’ll find the Inline Elements. You can also insert standard Elements inside other Elements, but please keep in mind that some may not be compatible with each other. For example, you might insert the Tab Element, and then add 3 tabs. Then inside each Tab Content area, you might click on the Avada Builder Element Generator to add a Woo Featured Product Slider Element. See the Featured Products at the top of the home page on the Classic Shop Demo for an example of exactly this usage.
Step 7 – Select your desired element to bring up the options window. Configure the element and then click ‘Insert’ to insert it into the WordPress Content Editor.
Step 8 – Click ‘Save’ on the main element to save all your changes.,How To Use The Element Generator In Avada LiveUsing the Avada Builder Element Generator in Avada Live is essentially the same process. When you add any Element that has a text based component, and therefore has the WordPress Editor in its options, you will see the Element Generator Icon in the Editor toolbar. The only difference is that the editor will be in the Sidebar, unless you have changed your preferences to edit Elements in a freestanding dialog.

Avada Builder Custom Post Types

In the Avada Builder general options, you can choose which custom post types you can enable or disable the Avada Builder on. This will allow you to control the areas where Avada Builder can be used. To learn how how to enable or disable the Avada Builder on custom post types, please continue reading below. If you’d like to learn more about the Avada Builder’s other options, please follow the link below.
Learn More About The Avada Builder General OptionsHow To Enable/Disable Avada Builder On Custom Post TypesStep 1 – Navigate to the Options > Builder Options from the Avada Dashboard.
Step 2 – Down the page, you’ll find the ‘Post Types’ section. What you see here will depend on the plugins you have installed. Some third party plugins, such as the Event Manager and WooCommerce install their own custom post types.
Step 3 – Check the corresponding post type checkbox to enable the Avada Builder on it. You can also choose to uncheck it to disable the Avada Builder instead.
Step 4 – Once finished, click the ‘Save Settings’ button.