How The Avada Builder Works

How The Avada Builder Works

The Avada Builder is ThemeFusion』s very own page builder, now in two interfaces: Avada Builder, our back-end wireframe page builder, and Avada Live, our front-end builder, recently released with Avada 6.0.
Both versions of the Avada Builder allow you to quickly create great page layouts using our simple system of Containers, Columns, and Elements. With full control over all aspects of page content, Avada Builder is an amazing tool for the modern web designer and site owner alike. Both versions of the Avada Builder also produce the same code, and are totally interchangeable, so with Avada Builder, you now have the best of both worlds.
See Our Full Range Of Avada Videos HereOverview
Accessing The Avada Builder

The Avada Live Content Creation Process

The Avada Builder Content Creation Process,Accessing The Avada BuilderOnce you have installed and activated Avada』s two required plugins, Avada Core and Avada Builder, you can now use either version of the Avada Builder to build your pages, posts, and even custom post types.
There are several ways to access the Avada Builder, depending on where you are.

If you have a page open in the WordPress default editor, you simply click one of the two buttons at the top of your page – Avada Builder or Avada Live.

If you are logged in and have a page open on the front end, there are two links in the top toolbar, Edit Page & Edit Live.
Edit Page will open the Avada Builder if Auto Activation has been turned on (otherwise it will open the page in the default WordPress editor), while Edit Live will open the page in Avada Live.

If you are in the Pages or Posts section of the WordPress dashboard, you can mouse over an existing page and choose the editor you want. If you select 『Edit』 from the list under the page title, the page will open in Avada Builder (back-end) if Avada Builder Auto-Activation has been enabled (or in the default WordPress editor if it is not). If you select the 『Avada Live』 link, the page will open directly in the front end builder.

If you are in the Pages or Posts section of the WordPress dashboard, and you want to create a new page, you can select the arrow next to 『Add New』 at the top left of the page and choose Fusion Builder or Fusion Builder Live to create a new page.
Avada Builder is available for all registered posts types, including blogs, events and FAQs. If you don』t see these buttons on a particular post type, the Avada Builder may not be enabled for that custom post type. To enable or disable the Avada Builder on your various Post Types, please read our article, linked below.
As well, if you』d prefer Avada Builder to load automatically when you edit a page, there is also an auto-activation option, found at Options > Builder Options, from the Avada Dashboard. Set this to On, and the Avada Builder will automatically load when you edit your pages.
How To Enable/Disable The Avada Builder For Custom Post Types,The Avada Live Content Creation ProcessCreating pages with Avada Live is very similar to the back-end method, only it』s done directly on the front-end page. The same controls are available to add containers, columns and elements, and the only real difference is the workspace.
Step 1 – Add A Container (And Columns)The first thing to do on a new page is to add a Container. The Avada Builder Starter Page has a big blue 『Add Container』 Button, which when clicked opens the Add Containers Dialog. Here you can add an empty container if you wish, but more commonly, you add a container with columns already inside. There is a range of column combinations you can add with the Container, and this forms the basis of the start of your layout. You can add as many Containers into the page as you wish, and as many Columns inside the Containers as well, but Elements must be inside a Column.
To add further Containers once a Container is one the page, simply mouse over the Container Controls, and select Add Containers, as shown below. The usual Containers window will pop up, allowing you to again add either an empty container or one with columns already added to it.
Step 2 – Add ColumnsIf you have added an empty Container, the next step is to add a column, or columns to it. This is done by clicking the Add Columns icon in the middle of the Container. This brings up the full range of Column combinations for you to add.
If you wish to add further Columns to your Container, simply mouse over the Column controls and select the Add Column icon. This will again bring up the Add Column window where you can choose the Column layout to add to the container.
Step 3 – Add ElementsOnce you have your Column or Columns inserted, there will now be an 『Add Element』 icon in the middle of the column. Click this to bring up the Elements window and select the Element you』d like to add.
To add further Elements to a Column, simply mouse over the current Element and choose the Add Element option. Again, the Element Window will pop up and when you add the next Element, it will be inserted directly below the previous Element.
Step 4 – Rinse and RepeatContinue building your page by adding Containers, Columns, and Elements. You can add new Containers to the page at any time, you can add more Columns to existing Containers, and you can add as many Elements as you wish in any Column.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,The Avada Builder Content Creation Process (Back-End)When creating a new page in Avada Builder, there is a correct structure, which is to add a Container first, then a Column or Columns inside the Container, and then Elements inside the Columns. The Builder naturally enforces this process to ensure there are no errors.
On a new page, you will see the Starter Page, as shown below.
Step 1 – Add A ContainerClick the Add Container Button, and a window will pop up with the possible options. You can add an empty container, which will be appropriate in some situations (if you wanted to drag existing content already in a column into a new container for example) but on a new page, you will want to choose a column layout to add to the container, so that effectively, you are adding a container and columns at the same time.
Once you have content on the page, adding new Containers is done from the + Containers button, found at the bottom of every Container, as shown below.
Step 2 – Add ColumnsIt』s likely that you combine Step 1 with Step 2. But if you ever add an empty container, or want to add further columns to a container, you can click on the + Columns button, found at the bottom of every Container to add a new Column.
Once you click that, you will again have the choice to insert a full range of Column layouts.
Step 3 – Add ElementsAfter setting up Columns, click the + Element button to bring up the Elements window. This will show our full range of available Elements for you to add to the column.
Step 4 – Rinse and RepeatFrom here, you just continue to add elements and content to refine your layout. You can add further Containers and Columns to the page, you can add further Columns to existing Containers, and you can add further Elements to new or existing Columns. You can even resize the Columns, and move the content around to suit your layout. Once you are done, remember to save the page!

Avada Quick Start Guide

Avada Quick Start Guide

Welcome to Avada! The Avada Website Builder is one of the most fully featured and capable WordPress based Website Builders in existence. Like any software product, there is of course a learning curve, but thanks to the intuitive features, the extensive documentation, tutorial videos and customer support, we know you』ll soon be building websites like the pros.
With this Quick Start Guide, we want to help you quickly get started with your website, by listing the most esssential things you need to do to get up and running.

OverviewGet Hosting & Install WordPressPurchase AvadaDownload and Install AvadaRegister your PurchaseInstall the Required PluginsImport Prebuilt Website (optional)Register For Support
Explore The Docs & Videos
Join The Community Forum or Facebook Group,Get Hosting & Install WordPressAvada is designed to work with the self-hosted version of WordPress. So before you can do anything with Avada, you will need to have WordPress installed on a server. You will first need to choose a hosting company and orgainze a hosting plan, and then install WordPress. We recommend you choose good hosting, as this will be a large part of how fast and well your site performs. Before installing, it』s also wise to check the Hosting Requirements for Avada.
WordPress HostingHow To Install WordPress
Requirements For Avada,Purchase AvadaAvada can be purchased solely on the Themeforest Marketplace. Be careful not to purchase it anywhere else, as this would be an illegal, and probably hacked, copy. When you purchase Avada, you』re buying it for one website, as an individual purchase code is required per top-level domain registration.
Please see the video below that shows you the process of purchasing Avada on the Themeforest website.,Download and Install AvadaOnce you have hosting, and WordPress is installed, you are ready to install Avada. To do this, you need to get the installable file from the ThemeForest account, from which Avada was purchased. There are then a couple of ways to install Avada; via WordPress, or via FTP. This is a five minute process that is well explained in these docs and videos.

How To Install Avada Via WordPress

How To Install Avada Via FTP
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Register Your PurchaseImmediately after installing and activating Avada, you are required to register your purchase. This allows you to install and update Premium plugins, import prebuil websites, download automatic updates for Avada, and to register for support. To register Avada, you just need the purchase code from your purchase, which you can download at ThemeForest, and which you then paste into the Registration field on the Avada Dashboard. For more information on this process, please see the following documentation, and its included video.
How To Register Avada,Install The Required PluginsRegistering Avada gives you access to the bundled premium plugins, two of these which are required to be installed for Avada to function correctly and fully. These are Avada Core and Avada Builder. For everything you need to know about installing and updating the plugins that come with Avada, see the document, and its included video, linked below.
Avada Plugin Installation & Maintenance,Import Prebuilt Website (optional)One of the easiest and quickest ways to get a website up and running with Avada is to choose to install one of our 80 + prebuilt websites. With our easy to use importer, you can transform your basic WordPress installation into a completed website in a matter of minutes. Then you can customize it with your own branding and content, and have a website up and running in no time at all. See the following documents for more information on our fantastic prebuilt websites, and how to import them.

Avada Prebuilt Websites
How To Import A Prebuilt Avada Website,Register For SupportWith all software packages, there is a learning curve, and here at ThemeFusion, we endevour to make learning Avada as easy as we can. On top of our extensive documentation and video library, there is also six months of direct ticketing support included with your purchase, but to access this, you first have to register for Support with ThemeFusion.
This is an easy process and gives you access to our 24/7 ticketing system. Submit a ticket here, and one of our global Avada Support Team (we call them the Avada Avengers) will help you through every step of the way to resolve your issue.
How To Register For Support With ThemeFusion,Explore The Docs & VideosOK, now here』s the fun bit. Once you are up and running with Avada, we have an extensive documentation and video library to help you learn every aspect of using Avada. To date, there are over 600 documents and almost 200 videos to help you learn the ins and outs of the Avada Website Builder. Before submitting a Support ticket, do a quick search of the Docs, as most support requests have an answer that can be found there. Go wild!
Avada DocumentationVideo TutorialsOur YouTube Channel,Join The Community Forum or Facebook GroupThere is also an amazing community around Avada, where you can connect with thousands of other Avada users. We have a busy Community Forum, and there is also the Avada Users Group on Facebook, with over 22,000 members. Join one, or both of these, for some amazing community support!
Avada Community ForumAvada Users Group

Avada Patcher

Avada Patcher

Keeping your site up to date is an integral part of WordPress site maintenance, and the Patcher tool is a very useful part of that strategy. The Avada Patcher is an innovative maintenance tool that allows you to apply patches to Avada in between full Avada updates. This allows you to keep your Avada site fully up to date at all times.
At times our developers release quick fixes for newly discovered security issues or other small bugs that can』t wait for the next full release. These are individual patches that can be added as soon as they are released. Read below for more details of how to use this great maintenance tool, and watch the video for a visual overview.
Please Note: In the essence of good installation management and maintenance, it is good practice to ensure all current patches are applied as, and when, they are released.Three Ways To Apply Available PatchesIndividually Via The Patcher PanelWhen patches are available, you will see notifications in several places, including under the Avada and Patcher links on the WordPress sidebar, and a small asterisk on the Maintenance link. You can get to the Patcher from Avada > Patcher on the WordPress Sidebar or Maintenance > Patcher from the Avada Dashboard.
To apply the patches one at a time, just ckick the Apply button to the right of the individual patches. Start with the top one and apply themn sequentiually.
Bulk Apply Via The Patcher PanelIf there are multiple patches, you can simply click on Apply All Patches at the top of the Patches panel. All necessary changes will be automatically applied to the necessary files for you.
Once the patch is applied, you will see a notification that confirms the patch was applied.
Applying Patches Manually Via FTPSometimes server setups are very particular about file/folder permissions and do not allow files to be automatically written to them. In these cases, applying an automatic patch will not work. If your server doesn』t allow the patches to be applied automatically through the Avada Patcher, you can download the patch files and manually apply the fix with FTP access. The reasons why this might happen are listed below, please contact your host and give them these details and ask them to change it for you:

Theme & plugins should be owned by the web server user (usually www-data)

Files & folders should have the right permissions. You can find more details here, in the WordPress Support Docs.
WordPress should be able to write to the filesystem.If your server doesn』t allow the patches to be applied automatically through the Avada Patcher, you can download the patch files and manually apply the fix with FTP access. The latest patches for Avada and its required plugins will be listed in the order of first to last released. You can find Avada patch files available for download here. On that page, you』ll see all available patches for a specific theme version.
If you are not on the latest version of Avada version, simply update your theme. The patches will be in the latest version. For information on updating Avada, see our guide here.
Patches that are manually applied need to be completed in the date order they were released since they build on one another. Always start at the top patch for the version you are using and apply it first, then work your way down.Avada Status Page Explained:
A – Version: Each section will have a version number. All patches for that theme or plugin version will be listed below the version heading.B – Patch Number & Date: The patch number will increase for each patch released. When installing your patches, be sure to install from oldest to newest. That would be lowest patch number to highest patch number. You can also reference the date, which is just below the patch number.C – Description: The Description will explain what issue the patch fixes.D – This is a download link which contains the patched files in a .zip file. The next section will explain what you do to apply the fix.E – This references the second patch in the list. You can see by the patch number (and date if the patch was released on a different day) that it』s more recent then the previous patch. When applying patches, this patch would be applied after the above patch.After You』ve Downloaded the Patch File....here』s what to look for
Patch File Name – The patch file will be a .zip file with the patch』s number as its name which looks like this.Extract – Now that you』ve found your patch file, extract the .zip file.Locating the Patched Files – The extracted folder will be the same path you』ll need to follow to find the files on your site for applying the updated files. It will start from the wp-contents folder and end with your actual fixed files which looks like this.Upload Fixes – Now access your site through FTP and navigate to the same location your patched files were found in the patch download. Transfer your new patched files (and only the files themselves) to the directory and choose to 「overwrite」 the existing files.You can find Avada patch files available for download here.
IMPORTANT NOTE: If the Avada Patcher did not work and you』re unable to apply patches manually, please send in a support ticket with a note in regards to this and we can take care of it with FTP access.

Avada Live Editing

Avada Live Editing

Design Anything Visually, Fast!With the release of Avada 6, came Fusion Builder Live, our front end page builder, to complement our back end builder interface, Fusion Builder. It was an incredible labor of love for the entire ThemeFusion team, and was a huge step forward in intuitive and easy website design.
IMPORTANT NOTE: In Avada 7.0, we renamed Fusion Builder to Avada Builder, and Fusion Builder Live to Avada Live.This long-requested feature sits alongside our existing Avada Builder, so the old familiar Avada is still there, and you get complete freedom with how you want to use it. You can use the Front or Back End interface of Avada Builder, and even use the Wireframe from within Avada Live. As with any major new feature, it will, of course, take some time to familiarize yourself with the new streamlined Element Controls and the workflow of the Avada Live, but it is remarkably intuitive, and once you get the hang of it, we don』t think you』ll ever look back.
We have developed a range of documentation and videos to help you get started with Avada Live, and these will be added to over the coming weeks and months. Please see the Avada Builder Category for the latest relevant docs and the YouTube Channel for the latest videos.
Overview
The Avada Live Editor
The Avada Live Workspace
The Avada Live Toolbar,The Avada Live EditorThis amazing front-end builder takes Avada to the next level, and allows for a seamless and efficient workflow without even leaving the page you are building. Let』s have a look at how to access it, and its key features.
Accessing Avada LiveDepending on where you are at in WordPress, you can access Avada Live in a number of ways. Let』s look at each one.
Viewing A Page on the Front EndWhen you are viewing a page, and are logged in, you will find an option called Edit Live in the WordPress Admin Toolbar. Clicking this will open the page into Avada Live.
Editing A Page In Avada Builder (Back-End)If you are editing a page in the back-end Avada Builder, and want to switch to Avada Live, you will see a large button called Avada Live at the top of the document, just under the Slug, as well as the Edit Live link in the Toolbar. Ensure the page is saved before switching Builders.
Editing A Page In A WordPress EditorIf you are editing a page in either the Visual or Text mode in the WordPress editor, you will have the option of two buttons: Avada Builder and Avada Live at the top of the document, just under the Permalink, as well as an Edit Live link in the WordPress Toolbar. Ensure the page is saved before switching to Avada Builder.
Editing A Page In GutenbergIf you are editing a page in the Gutenberg editor, you will have a link to the Front-End Builder in the WordPress Toolbar, entitled Edit Live. There is also a button below this at the top of the page, called Edit With Avada Builder (back end interface).
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,The Avada Live WorkspaceOnce you are in Avada Live, you will see your page displayed on the front end, with a Toolbar at the top. As you mouse over the various parts of the page, the various Element control icons will appear, giving you access to edit your content.
For full details on the Avada Live Workspace, follow the link below. Also, please view the full range of docs and videos for the Avada Builder to learn how to use Avada Live.
View the Avada Live Workspace doc here!,The Avada Live ToolbarOnce you are in the Avada Live Editor, you will find the Toolbar along the top, which gives you all the options you need to build and manage your pages. This is a sticky toolbar, so as you scroll down, it stays at the top, always leaving it right at your fingertips.
Let』s have a look at each of the icons on the Toolbar, from left to right.
Left Hand Side
Avada Builder Icon: This shows the Builder version if you mouse over it.

Toggle Sidebar: This opens and closes the Sidebar, where you can access the Theme Options, Page Options, and the Element Settings.

Library: This accesses the Avada Builder Library.

History: This shows the latest 25 history states, allowing you to step backward throughout your actions.

Preferences: Here you can access the Avada Builder Live Editor Preferences.

Add New: This icon allows you to add a new Post, Page, Portfolio, FAQ, Layout or Element.

Clear Layout: This clears the layout from the page.
Right Hand Side
Support: Offers links to our Getting Started documentation, our Support portal, and the keyboard shortcuts available.

Responsive: Here you can both preview the page in Large, Medium and Small Screen views, and access the Responsive Editing Mode.

Toggle Wireframe: Click this icon to toggle the back-end wireframe in the Front-End Builder.

Preview: Preview mode closes all panels and removes front-end icons to give you a  quick, clean page preview.

Publish / Draft: These two buttons allow you to quickly set the publish state of the page, to Draft or Published.

SAVE: 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: The Exit Button allows you to exit the builder, to the page front-end, the page back-end, or the Avada dashboard.

Avada Essentials

Avada Essentials

We understand that it can be quite a process getting started with WordPress & Avada. There』s a lot to learn. In light of this, we have prepared a starter pack for you pertaining to the Avada Website Builder, WordPress and everything in between.
Below are links to help files, online documentation, and videos and other tutorials, to help make this process easier and more enjoyable for you. Remember to use the Live Search function at the top of the page, as most of the time, answers to your questions will be in our documentation or videos, waiting to be found. There are also community resources like the Community Forum and the Facebook Users Group. If you are unable to find an answer to your questions, you can always submit a support ticket, and one of our global support gurus will personally assist you. Before you can do this, you must first create a support account by following these steps.
Avada is one of the most fully featured and capable WordPress based Website Builders in existence. Like any software product, there is of course a learning curve, but thanks to the intuitive features, the extensive documentation, tutorial videos and customer support, we know you』ll soon be building websites like the pros. Welcome to Avada!
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada
OverviewGeneral and Important InformationWordPress Beginner EssentialsInstalling Avada
Updating & Maintaining Avada

Avada Builder

Avada Live

Available Options in Avada
Features in Avada
WordPress MultisiteBackups, Security & Migrating Your Site,General and Important Information
Create A Support Account – To use our support ticket system, you must first create a support account with us.

How Our Advanced Option System Works – Avada has an outstanding option system. Once you understand this, the sky is the limit!

Avada』s Online Documentation – With over 700 documents and growing, Avada is one of the well-documented website builders of all time. Search for answers through our in-depth articles about Avada』s features and 『how to』 tutorials.

Video Tutorials – With over 180 videos and growing, our video tutorials can quickly show you what you need to know. Subscribe to our YouTube channel to keep up to date!

How To – We have a large range of advanced 『How To』 articles, covering a variety of situations.

Avada Users Group on Facebook – Join the community-run and managed Avada Users Group on Facebook, with over 21,000 members!
Avada Community Forum – Post questions, ideas or discussions on the official ThemeFusion Community Forum. Please be aware that we do not offer support here.
Support Ticket System – If you have any questions about Avada, please submit a support ticket and one of our global support gurus will personally assist you.

Support Guidelines & Policies – Please review our support policy & guidelines here, to learn what the scope of our support is.
WordPress Beginner Essentials
A Beginner』s Overview of The WordPress Admin Area – An essential read to understanding and learning about the admin area of WordPress.
Essential Pages For Your New Site – Learn which pages are important to have on your website, such as the Home page, About page, Contact page, and the like. Beginner』s Guide To Creating And Publishing Your First Post (Part I) – The first part to our blog article on this topic. This post covers the core components of creating posts.Beginner』s Guide To Creating And Publishing Your First Post (Part II) – The second part to our blog article on this topic. This post covers the advanced extras of creating posts.Understanding WordPress Posts and Pages – A simple and informative article on distinguishing the difference between WordPress posts and pages.Master The WordPress Settings To Control Your Site – An essential blog article to learn and master the WordPress settings needed to fully control your website.4 Key Benefits of Using a Premium WordPress Theme Framework – Why choosing a premium WordPress theme is more beneficial in the long run.Get Your Business』 WordPress Website Up and Running in 30 Minutes with Avada – The essentials in setting up a business website using Avada.Web Aesthetics: The Short and Sweet Guide to Memorable Design – An essential blog article we will cover the significance of an engaging web aesthetic.Making the Most of WooCommerce with Avada – An essential blog article that will show you how to get up and running with WooCommerce and Avada.How to Choose the Best SEO Plugins for WordPress – If you want people to actually find your content, you』ll need to optimize it for search.Putting Together a Multilingual Site with Avada and WPML – An essential blog article on why multilingual sites are becoming more and more essential.Installing Avada
How To Install Avada Via WordPress

How To Install Avada via FTP
Required: How To Register AvadaRequired: Plugin Installation & Maintenance
How To Use Avada System Status

Updating & Maintaining Avada
Updating From An Older Version Of Avada?

Important Update Information
How to Update AvadaHow To Register AvadaChanges to Registration with Avada 7.3Using the Patcher Tool to Apply FixesThe Definitive Guide to Updating WordPress Core, Themes and PluginsAvada Builder
Avada Builder Guided Tour Video

Avada Builder vs Avada Live
Avada Builder Documentation
How The Avada Builder Works

Avada Builder Plugin

Avada Builder Quick Start Guide
Avada Live
Avada Builder vs Avada Live
How The Avada Builder WorksThe Avada Builder Live WorkspaceAvada Builder Tools & IconsAvada Live Global Options ManagementAvada Live Local Options ManagementUsing The Avada Builder Live WireframeCloning, Copying & Moving Elements in Avada LiveAdjusting Margins & Padding in Avada LiveBest Practices for Inline Editing in Avada LiveInline ElementsAvailable Options in Avada
How Options Work

Avada Global Options
Avada Page Options
Option Network Dependencies

Blog Theme Options

Portfolio Theme Options
Features in Avada
Avada Layouts
Sliders, All You Need to KnowHow To Assign A Slider
Using Portfolios In Avada

Using Blogs In Avada

Image Size Guide
WordPress Multisite
Installing Avada On A WordPress Multisite
Backups, Security & Migrating Your Site
How & Why You Need To Set Up A WordPress Backup
The Basics Of WordPress Security For BeginnersHow to Migrate Your Website With All-In-One WP MigrationHow to Migrate Your Website With Duplicator

Avada Builder vs Avada Live

Avada Builder vs Avada Live

IMPORTANT NOTE: With the release of Avada 7.0, we have renamed Fusion Builder to Avada Builder.While Fusion Builder has had a name change, it hasn』t changed otherwise. It still comes with TWO interfaces; the original, wireframe builder, now known as Avada Builder, and the front-end builder, now known as Avada Live. The original Avada Builder will remain, offering you more choice over how you like to edit your pages. Here are the main differences between the two interfaces:,Avada BuilderThe Avada Builder we all know and love hasn』t changed (except for the name :)). This is a back-end wireframe editor that allows you to build content quickly, using our system of Containers, Columns, and Elements. You design and layout your pages as you wish, using our easy to use drag and drop editor, and then preview the result in a new window.
Many of our users are very familiar with this process and find it fast and efficient. But things are always moving forward here at ThemeFusion, and with Avada Live, we have also introduced a new way of building pages.,Avada LiveWith Avada Live, you edit your content directly on the front-end. You can see your layout as you build it, and any changes you make update immediately, as you make them.
Additionally, with Avada Live, you have direct access to the Avada Global Options, as well as the Avada Page Options, on the same page, as you build. This can speed your workflow significantly.
In most other ways, the two builders are essentially the same. There are small interface and workflow differences, but they both use the same Container, Column and Element structure, and controls. The content that both builders generate is also identical, and so there is full compatibility between the two builders. You can even toggle the Wireframe view in Avada Live, which essentially is the back-end builder in the front-end interface.
So with Avada Builder, we have now just doubled your options, giving you two ways to build your website. Welcome to the best of both worlds!
View the 『Avada Builder』 Docs

Avada Builder Starter Page

Avada Builder Starter Page

From Avada 5.0 and up, the Avada Builder features a compact starter page that will help you get started in no time. In this article, we』ll be briefly going over what you』ll see when you add a new page.
Avada Builder Starter PageThis is the starter page that you』ll see when creating new pages, or editing empty ones. It contains useful and convenient information and links that will help you find your way around the Avada Builder interface. It also contains the 『+ Container』 and 『+ Pre-Built Page』 buttons to get you started.
+ Container Button – Add a Container to the page. Learn more about Containers.
+ Pre-Built Page Button – Access the Library where you can import pre-made pages or elements. Learn more about Importing Single Prebuilt Website Pages.
Icon Control Descriptions – Brief descriptions of frequent icons you』ll encounter throughout the Avada Builder.
Getting Started Video – Watch our Avada Builder Guided Tour video to learn more about the Avada Builder.,Avada Builder Live Starter PageThe Starter Page in Avada Live is almost the same. But when you add a New Page, or edit an empty one in the Live Builder, the Sidebar also opens to the Page Settings tab of the Page Options, where you can give your page a title, choose a parent and/or a template, and add Featured images to your page.

fusion_builder_update_element()

fusion_builder_update_element()

If you want to update any existing element setting options, you can simply use this function and the values will get appended to the existing settings for that element.
The functionCopy to Clipboardfusion_builder_update_element( $shortcode_tag, $param_name, $values_to_append ); 1fusion_builder_update_element( $shortcode_tag, $param_name, $values_to_append );Basic usageCopy to Clipboardfunction update_element_options() {

// Example of how to add or modify options to existing element in Fusion Builder.

if ( function_exists( 'fusion_builder_update_element' ) ) {

fusion_builder_update_element( 'fusion_button', 'color', array( 'cyan' => esc_attr__( 'New - Cyan', 'fusion-builder' ) ) );

fusion_builder_update_element( 'fusion_button', 'color', array( 'black' => esc_attr__( 'New - Black', 'fusion-builder' ) ) );

fusion_builder_update_element( 'fusion_button', 'element_content', 'Sample Button' );

}

}

add_action( 'fusion_builder_before_init', 'update_element_options', 11 );​x 1function update_element_options() {2​3  // Example of how to add or modify options to existing element in Fusion Builder.4​5  if ( function_exists( 'fusion_builder_update_element' ) ) {6​7    fusion_builder_update_element( 'fusion_button', 'color', array( 'cyan' => esc_attr__( 'New - Cyan', 'fusion-builder' ) ) );8​9    fusion_builder_update_element( 'fusion_button', 'color', array( 'black' => esc_attr__( 'New - Black', 'fusion-builder' ) ) );10​11    fusion_builder_update_element( 'fusion_button', 'element_content', 'Sample Button' );12​13 }14​15}16​17add_action( 'fusion_builder_before_init', 'update_element_options', 11 );The above example will add the color option 「Black」 and 「Cyan」 in the colors dropdown for the button element. Which will output the color class name as 「fusion-black」 and 「fusion-cyan」, which you can use to customize the color for your button.
This is a rather simple solution if you want to use the custom color combination buttons on your site.
Function Parameters$shortcode_tag
( string ) Registered shortcode name in Avada Builder.$param_name
( string ) Param name to be altered. Check shortcode to get the param name.$values_to_append
( array | string ) Value to be set as default or append to the existing array.

fusion_builder_shortcodes_categories()

fusion_builder_shortcodes_categories()

Copy to Clipboardfusion_builder_shortcodes_categories( string $taxonomy, bool $empty_choice, string $empty_choice_label ) 1fusion_builder_shortcodes_categories( string $taxonomy, bool $empty_choice, string $empty_choice_label )Retrieve a list of category objects for defined taxonomy. Display a category list as element option.
Params$taxonomy
(string) (Required) Taxonomy to retrieve terms for.
$empty_choice
(bool) Add empty option to a returned category list. Default: false.
$empty_choice_label
(string) Text label for empty option in a returned category list. Default: 「Default」.Copy to Clipboardfusion_builder_map(
array(
'name' => esc_attr__( 'Fusion Builder Element', 'fusion-builder' ),
'shortcode' => 'fusion_text',
'icon' => 'fusiona-font',
'preview' => PLUGIN_DIR . 'js/previews/fusion-text-preview.php',
'preview_id' => 'fusion-builder-block-module-text-preview-template',
'allow_generator' => true,
'params' => array(
array(
'type' => 'select',
'heading' => esc_attr__( 'Category', 'fusion-builder' ),
'description' => esc_attr__( 'Select a category of posts to display.', 'fusion-builder' ),
'param_name' => 'category',
'value' => fusion_builder_shortcodes_categories( 'category', true, esc_attr__( 'All', 'fusion-builder' ) ),
'default' => '',

),
),
)
);xxxxxxxxxx21 1fusion_builder_map( 2    array(3        'name'            => esc_attr__( 'Fusion Builder Element', 'fusion-builder' ),4        'shortcode'       => 'fusion_text',5        'icon'            => 'fusiona-font',6        'preview'         => PLUGIN_DIR . 'js/previews/fusion-text-preview.php',7        'preview_id'      => 'fusion-builder-block-module-text-preview-template',8        'allow_generator' => true,9        'params'          => array(10            array(11                'type'        => 'select',12                'heading'     => esc_attr__( 'Category', 'fusion-builder' ),13                'description' => esc_attr__( 'Select a category of posts to display.', 'fusion-builder' ),14                'param_name'  => 'category',15                'value'       => fusion_builder_shortcodes_categories( 'category', true, esc_attr__( 'All', 'fusion-builder' ) ),16                'default'     => '',17 18             ),19       ),20   ) 21);

fusion_builder_map()

fusion_builder_map()

Copy to Clipboardfusion_builder_map(array $atts) 1fusion_builder_map(array $atts)Add a registered shortcode as an element to the Avada Builder elements library.
Attributes$atts (array) (Required) – An array of element attributes which are used by Avada Builder to register new element.
name (string) Name of element that is displayed in libraryshortcode (string) Shortcode tagicon (string) Element icon that is displayed in librarymulti (boolean) Set to true for elements with nested structure. See: Add new multi (nested) elementpreview (string) Absolute url to element preview template filepreview_id (string) Element preview template IDhide_from_builder (boolean) Hide element from libraryallow_generator (boolean) Enable Avada Builder shortcode generator on this element』s Visual editor windowgenerator_only (boolean) Element can be added from Avada Builder generator onlyparams (array) Element settings. These settings are displayed on element settings windowadmin_enqueue_js (string) Absolute url to javascript file, this file is loaded with the element on WordPress backendadmin_enqueue_css (string) Absolute url to css file, this file is loaded with the element on WordPress backendfront_enqueue_js (string) Element javascript file. Absolute url to javascript file, this file is loaded with the element on frontendfront_enqueue_css (string) Element css file. Absolute url to css file, this file is loaded with the element on frontendon_save (string) Function name. Optional function that runs when saving element settings. Can be used to manipulate generated shortcode attributes contentcustom_settings_view_js (string) Custom element settings backbone view. Absolute url to javascript file, this file is loaded with the element on WordPress backendcustom_settings_view_name (string) Custom element settings view namecustom_settings_template_file (string) Custom element settings template that will be loaded instead of default one. Absolute url to template fileadd_edit_items (string) Sets a custom title/heading of the parent/child sortable area. If this is not used, it defaults to 「Add/Edit Items」sortable_items_info (string) Sets a custom description (the paragraph part under the heading) for the parent/child sortable area. If this is not used, it defaults to 「Add or edit new items for this element. Drag and drop them into the desired order.」ParametersAn associative array of element settings that are displayed on element settings window. Each param_name must match shortcode attribute name.
type (string) Element setting type that is used on element settings page. See: Available setting typesheading (string) Element setting name that is displayed on element settings pagedescription (string) Element setting description text that is displayed on element settings pageparam_name (string) Parameter name. Must match shortcode attribute name. Use element_content as param name for shortcode enclosed contentvalue (string | integer | bloolean | array ) Default setting valuegroup (string) Setting group for this settingmin (string | float | integer ) Minimum setting value. Used for range setting type onlymax (string | float | integer ) Maximum setting value. Used for range setting type onlystep (string | float | integer ) Setting range step. Used for range setting type onlyCopy to Clipboardfunction fusion_element_text() {

fusion_builder_map(
array(
'name' => esc_attr__( 'Text Block', 'fusion-builder' ),
'shortcode' => 'fusion_text',
'icon' => 'fusiona-font',
'preview' => PLUGIN_DIR . 'js/previews/fusion-text-preview.php',
'preview_id' => 'fusion-builder-block-module-text-preview-template',
'allow_generator' => true,
'add_edit_items' => 'Add Content Box',
'sortable_items_info' => 'Some custom intro added here.',
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),
),
),
)
);
}
add_action( 'fusion_builder_before_init', 'fusion_element_text' );​x 1function fusion_element_text() {2​3fusion_builder_map( 4    array(5        'name'            => esc_attr__( 'Text Block', 'fusion-builder' ),6        'shortcode'       => 'fusion_text',7        'icon'            => 'fusiona-font',8        'preview'         => PLUGIN_DIR . 'js/previews/fusion-text-preview.php',9        'preview_id'      => 'fusion-builder-block-module-text-preview-template',10        'allow_generator' => true,11        'add_edit_items'  => 'Add Content Box',12        'sortable_items_info' => 'Some custom intro added here.',13        'params'          => array(14            array(15                'type'        => 'tinymce',16                'heading'     => esc_attr__( 'Content', 'fusion-builder' ),17                'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),18                'param_name'  => 'element_content',19                'value'       => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),20           ),21       ),22   ) 23);24}25add_action( 'fusion_builder_before_init', 'fusion_element_text' );