The Avada Live Workspace
Last Update: April 23, 2024
With Avada Live, we have designed a modern and unobtrusive interface 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 website. See The Avada Builder Workspace doc to see the back-end builder interface.
Read on to have a look around the Avada Live Workspace, or watch the Avada Builder Guided Tour video below for a visual overview of the Live Builder.
The Toolbar
The Toolbar runs along the very top of the page in Avada Live. 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 Avada Live.
Avada Live Workspace
When you are in Avada Live, 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.
Mouse over the various controls below to see a description of their function.
Container Controls
Column Controls
Element Dialog
When you go to add an Element, the Element dialog appears. Depending on the plugins you have installed, and the options you have enabled, you might see a different number of elements available. From the Avada Dashboard, you can go to Options > Builder Options to check that all available Elements are enabled.
There are four tabs across the top, Design Elements, Library Elements, Nested Columns, an Studio. You can also search for an element with the search facility.
Element Controls
When you mouse over an element, it expands to show the full range of controls for that item. The majority of these controls are the same for all elements, 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 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 Items – Blue
Global Items – Cerise
100% Height Scroll – Orange
Nested Columns – Dark Blue
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 Avada Live 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 a Global Save button in the top right corner of the Avada Live. 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.
Preferences & Shortcuts
You can customize the Avada Live Workspace to some degree, by setting your preferences. This is found in the main Toolbar, under the preferences icon. See the Avada Live Preferences doc for more information on these. There are also a range of shortcuts that can speed up your workflow in Avada Live. These can be found on the Toolbar under Support > Shortcuts.
In Avada 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 Avada Live, the Exit Icon gives you three choices – to leave to the page front end, the back end, or the WordPress Dashboard.
Post Lock
A recent addition to the Avada Builder is the Post Lock. When a user with back end access is editing a page or post, and another user with back end access attempts to edit the same page, they are shown a pop-up, explaining that the current page is already being edited. They have the option to return, or to take over the edit.
On the post or pages page, you can also see when a post is being edited by another user.
Page Areas Outside The Builder
There are also areas of the page that are not directly editable in Avada Builder, as their content is generated via the Global Options, or other areas of WordPress. These are areas like the Header, the Footer, Sidebars, and Sliding Bars.
In Avada Live, there are a series of icons to these areas, to enable fast access to these areas in WordPress or Avada to make changes.
Conclusion
As you use Avada Live, 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 Avada Builder videos and read our full range of Avada Builder documentation for more information, and if you need to, you can always submit a support ticket, and we will be glad to assist you.
