Introducing Avada Live Editing


Design Anything Visually, Fast!

After many months, thousands of hours of design and development, and extensive private and public beta testing, Avada Live is now here! It has been an incredible labor of love for the entire ThemeFusion team, and we have taken the time to make sure it is totally awesome, before releasing it into your eager hands. We are very proud of it, and we are sure you will really enjoy it!

This release introduces front-end editing, with our Fusion Builder Live Editor. This long-requested feature sits alongside our existing Fusion 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 Builder exclusively, and even use the Wireframe builder from within Fusion Builder Live. As with any major new feature, it will, of course, take some time to familiarise yourself with the new streamlined Element Controls and the workflow of the Live Builder, but it is remarkably intuitive, and once you get the hang of it, we don’t think you’ll ever look back.

We are, of course, developing a range of documentation and videos to help you get started with Fusion Builder Live, and these will be added to over the coming weeks and months. Please see the Fusion Builder Live Category for the latest relevant docs and the YouTube Channel for the latest videos.

So, welcome to Avada Live, and read on to find out all about this major update, and an overview of its major features.

Avada just got a whole lot better!!

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

The Fusion Builder Live Editor

Without a doubt, the Fusion Builder Live Editor is the showcase new feature in this release. This 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 the Fusion Builder Live Editor

Depending on where you are at in WordPress, you can access the new Front-End Builder in a number of ways. Let’s look at each one.

Viewing A Page on the Front End

When you are viewing a page, and are logged in, you will find an option called Fusion Edit in the WordPress Admin Toolbar. Clicking this will open the page into the Fusion Builder Front-End Editor.

Fusion Builder Front End Builder Links

Editing A Page In Fusion Builder (Back-End)

If you are editing a page in the back-end Fusion Builder, you will see a button called Fusion Builder Live at the top of the document, just under the Slug, as well as the Fusion Builder Live link in the Toolbar.

Fusion Builder Back End Builder Links

Editing A Page In A WordPress Editor

If you are editing a page in either the Visual or Text mode in the WordPress editor, you will have the option of two buttons:  Fusion Builder and Fusion Builder Live at the top of the document, just under the Slug, as well as a Fusion Builder Live link in the Toolbar.

Fusion Builder WordPress Editor Builder Links

Editing A Page In Gutenberg

If you are editing a page in the Gutenberg editor, you will have a link to the Front-End Builder in the Toolbar, entitled Fusion Builder Live. There is also a button below this at the top of the page, called Edit With Fusion Builder. This takes you to the Back-End Fusion Builder.

Fusion Builder Gutenberg Links

The Fusion Builder Live Workspace

Once you are in Fusion Builder 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 Fusion Builder Live Workspace, follow the link below. Also, please view the full range of docs and videos for Fusion Builder Live to learn how to use the new Fusion Builder Live Editor.

View the Fusion Builder Live Workspace doc here!
Fusion Builder Live Workspace

The Fusion Builder Live Toolbar

The Fusion Builder Live Toolbar

Once you are in the Fusion Builder 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

  • Fusion 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 Fusion Builder Library.

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

  • Preferences: Here you can access the Fusion 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 preview the page in responsive mode, in desktop, tablet and phone preview.

  • 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 WordPress dashboard.

Other New Features In Avada Live (6.0)

As always, we make improvements and additions to Avada with each new update. While the Front End Builder is by far the biggest addition to this version, it’s not the only one. Here is a rundown of some of the other updates in this release.

For full details of the 6.0 release, see the What’s New in 6.0 page.

  • Gutenberg Block Styling Support – Avada now fully supports both the front-end and back-end styling of Gutenberg Blocks, with added font size support to match Avada Theme Options. This is an ongoing effort to further integrate Avada with the Gutenberg editor to harmonise them moving forward.
  • Brand New Classic Demo – We have overhauled the Classic Demo and breathed some life into it, completely re-aligning its appearance to be more fitting and modern, utilising a wider range of Fusion Builder Elements and tuning it up to be fully compatible with the Frontend Builder experience.
  • Color Palette Presets – Define preset colors in Theme Options for use across the color pickers on your websites pages.

  • CSS Variable Support – We have added CSS Variable Support and an Enable/Disable Option.

  • Lightbox Link Option – We have added lightbox as link option for links in the Column element.

  • Font Awesome v5.10 – Font Awesome is now updated to version 5.10 offering up 1535 icons.