Skip to content

Live Builder Analysis

Sample Badge Short summary of this page.

This document provides an in-depth analysis of the Avada Live Builder functionality as used on the Dixie Chemical websites.

The Avada Live Builder is a front-end visual editor that allows users to edit website content directly on the page, seeing changes in real-time. It’s a key component of the Avada theme used by both Dixie Chemical websites.

  • Visual Editing: What you see is what you get (WYSIWYG) interface
  • No Coding Required: Edit content without HTML or CSS knowledge
  • Real-time Preview: See changes as they’re made
  • Inline Text Editing: Edit text directly on the page
  • Drag-and-Drop Interface: Easily add and arrange elements

Both dixiechemical.com and americancarbonyl.com use the Avada theme with custom-built pages rather than pre-made templates. This means:

  • Each page has been individually designed using the Live Builder
  • Pages maintain consistent branding but have custom layouts
  • The sites use WordPress “Pages” functionality rather than “Posts”
  • Global elements (header, footer) are managed separately from page content
FeatureFunctionalityBeginner Friendliness
Text EditingDirect inline editing with formatting toolbarHigh - Very intuitive
Image ManagementReplace, resize, and style imagesMedium - Some settings are advanced
Layout AdjustmentsChange column widths, spacing, marginsLow - Not recommended for beginners
Element AdditionAdd new content elements to pagesMedium - Simple for basic elements
  • Browser Compatibility: Works best in Chrome, Firefox, Edge, and Safari
  • Performance: Can be resource-intensive on complex pages
  • Responsive Editing: Includes mobile preview mode
  • Autosave: Periodically saves work to prevent data loss
  1. Inline Text Editing: Used for updating copy and headings
  2. Image Replacement: Frequently needed for updating visual content
  3. Save/Publish Controls: Essential for workflow management
  4. Navigator Panel: Helpful for selecting the right elements
  5. Preview Mode: Important for checking changes before publishing
  • Global Options: Can affect the entire site
  • Container Structure Changes: Can break layouts
  • Custom CSS: Requires coding knowledge
  • Form Editing: Complex and risk of breaking functionality
  • Theme Settings: Should be managed by administrators

Solution: Use the Navigator panel to see the hierarchical structure of the page and select specific elements.

Solution: Use element settings for global changes to an element, and inline editing only for specific text portions.

Solution: Be careful when selecting elements, and use the “Discard Changes” option if major mistakes are made.

Solution: Close other browser tabs, ensure good internet connection, and be patient with complex pages.

Forms are embedded on pages using shortcodes or Avada elements. Beginners should not modify these elements directly.

All images are stored in the WordPress Media Library and accessed through the Live Builder interface when adding or replacing images.

Headers, footers, and other global elements are managed separately from page content and should not be edited by beginners.

  1. Log in to WordPress admin
  2. Navigate to the Pages section
  3. Find and open the page in Live Builder
  4. Make content changes (text and images only)
  5. Preview changes on different device sizes
  6. Save as draft or publish when satisfied
  7. Exit Live Builder properly using the Exit button

For more detailed information about the Live Builder interface components, see the Live Builder Interface Guide.