Skip to main content

Page Builder Studio User Guide

Navigation Path: Sidebar → Experience Manager → Select any Surface/Project Pages → Click Edit Page
URL Pattern: /org/ecom/customerpages/:pageId/edit?from=experience&exp_tab=...

The Page Builder Studio is the visual heartbeat of the Experience Manager. It is an intuitive, drag-and-drop studio engine that allows you to build, customize, preview, audit, and publish pages without writing code.

Page Builder Studio Engine Canvas Overview

1. Studio Layout & Header Bar​

Studio Action Bar & Operational Mode Tabs

2. The 4 Studio Operational Modes​

The top bar of the studio features four dedicated operational tabs:

🎨 1. Visual Builder Mode (builder)​

  • Palette Drawer (Left): Click + Add Component to open the library drawer. Select from 100+ components grouped into functional suites (Commerce, Content, Layout, Resolve, Accounts, Floating Widgets).

Component Library Palette Drawer

  • Visual Drag-and-Drop Canvas (Center): Reorder component blocks by dragging their handles. Hover over any block to duplicate, delete, or select it.
  • Property Inspector Panel (Right): Opens automatically when a block is clicked to configure its text, colors, CTA buttons, spacing, and visibility.

👁️ 2. Customer Preview Mode (preview)​

  • Preview your page inside a True Customer Light-Theme Island that accurately simulates how your visitors see the page on your live website.
  • Device Preview Toggles: Click the device buttons to test responsive layouts:
    • 🖥️ Desktop: 1200px+ full monitor view.
    • 📱 Tablet: 768px–1024px tablet screen view.
    • 📱 Mobile: 375px phone screen view.

🔍 3. SEO Auditor Mode (seo)​

  • SEO Quality Score: Calculates a real-time health score (0–100%) for your page.
  • Meta Title & Meta Description: Configure search engine titles (30–60 characters) and meta descriptions (120–160 characters).
  • Social Card Preview: Live preview of how your page appears when shared on Twitter/X, LinkedIn, and Facebook.
  • Structured Data (JSON-LD): Configures search crawler schema (WebPage, Product, FAQPage, Article, Service).

⚡ 4. Advanced Mode (advanced)​

  • Direct page envelope inspector for advanced administrators to export, import, or back up page layout structures.

3. Multi-Level Property Inspector Detailing​

When you click any component block on the canvas, the Property Inspector panel opens on the right side with 4 configuration levels:

Multi-Level Property Inspector Panel

Level 1: General Content Properties​

  • Text & Headings: Enter title, subtitle, and body copy. Supports multi-language translation.
  • Call to Action (CTA) Buttons:
    • Link Type Dropdown: Choose None, Project Page, Organization Page, or External URL.
    • Target Page Selector: Select the destination page from your active page library.
  • Media Assets: Select images using the Digital Assets Browser.

Level 2: Appearance & Theme Color Tokens​

  • Theme Token Color Pickers: Select theme swatches that adapt automatically if you update your primary or secondary organization colors:
    • Primary: Buttons, active highlights, and primary accents.
    • Secondary: Borders, secondary buttons, and subtle accents.
    • Background / Card: Card container backgrounds.
  • Typography: Select heading tags (H1–H6), font sizes (xs–5xl), and font weights (Normal, Semibold, Bold).

Level 3: Layout, Alignment & Widths​

  • Alignment Selector:
    • Horizontal: Left, Center, Right.
    • Vertical: Top, Middle, Bottom.
  • Width Allocation:
    • Auto — Hug content / natural size.
    • Full — Stretch across 100% of row.
    • ½ (Half) — Take half the row width.
    • ⅓ (Third) — Take one third width.
    • ¼ (Quarter) — Take one quarter width.

Level 4: Responsive Visibility Rules​

Control which devices display the selected component:

  • Always: Visible across all screen sizes (phones, tablets, desktops).
  • Hide on Mobile: Hidden on screens below 768px (phones). Visible on tablets and desktops.
  • Hide on Desktop: Hidden on screens 768px and above. Visible on phones only.