9.4 Understanding the Builder Interface

The Page Builder provides a visual canvas and various panels to control your page design. The exact layout might vary slightly based on updates, but the core components are generally consistent:

  • Top Bar: Runs across the top of the builder window. Contains essential controls:
    • Page Selector: (If multiple pages in project) Allows switching directly to edit other pages within the same project.
    • Settings: Access page-specific settings like SEO Meta Data (Title, Description for search engines), Tracking Code (for page-specific analytics/pixels), Custom CSS (for page-specific styles), Background (page default), Typography (page default fonts).
    • Pop-Up Settings: Configure and design popup forms or modals that can be triggered on this page.
    • Layers / Structure Panel: Opens a hierarchical view of all sections, rows, columns, and elements on the page, useful for navigating complex layouts or selecting hidden elements.
    • Desktop/Mobile Toggle: Crucial. Switches the preview canvas between desktop and mobile views, allowing you to check and adjust responsiveness (See 9.10).
    • Preview (Eye Icon): Opens the current page in a new browser tab to see how it looks live (save changes first for accuracy).
    • Versions / History: Access previous saved versions of the page, allowing you to revert changes if needed.
    • Save Button: Save your changes frequently! Saves the current state as a draft. Changes are NOT live until published.
    • Publish / Update Button: Makes your saved changes live on the internet. The button text changes from Publish (for the first time) to Update (for subsequent changes).
    • Back Arrow / Exit Button: Exits the builder and returns to the project's page/step list. Remember to save first!
  • Elements Panel (+ Add Element / Left Panel - usually): This panel (often on the left) is where you find all the building blocks for your page. It typically contains:
    • Layout Blocks: Drag pre-defined Sections or Rows with specific column structures onto the canvas.
    • Elements: Drag individual content components like Text, Images, Buttons, Forms, Video, etc., onto the canvas *within* columns.
    • Global Sections Tab: Access and drag reusable sections (like headers/footers) that you've saved globally (See 9.9).
  • Settings Sidebar (Contextual - Often Left or Right): When you click on any Section, Row, Column, or Element on the main canvas, this sidebar activates and displays the specific settings and styling options for that selected item. It usually has tabs like:
    • General / Content: Configure the core content (e.g., button text, image source, form selection, video URL).
    • Style / Design: Adjust visual appearance (colors, fonts, borders, backgrounds).
    • Advanced: Control spacing (Margins, Padding), Visibility (hide on desktop/mobile), add Effects (shadows, animations), apply Custom CSS Classes.