Avada Live Builder Interface Guide

Interface Overview

When you open a page in the Avada Live Builder, you'll see several key interface components:

Top Toolbar

The top toolbar contains essential controls for managing your editing session:

Control	Function
Avada Logo	Access to Avada menu options
Save Button	Save changes (draft, publish, or schedule)
Preview Button	Preview how changes will look on the live site
Responsive Mode	View page at different screen sizes (desktop, tablet, mobile)
Undo/Redo	Undo or redo recent changes
Exit Button	Exit the Live Builder and return to WordPress admin

Left Sidebar

The left sidebar contains several panels that can be toggled open or closed:

Elements Panel

• Contains all available content elements
• Organized by categories (Columns, Elements, Forms, etc.)
• Elements can be dragged and dropped onto the page
• Includes a search function to find specific elements

Navigator Panel

• Shows a hierarchical tree view of all page elements
• Helps select nested or hard-to-click elements
• Elements can be expanded to see their child elements
• Clicking an element in the Navigator selects it on the page

Library Panel

• Contains saved templates and elements
• Includes Avada pre-built content
• Allows saving custom elements for reuse
• Note: Beginners typically won't need to use this panel

History Panel

• Shows a list of recent actions
• Allows reverting to previous states
• Provides more detailed history than simple Undo/Redo

Content Area

The main content area displays the page as it will appear on the website, with additional editing controls:

Element Selection

• Click on any element to select it
• Selected elements show a blue outline
• Some elements require multiple clicks to select nested content

Element Controls

When an element is selected, several controls appear:

• Edit Pencil: Opens element settings panel
• Duplicate Icon: Creates a copy of the element
• Delete Icon: Removes the element from the page
• Drag Handle: Allows moving the element to a new position

Element Settings Panel

When you click the edit pencil icon on a selected element, the settings panel opens on the right side:

Content Tab

• Controls the content of the element
• Options vary depending on element type
• For text elements: content, links, formatting
• For images: source, alt text, captions

Design Tab

• Controls the appearance of the element
• Includes styling options like colors, sizes, spacing
• More advanced and typically not needed for basic content editing

Advanced Tab

• Contains technical settings
• Includes CSS classes, IDs, animations
• Note: Beginners should avoid this tab

Inline Text Editing

For text elements, you can edit directly on the page:

1. Click once to select the text element (blue outline appears)
2. Click again or double-click to enter edit mode
3. Type to modify the text content
4. Use the floating toolbar that appears for formatting options

Saving and Publishing

When you're ready to save your changes:

1. Click the "Save" button in the top toolbar
2. Choose from the available options:
   • Save Draft: Saves without publishing
   • Publish: Makes changes live immediately
   • Schedule: Sets a future publish date/time

Exiting the Live Builder

To exit the Live Builder:

1. Click the "Exit" button in the top toolbar
2. If you have unsaved changes, you'll be prompted to save or discard them
3. You'll be returned to the WordPress admin Pages screen