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

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.

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.

You can also set the Live Builder to be your default builder. Just head to Options > Builder Options, from the Avada Dashboard. Here you will find the Builder Auto Activation option. You can turn on Live Builder to enable the live interface by default when opening a page or post.

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.

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.

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.

By default, Avada Live opens with the Sidebar open to the Navigator, which shares the third tab of the sidebar with the Element Controls. If you edit an Element, the Navigator will be replaced by the Element Controls. To view it again, simply close the Element Controls, and it will reappear.

There are collapse/expand controls on every Element and including one at the very top of the Navigator. This collapses the content to the Container level. You can also expand or collapse and Element on the page individually.

Dark Mode has come to Avada Live. With this preference, you can enjoy editing in Avada Live in Dark mode, or Light mode, as is the default. Come join the dark side!

Select the side which you want the sidebar panel to be displayed on. If you use the Sidebar Element Editing Mode, you can determine whether the panel opens on the left or the right side of the screen. Left is the default.

Choose if element editing should be in the sidebar or in a dialog. If you choose dialog, you can resize and move the dialog to whatever position on the screen you prefer.

Choose if the settings should be opened automatically after adding an element. By default, this is turned on. In most cases, the default behavior will be ideal, as when adding an Element, you will usually want to edit it immediately.

Choose if Keyboard Shortcuts should be enabled or disabled. There are a range of Keyboard Shortcuts in Avada Live, and you can enable or disable them here. See the Keyboard Shortcuts section below for more detail.

Choose if option descriptions should be shown or hidden by default. You can always toggle the description on any of the individual options, but if you prefer to always see the option descriptions, you can set this option to Show.

Choose if tooltips should be enabled or disabled. This controls the description you get when you hover over any tool in Avada Live. It is on by default.

Choose if sticky header and containers should be enabled or disabled. Sticky Headers and Containers can obstruct Container Controls while building. This option just disables the sticky header and containers in the Live Builder, not on the front end.

Choose if transparent header and absolute containers should be enabled or disabled. Transparent headers can block Container Controls at times, so if your site has a transparent header, or an absolute container, you can enable or disable it in the Live Builder here.

Choose if Element filter options preview should be enabled or disabled. Some Elements have a range of Filters, under the Extras tab. This setting determines whether you see a preview of these filters while editing.

Choose if Choose if element transform options preview. Some Elements have a range of Filters, under the Extras tab. This setting determines whether you see a preview of these filters while editing.

Enable in order to see all droppable areas while dragging element. With this enabled, you will see all possible droppable areas as a white line. With it disabled, you will only see a blue line as you mouse over a droppable area.

Choose if the sidebar panel should act as an overlay. If enabled, the sidebar will overlay the preview content. If disabled, the preview content will resize to fit the new screen area.

Choose if options sub tabs are expanded or collapsed by default in the Live Builder.

Choose to enable the device rendering logic preview for container and columns.

Avada Live also comes with a range of shortcuts to help with your efficiency. You can find a full list of these under the Support Icon on the right hand side of the toolbar as seen below.

There are a range of both Toggle Hotkeys, and Action Hotkeys. See the full list below.

With Avada Live, you edit your content directly on the front-end. You can see your layout as you build it, and any changes you make update immediately, as you make them.

Additionally, with Avada Live, you have direct access to the Avada Global Options, as well as the Avada Page Options, on the same page, as you build. This can speed your workflow significantly.

In most other ways, the two builders are essentially the same. There are small interface and workflow differences, but they both use the same Container, Column and Element structure, and controls. The content that both builders generate is also identical, and so there is full compatibility between the two builders.

The original Avada Builder is a back-end wireframe editor that allows you to build content quickly, using a system of Containers, Columns, and Elements. You design and layout your pages as you wish, using our easy to use drag and drop editor, and then preview the result in a new window.

While we recommend Avada Live for its many benefits, everyone has their preferences, and both builders have their advantages.

So with Avada Live & Avada Builder, we have now just doubled your options, giving you two ways to build your website. Welcome to the best of both worlds!

In Avada Builder, you can easily clone any of your page content. Cloning an object is making a duplicate copy of it. Whether it is a Container, a Column, or an Element, the cloned object is then placed immediately after the original object. This is the main difference between cloning and copying. With copying, the object is held in memory on the clipboard, but with cloning, it is simply duplicated and inserted.

There are two ways to clone objects in Avada Builder. The first one is to use our right-click functionality. This is available in both the Back-End and Front-End Builders, and allows you to select from a range of options. Simply right-click over your desired Container, Column, or Element and right-click. This brings up a contextual menu, and Clone is one of the options available.

With Parent and Child items, it should be noted you can clone either the child or the parent (which includes all the children). In the example below, I have right clicked over the Parent Counter Boxes, and so I would be cloning the entire row of Counter Boxes.

The second way to clone an object is to choose Clone from the Container, Column or Element Controls. When you hover over an Element Control, you will see a range of icons. One of these is the clone icon. Simply click that icon, and the object will again be cloned and inserted immediately after the object cloned.

Copying an object is to copy the underlying code and hold it in memory on the clipboard. Copying is only accessible from the Right-Click function in Avada Live. It is similar to Cloning, but different as well.

When you copy a Container, Column, or Element, you are essentially copying the code to the clipboard. If you then right-click on a different part of the page, you can then paste the copied object into a new part of the page. It’s the equivalent of cloning an object and then dragging it to a new place on the page.

When you copy an Element you can also paste this into text-based areas as well, such as a Widget or Slider input field, etc.

You can also just move an object in Avada Builder. Any time you see the clenched hand icon, you can drag the object you are hovering over, and grey guidelines will appear showing you where you can drag it to. When you drag it to a place where it can successfully be moved, the line turns blue and you can let go.

What you need to be aware of is that you can’t drag a container into a column or element position, so not every place you try to move objects to will work. Consider what you are trying to move carefully and you will have much more success.

You can also hover over the live controls of any specific element and choose the Move option. This is sometimes more useful for selecting specific elements in amongst many others.

In the example below, I am moving an entire column up above the column above. You can see the line to the left of the top column has turned blue, which lets me know I can place the column there. Because they are both full-width columns, the moved column will be placed above the other column.

Inline editing is available with any text-based elements in Avada Live. That will be the Title Element and the Text Block primarily, but also any element that has editable text components, like the Button, Alert, Checklist, Content Boxes, Countdown and Progress Bar Elements to name a few.

Inline editing can be seen in two ways. The first is simply changing the content directly on the page. In Avada Live, you can simply click in the text content, and start typing to add or edit existing text.

The second type of inline editing is inline formatting. When we make a selection in our text, the Inline Editor appears, and here we can make a variety of typography changes to our selection.

The guiding principle when it comes to inline editing is that if you want to change the content in its entirety – change the font color, or size, etc – then it’s best to look in the element options for this – but if you just want to change a single word to bold or a different color etc, then inline editing is perfect for that.

To start with, let’s look at an example of what we can do with the Title Element.

In the design tab of the Title Element, let’s look at the changes we can make to the Element as a whole. Here, we can change the alignment of the title, and set the Heading Size, which itself, has a range of default options set in the individual Header tags in the theme options.

If we wish, we can also override any of these global element options for this single instance of the element, including the font size, the line height, letter spacing, margins, font color and separator style, and color. All the changes made here apply to the title as a whole.

Whereas if we wanted to just change one word, or a section of the Title Element, we can select the desired text, and the Inline Editor appears. There are a variety of typography options that you can change with inline formatting. In this example below, I have edited the actual word, and then made it bold and changed its color.

If you look at the element in text view, you can then see the inline HTML that has been applied to the element.

Let’s have a quick systematic look at the inline options.

The first one is typography, where we can change the font size, line height, letter and spacing, as well as the font tag and even the font family and variant. Next is the font color. Then there are a few typical formatting options like Bold, Italic and Underlined. Next, you can quickly add a link to any selected text, and next to that are alignment options. This option will affect the entire paragraph, even if you have just one word selected.

Next to this is the icon for the Extended Options. These are Strikethrough.. Blockquote (again, this will affect the entire paragraph), as will the next four options – unordered and ordered lists and indent and outdent. The next option will remove formatting already applied, and the penultimate one closes the extended options.

The very last option allows you access to the Inline Elements, like Dropcap, Highlight, and Popover. These are special elements that only work in conjunction with text or other content, and not directly on their own. Please read the Inline Elements Doc for more information on these elements.

Another important thing to note is that inline edit options override element options. If you follow best practices, this won’t be an issue.

Avada also has a great new feature, that if it detects you are making an inline edit on an entire element, it will transfer that change to the element options, instead of leaving it as inline HTML. Now that’s smart!