Editing in a Front-End interface is a new way of working for many. With Avada 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 website.
Read on to have a look around the new Avada Live Workspace, or watch the video for a visual overview.,Overview
The Toolbar
Avada Live Workspace
Element Control Icons
Color Coded Element Controls
Editing With The Element Controls
Inline Editing
Preferences & Shortcuts
Navigation
Page Areas Outside The Builder
Conclusion,The ToolbarThe 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.
Left Hand Side
Avada Icon: This has no direct function. Mouse over this icon to see the current Avada version.
Toggle Sidebar: This opens and closes the Sidebar, where you can access the Global 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 Live 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: This is now a dual purpose tool. Here you can preview the page in responsive modes, in desktop, tablet and phone preview. But this is now also a Responsive Editing Mode, for use with the Responsive Option Sets feature.
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.,Avada Live WorkspaceWhen you are first 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.
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 Controls – Illustrated 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 Control IconsWhen 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
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.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Color Coded Element ControlsDepending 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 – Cerise
100% Height Scroll Items – Orange
Nested Columns – Dark Blue
Normal Items – Blue
Global Items – Cerise
100% Height Scroll – Orange
Nested Columns – Dark Blue,Editing With The Element ControlsWhen 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 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 EditingWorking 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 & ShortcutsYou can customize the Avada Live 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 Avada Live. These can be found on the Toolbar under Support > Shortcuts.,NavigationIn 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.,Page Areas Outside The BuilderThere 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. (You can easily see these areas see when using the Wireframe View). These are areas like the Header, the Footer, Sidebars, and Sliding Bars.
In Avada Live, we have added a series of icons to these areas, to enable fast access to these areas in WordPress or Avada 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.
Header Layout – If your site has a Custom Header Layout, then there will be a single icon to enable you to edit the active Header Layout Section directly from the page. This will be the same for Page Title Bars, and Footers.
Footer, Sidebar & Sliding Bar Control Icons (from the left): Edit Footer, Edit Footer Widgets,ConclusionAs 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 Live videos and read our full range of Avada Live documentation for more information, and if you need to, you can always submit a support ticket, and we will be glad to assist you.