Live Builder Interface

Sample Badge

Sample Callout

This is a placeholder tip callout.

Short summary of this page.

Avada Live Builder Interface Guide

This guide provides a detailed explanation of the Avada Live Builder interface components and how to navigate them effectively.

Interface Overview

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

Avada Live Builder interface overview

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

Elements panel showing available content 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

Navigator panel showing page element hierarchy

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

Element Settings Panel

When you select any element on the page, the settings panel appears on the right side. It has three main tabs:

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

Extras (Advanced) Tab

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

Element settings panel with Content, Design, and Advanced tabs

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

Inline text editing with formatting toolbar

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

Save options dropdown menu

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

Important: Always use the Exit button rather than closing the browser tab or navigating away. This ensures your changes are properly saved or discarded.

Now that you understand the Live Builder interface, you can proceed to the specific guides for Text Editing and Image Management to learn how to make content changes.