The Fusion Builder Live Workspace

09/08/2019

Editing in a Front-End Builder is a new way of working for many. With Fusion Builder Live, we have designed a modern and unobtrusive workspace that stays out of the way as much as possible. This minimalist approach allows you to see your content and layout clearly, while still giving you access to the tools you need to quickly build your layouts.

Watch the video, or read on to have a look around the new Fusion Builder Live Editor Workspace.

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

The Toolbar

The Toolbar runs along the very top of the page in the Fusion Builder Live Editor. This provides access to many page building tools, in much the way it does in the back-end builder. It is also sticky, so it always remains at the top of the page as you scroll, providing constant access to its important functions. Let’s have a look at this central component of the Fusion Builder Live Editor.

The Fusion Builder Live Toolbar

Left Hand Side

  • Fusion Builder Icon/Exit: This closes the Front-End Builder and takes you back to the page on the front-end.

  • 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 shows 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.

Fusion Builder Live Workspace

When you are first in the Fusion Builder Live Editor, the only things that really differentiates it from a front-end page is the Toolbar along the top, and the few icons overlaid on the content. It is when you mouse over these icons, that you can fully see and access the Element Controls.

There are Controls for every part of the page that can be edited. There are Container Controls, Column Controls, and individual Element Controls, as well as Nested Columns and separate controls for both Parent and Children items in Elements that use this structure. Just mouse over a content area and you will see the Element Controls for whatever content is there.

Take a good look at the image below. In this example, we have moused over the Content Box on the far left, and we can see a number of Element Controls.

  • Individual Content Box Element ControlsIllustrated as A

  • Content Boxes Parent Element Controls – Illustrated as B

  • Column Controls – Illustrated as C

  • Container Controls – Illustrated as D

  • ‘Add Element’ Icons – Illustrated as E – Two Add Icon also show on the screen, as those particular columns are empty and are, as such, easily missed.

Element Controls Location Overview

Element Control Icons

When you mouse over a Container, Column or Element you see the Element Controls. The initial view consists of a Settings Icon (the pen icon) and an Add Icon (a Plus icon for Elements, and a Column or Container Icon respectively for Columns and Containers.) See the image below for the initial view of all Element Controls.

Element Controls > Initial View

When you mouse over a control, it expands to show the full range of controls for that item. The majority of these controls are the same for all items, although there are a few specific to the item. For example, all items have Edit, AddClone, Library, Delete and Drag icons, with the exception of child elements and individual columns inside a Nested Columns Element, which can’t be saved independently to the library, and so don’t have the Library icon. Also, Columns have an additional control to change the Column Size.

In the image below, you can see the Column Controls, Element Controls and Container Controls.

Avada Live Element Controls

Column Element Controls

  • Column Options This opens the Column Options Panel in the Sidebar, where you can then configure the Column as you wish.

  • Add Columns – This opens the Add Columns dialog, where you can add any a range of Column sizes and combinations to the parent Container.

  • Column Size – This opens the Column Size dialog, where you can change the size of the selected Column to anything from 1/1 to 1/6

  • Clone Column –  This duplicates the Column, which is then added directly below the Column cloned.

  • Save Column –  This opens the Library dialog to the Columns tab, where you can save the selected Column.

  • Delete Column –  This deletes the chosen Column from the layout.

  • Drag Column – This turns the cursor turns into a clutching hand, and you can begin to drag the element around the screen. In fact, any time you see the hand icon, you can drag your content around the page, and guidelines will appear to show you the possible move locations. For more information on this, please see Cloning, Copying & Moving Elements in Avada Live.

Element Controls

  • Drag Element – This turns the cursor turns into a clutching hand, and you can begin to drag the element around the screen. In fact, any time you see the hand icon, you can drag your content around the page, and guidelines will appear to show you the possible move locations. For more information on this, please see Cloning, Copying & Moving Elements in Avada Live.

  • Clone Element–  This duplicates the Element, which is then added directly below the Element cloned.

  • Element Options This opens the Element Options Panel in the Sidebar, where you can then configure the Element as you wish.

  • Add Element – This opens the Add Element dialog, where you can add any of our Elements to the Column. It will be added directly under the Element you add from.

  • Save Element –  This opens the Library dialog to the Elements tab, where you can save the selected Element.

  • Delete Element  –  This deletes the chosen Element from the layout.

Container Element Controls

  • Drag Container – This turns the cursor turns into a clutching hand, and you can begin to drag the element around the screen. In fact, any time you see the hand icon, you can drag your content around the page, and guidelines will appear to show you the possible move locations. For more information on this, please see Cloning, Copying & Moving Elements in Avada Live.

  • Delete Container –  This deletes the chosen Container from the layout.

  • Save Container –  This opens the Library dialog to the Containers tab, where you can save the selected Container.

  • Clone Container –  This duplicates the Container, which is then added directly below the Container cloned.

  • Container Options This opens the Container Options Panel in the Sidebar, where you can then configure the Container as you wish.

  • Add Container – This opens the Add Container dialog, where you can add an empty Container, or one with any possible combination of Columns already inside.

Color Coded Element Controls

Depending on the type of page content you are editing, you will also notice some different colors on the Element Controls. This is to help differentiate content at a glance.

  • Normal Page Content – Blue

  • Global Items – Pink

  • 100% Height Scroll Items  – Orange

  • Nested Columns – Dark Blue

Normal Items - Blue Element Controls

Normal Items – Blue

Global Items - Pink Element Controls

Global Items – Pink

100% Height Scroll Container Orange Outline

100% Height Scroll – Orange

Nested Columns - Dark Blue

Nested Columns – Dark Blue

100% Height Containers - Dotted Lines

Also, on Containers set to 100% Height, there are dotted lines at the top and bottom, that signify the cut-off point for the 100% height.

Editing With The Element Controls

When you edit the Options of a Container, Column, or Element (the pen icon), the Element Options panel opens in a Sidebar on the left of the page. If you prefer, you can change the Element Editing Mode setting in the Fusion Builder Preferences so that it opens in a standalone dialog instead. Once you have set your preferred working position, it will open in that area from then on, unless you change it again.

Now you can edit your element as you would in the back-end editor, with the main difference being you can see the element at the same time, and any changes you make to the element are reflected in real time on the page.

Editing Elements in Fusion Builder Live

Depending on the Element you are editing, you will have a range of options and tabs which to configure the Element with. Your changes will be visible on the page immediately. When you have completed editing the element, you can just move on to the next Element. There is no Save button at the bottom of the Element Options, as there is now a Global Save button in the top right corner of the Fusion Builder Live Editor. Simply click Save there whenever you wish to commit your changes. Note that this will clear the History States.

Inline Editing

Working with text is a little different. With the Title And Text Block elements, and in fact any elements that have a text component, you can edit directly on the page without the need of any element dialog. Simply click in the text where you want to edit, and start typing. Also, if you select some text, the Inline Editing dialog appears.

To fully understand Inline Editing, please see our Best Practices for Inline Editing in Avada Live document.

Inline Editor > Inline Elements

Preferences & Shortcuts

You can customize the Fusion Builder Workspace to some degree, by setting your preferences. This is found in the main Toolbar, under the preferences icon. As you can see from the image below there are a number of preferences you can set, including the position of the Sidebar, and whether the Element Edit controls open in the Sidebar on in their own dialog.

There are also a range of shortcuts that can speed up your workflow in Fusion Builder Live. These can be found on the Toolbar under Support > Shortcuts.

Fusion Builder - Preferences
Fusion Builder - Shortcuts

In Fusion Builder Live, you don’t need to return to the WordPress dashboard to navigate to new pages. Once you have edited and saved a page, you can simply navigate to another page using the main menu and keep editing. If the Header Icons are blocking the menu, just click on the Preview Icon and then you can see the menu without any icons interfering.

You can also navigate to other linked page on buttons by holding down Cmd/Ctrl while clicking on the button.

When leaving Fusion Builder Live, the Exit Icon gives you three choices – to leave to the page front end, the back end, or the WordPress Dashboard.

Page Areas Outside The Builder

As you can easily see when using the Wireframe View, there are also areas of the page that are not directly editable in the Fusion Builder, as their content is generated in the Theme Options, or other areas of WordPress. These are areas like the Header, the Footer, Sidebars, and Sliding Bars.

In the Fusion Builder Live Editor, we have added a series of icons to these areas, to enable fast access to these areas in WordPress or the Theme Options to make changes.

Header Control Icons
  • Header Control Icons (from the left): Edit Header Layout, Edit Logo, Edit Main Menu, Add Slider, Add Page Title Bar. If you have a Page Title Bar or Slider on the Page, these icons will not be on this bar, but instead, relevant icons will be on the Page Title Bar and Slider respectively.

Footer Control Icons
  • Footer, Sidebar & Sliding Bar Control Icons (from the left): Edit Footer, Edit Footer Widgets

Conclusion

As you use the Fusion Builder Live Editor, the workflow and controls will quickly become logical and evident. The beauty of the design of this front end builder is that it stays out of the way as much as possible, yet everything you need is right at your fingertips.

Watch our Fusion Builder Live videos and read our full range of Fusion Builder Live documents for more information, and if you need to, you can always submit a support ticket, and we will be glad to assist you.