标签： avada-builder

Avada Live Local Options Management

For a long time in Avada, we have had local options management via the Page Options panel, found at the bottom of every page when editing. With Avada Live, we also have Local Options Management directly on the page. So while you are editing a page in Avada Live, you can also access the Page Options panel as you can in the back-end editor, but here, it is found in the Sidebar panel, which, by default, loads at the left-hand side of the page.
Watch the video, or read on to find out more about this new way of working with Local Options.,How To Access Local Options in Avada LiveThere are several types of Local Options you can access and manage in Avada Live.
The first ones are, of course, the Page Options. On the Toolbar, at the top of the page, you will see a row of icons, as shown in the image below. The second one along is the Sidebar Icon, and clicking on this opens the Sidebar. The Page Options are available from the second icon on the Sidebar, also as shown below.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Page OptionsThe entire set of Page Options are available to you here, in an easy to use interface. Any changes you make in the Page Options are shown directly on the page as it auto-refreshes to show you the changes.
NB. Two notable changes from the back-end builder are the addition of a Settings tab, which is where you can change the Page Title, Slug, Parent, Page Template, and add featured images to a page, and a Custom CSS tab, which is where you can add local custom CSS for the open page or post.
With any changes you make on the Sidebar, you will notice the Save Icon on the Toolbar becomes blue. This signifies changes have been made and are ready to save.,Other Local OptionsSome local page features are not editable directly in the Front-End Builder, in the same way, they are not editable from the back-end builder. These areas are not in the page content, and are controlled from the Page Options, or other areas in WordPress. These are areas like Sliders, and the Page Title Bar.
Sliders and the Page Title Bar are initially added from the Header Icon Controls, as shown above, but if they are already assigned to the page, then you will instead find both Global and Local Edit Icons, as well as a Remove icon, on the actual Slider or Page Title Bar, as seen below.,Global Save ButtonAs noted above, there is no Save button at the bottom of the Page Options panel in Avada Live. All changes are updated on the page as soon as they are made, but with Avada Live we have combined the Save button for both page content, and theme and page options.
So now there is one Global Save button, on the far right of the top toolbar. When no changes have been made, the icon is grey. It turns blue as soon as any change has been made, whether that is in page content, or global or page options, and when you click it, the button turns temporarily green to show you it has saved before turning grey again. History states are also cleared when a page is saved.
See the Avada Live Global Options Management Doc Here!

Avada Builder History Feature

The Avada Builder includes a useful feature called History. This feature tracks the last 25 actions that have been performed in the editor and allows you to revert back to any state before or after an action. To learn how to use this feature, continue reading below.
IMPORTANT NOTE: This feature is only available in Avada 5.0 and up.Read About Avada Builder』s Tools and IconsHow To Use The History FeatureStep 1 – Activate Avada Builder, or Avada Live.
Step 2 – Create your page layout as you』d like. Each action you make is recorded under the History icon as a history state. In the back end editor, the History Icon is found on the right uppermost corner of the Avada Builder toolbar. In Avada Live, the History Icon is on the left side, the 4th icon along on the toolbar.
Step 3 – Once you click the 『History』 icon, you』ll see all your actions in a list. To revert to a particular history state, simply click the history state in the list. You can jump between any history state in the History list as often as you wish, until you save.
IMPORTANT NOTE: Saving or refreshing the page will reset your history states.

Best Practices for Inline Editing in Avada Live

One of the great new features in Avada Live is the ability to edit text directly on the page. Not only can you edit text, but you can also apply a range of inline editing options, including font color, and size. But several of these options also exist in the element options, so it』s good to know what the best practices are for working with inline editing. Watch the video or read on to find out…,OverviewInline Editing & Formatting
Editing Elements As A Whole
Editing Part Of An ElementInline Options,Inline Editing & FormattingInline 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.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Editing Elements As A WholeTo 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.,Editing Part of An ElementWhereas 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.,Inline OptionsLet』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!

Avada Builder Options

The Avada Builder has a vast array of options that allow you to configure the Builder to suit your preferences and website environment. These options include activating and deactivating the Avada Builder on custom post types, enabling or disabling any of the Avada Builder Elements to improve performance, and exporting or importing your Avada Builder settings. Continue reading below to learn more about these options.
OverviewHow To Access Avada Builder OptionsAvada Builder Auto Activation
Disable/Enable Avada Builder Elements
Activate/Deactivate Avada Builder on Custom Post TypesImport/Export Avada Builder Content
Avada Builder Elements Customizations,How To Access Avada Builder OptionsBefore you can access the Avada Builder Options, you must first install and activate the Avada Builder Plugin. Once this is activated, navigate to the Avada Dashboard and head to Options > Builder Options. Here, you will find all of Avada Builder』s available options. Customize these options to your liking, then click 『Save Settings』 to save your changes.
Read our Avada Builder Plugin article!,Avada Builder Auto ActivationThe Avada Builder Auto Activation option allows you to enable or disable the Avada Builder user interface by default when creating or editing a page, or post. When active, the Avada Builder will automatically load when creating or editing a new page or post. Otherwise, the default WordPress content editor field will be displayed. Simply toggle the option to On to enable, or Off to disable.,Disable/Enable Avada Builder ElementsIMPORTANT NOTE: Use with caution! Disabling an Avada Builder Element will disable it from all existing pages or posts. Disabled elements will render as regular code snippets on the front end.Under the Avada Builder Elements section, you』ll find a checklist of all existing Avada Builder Elements, including Design Elements, Layout Elements and Form Elements. If you are not using a particular Element on your website, you can disable it here. Disabling individual Avada Builder Elements can slightly increase performance and load speed. Please be aware though, that disabling an Element will disable it on all existing pages or posts. Any disabled Elements that have been used across the site will render as code snippets, so make sure you haven』t used it anywhere before disabling it. To help with this, the Run Element Scan option was added in Avada 7.3.
Run Element ScanThe Run Element Scan button does exactly what it says. It scans the website, and finds and disables the Elements which are not in use. You could use this feature when you are finished with a website, to easily find the disable the Elements you are not using. Just note, that this feaure may not fully run on large websites with a lot of content.,Activate/Deactivate Avada Builder on Custom Post TypesUnder the 『Post Types』 section, you』ll find a checklist of all your existing custom post types. What you see here will be depenedant on the plugins you have installed. Using these options, you can activate or deactivate the Avada Builder on any of your custom post types. Simply check the checkbox of the custom post type you』d like to activate the Avada Builder in, or uncheck to disable it.
Learn More About The Avada Builder On Custom Post Types,Import/Export Avada Builder ContentYou can also export your entire Avada Builder settings and content which you can use as a backup, or import to another Avada installation.
ImportingTo import your Avada Builder content, simply browse to and select the XML file with your saved content and click the 『Import』 button and wait for it to finish loading.
ExportingYou can choose to export your entire Avada Builder content (saved containers, columns, or elements), or just your full page templates. Simply click the appropriate button and an XML file containing your saved content will be downloaded to your computer.,Avada Builder Elements CustomizationsIf you』d like to customize each Avada Builder Element globally, you can do so by going to the Avada > Options panel, then switching to the Avada Builder Elements tab. On this tab, you can globally customize each element to your liking. If you』d like to customize each Avada Builder Element individually, then you can do so by editing the individual Element while building your page or post.
You can also access these Element Global Options when you are in Avada Live. Simply click the Toggle Sidebar icon on the Toolbar, and choose the Global Options Tab. Scroll down to the penultimate option, called Avada Builder Elements, and here you can also set the global defaults for the Elements.

Cloning, Copying & Moving Elements in Avada Live

To make it easier for you to copy and move your page content around in Avada Live, you will find a range of clone, copy and move functions.
Read on to find out more about how to work with content in Avada Live, or watch the video for a visual overview.,CloningIn 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.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,CopyingCopying 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.,MovingYou 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.

Avada Builder Quick Start Guide

The Avada Builder is ThemeFusion』s very own page builder, now available in both front-end and back-end interfaces. With this fully featured, and easy to use page builder, you can build complex layouts without any coding knowledge at all.
With the release of Avada 6.0, we introduced 『Fusion Builder Live』, an awesome companion to the traditional wireframe builder. In Avada 7, Fusion Builder Live was renamed to Avada Live.
Read on below to get an overview of the Avada Builder, and for links to many Avada Builder resources.
Learn More About 『Avada Builder vs Avada Live』,The Avada Builder Creation ProcessRegardless of whether you are editing with the traditional Avada Builder wireframe editor, or Avada Live, the creation process is the same. You always start by creating a Container. Then you add columns to the container, and then finally, add Avada Builder elements to the columns. This makes your content easier to organize and allows for maximum compatibility. To get a full description of the building process, see the 『How The Avada Builder Works』 link below.
Learn About 『How The Avada Builder Works』767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Avada Builder Tools & FeaturesThe following documents are about the Avada Builder』s tools and features, and how to use them.

Avada Library – With the Avada Builder Library, you can save and redeploy all types of page content, from elements, columns, containers and even full pages.
History Feature – Redo and undo almost any action you』ve done while building a page with Avada Builder with our new History States feature.
Right-Click Feature – With the Avada Builder right-click feature, you can access many commands and Library functions very easily.

Nested Columns – You can now insert columns within columns to build more intricate and flexible page layout designs.

Element Search Function – Never have difficulty finding an element again with the new Element Search Function.

Custom CSS Per Page – Insert Custom CSS per individual page for even more in-depth design and customizations.

Avada Builder Starter Page – This is the starter page that you』ll encounter when building a new page with the Avada Builder.

Avada Builder Visibility System – Easily control which Avada Builder elements are visible on different device sizes.

Avada Builder Tools & Icons – To build pages with ease, it』s important to become familiar with the Avada Builder』s tools and icons.
Avada Builder Import Prebuilt Website Pages – Import any page from any prebuilt website with just one click!
Advanced Options Network Correlation – Quickly view and change Global Options.

Adding Elements – If you are the developer type, you can also learn how to add Avada Builder Elements in Avada Builder.

Responsive Option Sets – In Avada Builder, there is now an awesome feature to help you design for different screen sizes, using the same Elements.,Avada Live Docs & VideosThe following documents specifically explore Avada Live.

Avada Live Workspace – This document looks at the Avada Live Workspace in detail.

Avada Live Global Options Management – This document looks at how you can access many global options directly from Avada Live.

Avada Live Local Options Management – This document looks at how you can access many local options directly from Avada Live.

Using The Avada Live Wireframe – This document looks at the Avada Live Wireframe view, and how to use it.

Best Practices for Inline Editing in Avada Live – This document looks at Inline Editing in Avada Live, and covers the best practices for its use.

Cloning, Copying & Moving Elements in Avada Live – This document looks at how you can clone, copy & move elements around in Avada Live.

Adjusting Margins & Padding in Avada Live – This video looks at new methods to adjust margins & padding in Avada Live.,Technical & TroubleshootingThese document articles are about the Avada Builder』s technical features. This list includes articles about converting pages created using the old Avada Builder, the Avada Builder』s settings, and the like. Please read these articles to learn more about the Avada Builder』s technical features.

Avada Builder Options – The Avada Builder has its own options, that enable you to optimize it to suit your needs.

Add On System For Developers – Create your own add-ons and contribute to the Avada Builder Library and Elements collection!