The Fusion Builder Live Workspace
Editing in a Front-End interface 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.
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.
Left Hand Side
Right Hand Side
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.
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.
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, Add, Clone, 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.
Column Element Controls
Container Element Controls
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
Global Items – Pink
100% Height Scroll – Orange
Nested Columns – Dark Blue
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.
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.
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.
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.
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 (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, Sidebar & Sliding Bar Control Icons (from the left): Edit Footer, Edit Footer Widgets
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.