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.