To gain a better understanding of how to use the Avada Builder and how it functions, we』ve created an article that explains all the tools and icons that you』ll encounter when using both the back-end wireframe Avada Builder and Avada Live, the front end editing interface.
The Avada Builder Toolbars
ContainersColumnsElement Window
Avada Library Tabs,The Avada Builder ToolbarsAvada Builder (Back-End) ToolbarBuilder Tab – Illustrated as A. Contains all your page content and elements. This is where you add and modify the columns, elements and the like.
Library Tab – Illustrated as B. Allows you to import any of our demo content into your page. On this tab, you can also view and load custom templates you』ve saved.
Collapse Icon – Illustrated as C. Click this icon to collapse or expand all of your existing Containers on the page.
Custom CSS Icon – Illustrated as D. Click here to expand the custom CSS field. Click again to collapse it. Custom CSS added through this field will only affect the specific page.
Save Page Layout Icon – Illustrated as E. Click here to save the current page layout as a template. Once you save a page as a custom template, you can load it as many times.
Delete Page Layout Icon – Illustrated as F. Click here to delete your current page layout and clear the page editor.
History States Icon – Illustrated as G. Click here to expand the history tab. Here, the past 20 or so actions you』ve done will be displayed. You can click on any of these actions to revert back to any one of them.
Info Icon – Illustrated as H. Click here to read the Avada Builder documentation.
Avada Live (Front-End) ToolbarAvada Builder – Illustrated as A. This is the Avada Icon, and shows the current version if you mouse over it.
Toggle Sidebar Icon – Illustrated as B. This opens and closes the Sidebar, where you can access the Global Options, Page Options, and the Element Settings.
Library Icon – Illustrated as C. This accesses the Avada Builder Library.
History Icon – Illustrated as D. This shows the latest 25 history states, allowing you to step backward throughout your actions.
Preferences Icon – Illustrated as E. Here you can access the Avada Builder Preferences.
Add New Icon – Illustrated as F. This icon allows you to add a new Post, Page, Portfolio, FAQ, Layout or Element.
Clear Layout Icon – Illustrated as G. This clears the layout from the page.
Support Icon – Illustrated as H. Offers links to our Getting Started documentation, our Support portal, and the keyboard shortcuts available.
Responsive Icon – Illustrated as I. Here you can preview the page in responsive mode, in desktop, tablet, and phone preview. This is now also a Responsive Editing Mode, for use with the Responsive Option Sets.
Toggle Wireframe Icon – Illustrated as J. Click this icon to toggle the back-end wireframe in the Front-End Builder.
Preview Icon – Illustrated as K. Preview mode closes all panels and removes front-end icons to give you a quick, clean page preview.
Publish Icon – Illustrated as L. This button allows you to quickly set the state of the page to Published.
Draft Icon – Illustrated as M. This button allows you to quickly set the state of the page to Draft.
Save Button – Illustrated as N. The Save Button allows you to save all the work done in the Front-End Builder, including edits to Elements, and global and page options settings.
Exit Button – Illustrated as O. The Exit Button allows you to exit the builder, to the page front-end, the page back-end, or the WordPress dashboard.,ContainersAvada Builder (Back-End) Container IconsName Field – Illustrated as A. Click on the title to give the Container a custom name.
Settings Icon – Illustrated as B. Click here to view the options for the Container.
Clone Section Icon – Illustrated as C. Click here to clone the Container.
Save Icon – Illustrated as D. Click here to save the Container as a template.
Delete Icon – Illustrated as E. Click here to delete the Container.
Collapse Icon – Illustrated as F. Click here to expand or collapse the Container.
Add Container – Illustrated as G. Hover over the bottom area of the current Container, and a 『+ Container』 button will appear. Click this to add another Container directly below your current one.
Add Columns – Illustrated as H. Hover over the bottom area of the current Container, and a 『+ Columns』 button will appear. Click this to add more columns to the Container.
Avada Live (Front-End) Container IconsDrag Container Icon – Illustrated as A. This icon activates the hand icon, with which you can drag your containers around in your layout.
Delete Container Icon – Illustrated as B. This deletes your container.
Save Container Icon – Illustrated as C. This opens the Library to the Containers tab, where you can save your container.
Clone Container Icon – Illustrated as D. This duplicates the container and places it directly below in the layout.
Container Settings Icon – Illustrated as E. This opens the Container Settings dialog in the Sidebar.
Add Container Icon – Illustrated as F. This opens the Add Container dialog, where you can add an empty container or any combination of Container and Column.
Add Element Icon – Illustrated as G. This opens the Add Element Window. This will only show if there is a column inside the Container.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,ColumnsAvada Builder (Back-End) Column IconsAdd Element – Illustrated as A. Click here to add an element to the Column.
Resize Column Icon – Illustrated as B. Click here to bring up the available column sizes, then simply select a size you』d like your column to change to.
Settings Icon – Illustrated as C. Click here to bring up options for the column.
Clone Section Icon – Illustrated as D. Click here to clone the Column.
Save Icon – Illustrated as E. Click here to save the Column as a template.
Delete Icon – Illustrated as F. Click here to delete the Column.
Avada Live (Front-End) Column IconsColumn Settings Icon – Illustrated as A. This opens the Column Settings dialog in the Sidebar.
Add Column Icon – Illustrated as B. This opens the Add Column dialog, where you can add an empty container or any combination of Column.
Column Size Icon – Illustrated as C. This allows you to adjust the size of your Column.
Clone Column Icon – Illustrated as D. This duplicates the Column and places it directly below in the layout.
Save Column Icon – Illustrated as E. This opens the Library to the Columns tab, where you can save your Column.
Delete Column Icon – Illustrated as F. This deletes your Column.
Drag Column Icon – Illustrated as G. This icon activates the hand icon, with which you can drag your Column around in your layout.
Add Element Icon – Illustrated as H. This opens the Element Window, allowing you to add an Element to your Column.
Container Control Icons – Illustrated as I. These are the initial Container Element Controls, visible for the Container the Column is inside.,Elements WindowAvada BuilderBuilder Elements Tab – Illustrated as A. View all the available elements here. Click the Element to add it to the column.
Library Elements Tab – Illustrated as B. View all your saved elements here. Click the Element to add it to the column.
Nested Columns Tab – Illustrated as C. View all available Nested Column layouts here. Click your desired column layout to add it to the column.
Search Bar – Illustrated as D. Use the search bar to look for specific elements from the list. Use simple keywords, such as Button.
Elements – Illustrated as E. Choose from the full range of Elements shown in the Elements Window.
Avada LiveBuilder Elements Tab – Illustrated as A. View all the available elements here. Click the Element to add it to the column.
Library Elements Tab – Illustrated as B. View all your saved elements here. Click the Element to add it to the column.
Nested Columns Tab – Illustrated as C. View all available Nested Column layouts here. Click your desired column layout to add it to the column.
Search Bar – Illustrated as D. Use the search bar to look for specific elements from the list. Use simple keywords, such as Button.
Elements – Illustrated as D. These are the available Avada Builder Elements.,Avada Builder Library TabsA. Websites TabSelect any of our pre-built websites from the dropdown and all its pages that are available to import will display in a list. Select the page you』d like to import into your page from the list, and click the 『Load』 button beside it. Importing a Pre-built Website Page will overwrite any page content you currently have on the page.
B. Templates TabEnter a custom name in the text field provided, then click 『Save Template』 to save your current page as a Custom Page Template. You can also load, edit and delete custom page templates you』ve already created.
C. Containers TabView your saved Containers on this tab. You can delete and edit saved Containers here, but you can』t load them from the Library window. To load saved Containers, click the 『+ Container』 button and switch to the 『Library Containers』 tab.
D. Columns TabView your saved Column sections on this tab. You can delete saved columns, but you can』t load them from the Library window. To load saved Columns, click the 『+ Columns』 button and switch to the 『Library Columns』 tab.
E. Elements TabView your saved Elements on this tab. You can delete them, but you can』t load them from the Library window. To load saved elements, create a Column first. click 『+ Element』 and switch to the 『Library Elements』 tab.